Merge branch 'main' into Adwit-Ticket-Listings

components/custom/BuyTicket.tsx

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

components/custom/EventDescription.tsx

@@ -0,0 +1,62 @@
+'use client';
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+} from '@/components/ui/card';
+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';
+
+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">
+        <h1 className="text-3xl font-semibold text-gray-800">TicketTitle</h1>
+        <Badge
+          variant="outline"
+          className="text-blue-600 bg-blue-100 px-3 py-1 rounded-full"
+        >
+          Price: $99
+        </Badge>
+      </CardHeader>
+
+      <CardContent className="flex flex-col md:flex-row items-start space-y-8 md:space-y-0 md:space-x-10">
+        <div className="md:w-1/2 flex justify-center">
+          <ImageCarousel />
+        </div>
+        <div className="md:w-1/2 text-gray-700">
+          <Separator className="my-4" />
+          <p className="leading-relaxed">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
+            ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum
+            dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua.
+          </p>
+          <Separator className="my-4" />
+        </div>
+      </CardContent>
+
+      <CardFooter className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
+        <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"
+        >
+          Buy now Using MetaMask
+        </Button>
+        <div className="relative md:left-5">
+          <TicketButton />
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default EventDescription;

components/custom/ImageCarousel.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@/components/ui/carousel';
+
+export default function ImageCarousel() {
+  return (
+    <Carousel className="w-full max-w-xs">
+      <CarouselContent>
+        {/* map your images here from the page */}
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  );
+}

components/custom/TicketButton.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Button } from '../ui/button'; // Adjust import path to where your shadcn Button component is located
+
+interface NumberPickerProps {
+  initialCount?: number;
+  min?: number;
+  max?: number;
+  onChange?: (count: number) => void;
+}
+
+const NumberPicker: React.FC<NumberPickerProps> = ({
+  initialCount = 1,
+  min = 1,
+  max = 10,
+  onChange,
+}) => {
+  const [count, setCount] = useState<number>(initialCount);
+
+  const increment = () => {
+    if (count < max) {
+      const newCount = count + 1;
+      setCount(newCount);
+      onChange && onChange(newCount);
+    }
+  };
+
+  const decrement = () => {
+    if (count > min) {
+      const newCount = count - 1;
+      setCount(newCount);
+      onChange && onChange(newCount);
+    }
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Button variant="outline" onClick={decrement} disabled={count === min}>
+        -
+      </Button>
+      <span className="text-center w-8">{count}</span>
+      <Button variant="outline" onClick={increment} disabled={count === max}>
+        +
+      </Button>
+    </div>
+  );
+};
+
+export default NumberPicker;

components/custom/header.tsx

@@ -1,6 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import Link from 'next/link';
+import MetaMask from '../scripts/MetaMask';
 
 const Header = () => {
   const [mouseX, setMouseX] = useState(-1);
@@ -59,9 +60,7 @@ const Header = () => {
               </Link>
             </li>
             <li>
-              <button 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">
-                Login
-              </button>
+              <MetaMask />
             </li>
           </ul>
         </nav>