finished conflicts in future merges after last components branch commit

components/Home.tsx

@@ -1,36 +0,0 @@
-import Header from '../components/custom/header';
-import Footer from '../components/custom/footer';
-import Test from '../components/scripts/Test';
-import MetaMask from '../components/scripts/MetaMask';
-
-export default function Home() {
-  return (
-    <div className="container mx-auto p-4">
-      <div>
-        <Header />
-        {/* Other page content */}
-      </div>
-      <main>
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">Featured Events</h2>
-          <p className="text-gray-600">No events available at the moment.</p>
-        </section>
-        <section>
-          <h2 className="text-2xl font-semibold mb-4">Upcoming Events</h2>
-          <ul className="list-disc list-inside">
-            <li>Event 1 - Date</li>
-            <li>Event 2 - Date</li>
-            <li>Event 3 - Date</li>
-          </ul>
-        </section>
-        <section className="mb-8">
-          <Test />
-        </section>
-        <section className="mb-8">
-          <MetaMask />
-        </section>
-        <Footer />
-      </main>
-    </div>
-  );
-}

components/Profile.tsx

@@ -4,20 +4,12 @@ import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { motion } from 'framer-motion';
 
 // Dark theme and animation setup

components/WalletAdapter.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const WalletAdapter = () => {
+  return <div>WalletAdapter</div>;
+};
+
+export default WalletAdapter;

components/custom/EventDescription.tsx

@@ -1,4 +1,3 @@
-'use client';
 import React from 'react';
 import {
   Card,
@@ -10,10 +9,16 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import ImageCarousel from './ImageCarousel';
-import BuyTicket from './BuyTicket';
 import TicketButton from './TicketButton';
+import { buyHandler } from '@/lib/buyHandler';
+import { useToast } from '@/hooks/use-toast';
+
+const EventDescription = ({ eventId }: { eventId: string }) => {
+  const { toast } = useToast();
+  const handleBuyNow = () => {
+    buyHandler(Number(eventId), toast);
+  };
 
-const EventDescription = () => {
   return (
     <Card className="pt-10 pb-16 px-6 bg-gradient-to-r from-blue-50 to-gray-50 rounded-xl shadow-lg max-w-4xl mx-auto">
       <CardHeader className="flex flex-col items-start space-y-4">
@@ -48,6 +53,7 @@ const EventDescription = () => {
         <Button
           variant="default"
           className="w-full md:w-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700"
+          onClick={handleBuyNow}
         >
           Buy now Using MetaMask
         </Button>

components/custom/FeaturedEvent.tsx

@@ -0,0 +1,51 @@
+'use client';
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from '@/components/ui/card';
+
+interface props {
+  name: string;
+  description: string;
+  location: string;
+  eventStartDate: number;
+  eventHost: string;
+  imageURL: string | null;
+}
+
+const FeaturedEvent = ({
+  name,
+  description,
+  location,
+  eventStartDate,
+  eventHost,
+  imageURL,
+}: props) => {
+  return (
+    <Card>
+      <CardHeader>
+        {imageURL && <img src={imageURL} alt={name}></img>}
+        <CardTitle>{name}</CardTitle>
+        <CardDescription>
+          {location}
+          <br />
+          {new Date(eventStartDate * 1000).toLocaleString()}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>{description}</CardContent>
+      <CardFooter>
+        <i>
+          Host: {eventHost.substring(0, 8)}...
+          {eventHost.substring(eventHost.length - 3)}
+        </i>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default FeaturedEvent;

components/custom/footer.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 const Footer = () => {
   return (
     <footer className="text-center mt-8">
-      <p className="text-gray-500">
-        &copy; 2024 Ticket Chain. All rights reserved.
+      <p className="text-light-purple text-opacity-75">
+        &copy; 2024 TicketChain. All rights reserved.
       </p>
     </footer>
   );

components/custom/header.tsx

@@ -4,48 +4,70 @@ import Link from 'next/link';
 import MetaMask from '../scripts/MetaMask';
 
 const Header = () => {
-  const [mouseX, setMouseX] = useState(0);
-  const [mouseY, setMouseY] = useState(0);
+  const [mouseX, setMouseX] = useState(-1);
+  const [mouseY, setMouseY] = useState(-1);
 
   const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
     setMouseX(e.clientX);
     setMouseY(e.clientY);
   };
 
+  const handleMouseLeave = () => {
+    setMouseX(-1);
+    setMouseY(-1);
+  };
+
   return (
     <div
       className="fixed top-0 left-0 right-0 backdrop-blur-md bg-opacity-60 z-50"
       onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
     >
       <div
         className="absolute inset-0 pointer-events-none"
         style={{
           border: '1px solid transparent',
-          background: `radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.4), transparent 20%)`,
+          background:
+            mouseX >= 0 && mouseY >= 0
+              ? `radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.4), transparent 20%)`
+              : 'none',
           backgroundClip: 'padding-box, border-box',
         }}
       ></div>
-      <div className="container mx-auto px-6 py-5 flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-white">Ticket Chain</h1>
+      <div className="container mx-auto px-6 py-4 flex justify-between items-center">
+        <Link href="/" legacyBehavior>
+          <a className="text-2xl font-semibold text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300">
+            TicketChain
+          </a>
+        </Link>
         <nav className="nav">
           <ul className="flex space-x-6">
             <li>
               <Link href="/" legacyBehavior>
-                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                <a
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
+                  style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
+                >
                   Home
                 </a>
               </Link>
             </li>
             <li>
               <Link href="/events" legacyBehavior>
-                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                <a
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
+                  style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
+                >
                   Events
                 </a>
               </Link>
             </li>
             <li>
               <Link href="/contact" legacyBehavior>
-                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                <a
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
+                  style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
+                >
                   Contact
                 </a>
               </Link>

components/scripts/MetaMask.tsx

@@ -1,76 +1,108 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { ethers } from 'ethers';
+import { useSDK, MetaMaskProvider } from '@metamask/sdk-react';
+import { Button } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 
-declare global {
-  interface Window {
-    ethereum: ethers.providers.ExternalProvider;
-  }
+function WalletIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" />
+      <path d="M3 5v14a2 2 0 0 0 2 2h16v-5" />
+      <path d="M18 12a2 2 0 0 0 0 4h4v-4Z" />
+    </svg>
+  );
 }
 
-const MetaMask = () => {
-  const [metaMaskInstalled, setMetaMaskInstalled] = useState(false);
-  const [account, setAccount] = useState<string | null>(null);
+function formatAddress(address: string | undefined): string {
+  if (!address) return '';
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
 
-  const isMetaMaskInstalled = () =>
-    typeof window !== 'undefined' &&
-    typeof (window as { ethereum?: unknown }).ethereum !== 'undefined';
+function MetaMaskConnect() {
+  const { sdk, connected, connecting, account } = useSDK();
+  const [isConnected, setIsConnected] = useState(false);
 
   useEffect(() => {
-    if (isMetaMaskInstalled()) {
-      setMetaMaskInstalled(true);
-    }
-  }, []);
+    setIsConnected(connected);
+  }, [connected]);
 
-  const handleConnectWallet = async () => {
-    if (window.ethereum && window.ethereum.request) {
-      try {
-        // Request account access
-        const accounts = await window.ethereum.request({
-          method: 'eth_requestAccounts',
-        });
-        setAccount(accounts[0]); // Set the first account
-      } catch (error) {
-        console.error('Error connecting to MetaMask:', error);
-      }
-    } else {
-      alert(
-        'MetaMask is not installed. Please install MetaMask and try again.'
-      );
+  const connect = async () => {
+    try {
+      await sdk?.connect();
+      setIsConnected(true);
+    } catch (err) {
+      console.warn(`No accounts found`, err);
+    }
+  };
+
+  const disconnect = () => {
+    if (sdk) {
+      sdk.terminate();
+      setIsConnected(false);
     }
   };
 
   return (
-    <div className="">
-      {metaMaskInstalled ? (
-        <div>
-          {account ? (
-            <p className="text-green-500">
-              Connected: 0x{account.slice(2, 5)}...{account.slice(-3)}
-            </p>
-          ) : (
-            <button
-              onClick={handleConnectWallet}
-              className="bg-gradient-to-r from-blue-500 to-indigo-700 text-white px-4 py-1 rounded-full transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl"
+    <div className="relative">
+      {isConnected ? (
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="link" className="text-white">
+              {formatAddress(account)}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-44">
+            <Button
+              variant="destructive"
+              onClick={disconnect}
+              className="w-full px-4 py-2 text-left hover:bg-muted hover:text-destructive"
             >
-              Connect Wallet
-            </button>
-          )}
-        </div>
+              Disconnect
+            </Button>
+          </PopoverContent>
+        </Popover>
       ) : (
-        <button
-          // Install Metamask extension if not already installed
-          onClick={() =>
-            window.open('https://metamask.io/download.html', '_blank')
-          }
-          className="bg-gradient-to-r from-blue-500 to-indigo-700 text-white px-4 py-1 rounded-full transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl"
+        <Button
+          disabled={connecting}
+          onClick={connect}
+          className="bg-light-purple bg-opacity-75 hover:bg-purple border-0 hover:border-0"
         >
-          Install MetaMask to connect wallet
-        </button>
+          <WalletIcon className="mr-2 h-4 w-4" /> Connect Wallet
+        </Button>
       )}
     </div>
   );
-};
+}
 
-export default MetaMask;
+export default function MetaMaskConnectWrapper() {
+  return (
+    <MetaMaskProvider
+      debug={false}
+      sdkOptions={{
+        dappMetadata: {
+          name: 'My dApp',
+          url: typeof window !== 'undefined' ? window.location.href : '',
+        },
+      }}
+    >
+      <MetaMaskConnect />
+    </MetaMaskProvider>
+  );
+}

components/scripts/Test.tsx

@@ -1,16 +0,0 @@
-'use client';
-import React, { useEffect } from 'react';
-
-const Test = () => {
-  useEffect(() => {
-    console.log('Print some shit');
-  }, []);
-
-  return (
-    <div>
-      <p>Hellao!</p>
-    </div>
-  );
-};
-
-export default Test;

components/ui/flip-words.tsx

@@ -0,0 +1,98 @@
+'use client';
+import React, { useCallback, useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export const FlipWords = ({
+  words,
+  duration = 3000,
+  className,
+}: {
+  words: string[];
+  duration?: number;
+  className?: string;
+}) => {
+  const [currentWord, setCurrentWord] = useState(words[0]);
+  const [isAnimating, setIsAnimating] = useState<boolean>(false);
+
+  // thanks for the fix Julian - https://github.com/Julian-AT
+  const startAnimation = useCallback(() => {
+    const word = words[words.indexOf(currentWord) + 1] || words[0];
+    setCurrentWord(word);
+    setIsAnimating(true);
+  }, [currentWord, words]);
+
+  useEffect(() => {
+    if (!isAnimating)
+      setTimeout(() => {
+        startAnimation();
+      }, duration);
+  }, [isAnimating, duration, startAnimation]);
+
+  return (
+    <AnimatePresence
+      onExitComplete={() => {
+        setIsAnimating(false);
+      }}
+    >
+      <motion.div
+        initial={{
+          opacity: 0,
+          y: 10,
+        }}
+        animate={{
+          opacity: 1,
+          y: 0,
+        }}
+        transition={{
+          type: 'spring',
+          stiffness: 100,
+          damping: 10,
+        }}
+        exit={{
+          opacity: 0,
+          y: -40,
+          x: 40,
+          filter: 'blur(8px)',
+          scale: 2,
+          position: 'absolute',
+        }}
+        className={cn(
+          'z-10 inline-block relative text-left text-neutral-900 dark:text-neutral-100 px-2',
+          className
+        )}
+        key={currentWord}
+      >
+        {/* edit suggested by Sajal: https://x.com/DewanganSajal */}
+        {currentWord.split(' ').map((word, wordIndex) => (
+          <motion.span
+            key={word + wordIndex}
+            initial={{ opacity: 0, y: 10, filter: 'blur(8px)' }}
+            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+            transition={{
+              delay: wordIndex * 0.3,
+              duration: 0.3,
+            }}
+            className="inline-block whitespace-nowrap"
+          >
+            {word.split('').map((letter, letterIndex) => (
+              <motion.span
+                key={word + letterIndex}
+                initial={{ opacity: 0, y: 10, filter: 'blur(8px)' }}
+                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+                transition={{
+                  delay: wordIndex * 0.3 + letterIndex * 0.05,
+                  duration: 0.2,
+                }}
+                className="inline-block"
+              >
+                {letter}
+              </motion.span>
+            ))}
+            <span className="inline-block">&nbsp;</span>
+          </motion.span>
+        ))}
+      </motion.div>
+    </AnimatePresence>
+  );
+};

components/ui/input.tsx

@@ -1,25 +1,22 @@
 import * as React from 'react';
-
 import { cn } from '@/lib/utils';
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
 Input.displayName = 'Input';
 
 export { Input };

components/ui/popover.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

components/ui/toast.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import * as React from 'react';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <Cross2Icon className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold [&+div]:text-xs', className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

components/ui/toaster.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useToast } from '@/hooks/use-toast';
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '@/components/ui/toast';
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}