Merge branch 'main' of https://github.com/Ayush272002/ticketchain into aesthetic-glitch-fixes

components/custom/EventDescription.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -13,7 +13,7 @@ import { buyHandler } from '@/lib/buyHandler';
 import { useToast } from '@/hooks/use-toast';
 import NumberPicker from './TicketButton';
 
-interface EventDescriptionProps {
+export interface EventDescriptionProps {
   eventDetails: {
     EventID: number;
     name: string;
@@ -32,8 +32,10 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
   eventDetails,
 }) => {
   const { toast } = useToast();
+  const [numTickets, setNumTickets] = useState(1);
+
   const handleBuyNow = () => {
-    buyHandler(eventDetails.EventID, toast);
+    buyHandler(eventDetails.EventID, numTickets, toast);
   };
 
   return (
@@ -79,7 +81,10 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
         </Button>
         <div className="relative md:left-5">
           <NumberPicker
+            initialCount={numTickets}
+            min={1}
             max={eventDetails.capacity - eventDetails.ticketsSold}
+            onChange={setNumTickets}
           />
         </div>
       </CardFooter>

components/custom/EventForm.tsx

@@ -58,7 +58,7 @@ const eventSchema = z
   });
 
 // Define the TypeScript type based on the Zod schema
-type EventFormData = z.infer<typeof eventSchema>;
+export type EventFormData = z.infer<typeof eventSchema>;
 
 interface EventFormProps {
   onSubmit: (data: EventFormData) => void;

components/custom/Profile.tsx

@@ -0,0 +1,93 @@
+'use client';
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { motion } from 'framer-motion';
+
+// Dark theme and animation setup
+const cardVariants = {
+  hidden: { opacity: 0, y: 10 },
+  visible: { opacity: 1, y: 0 },
+};
+
+const Profile = () => {
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={cardVariants}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
+    >
+      <Card className="w-[350px] bg-[#1e2a3a] text-white shadow-lg">
+        <CardHeader>
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1, duration: 0.5 }}
+          >
+            <CardTitle className="text-lg font-semibold">Profile</CardTitle>
+          </motion.div>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="grid w-full items-center gap-4">
+              <motion.div
+                className="flex flex-col space-y-1.5"
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.2, duration: 0.4 }}
+              >
+                <Label htmlFor="name" className="text-gray-300">
+                  Name
+                </Label>
+                <Input
+                  id="name"
+                  placeholder="Name"
+                  className="bg-[#2b3a4a] text-white placeholder-gray-400"
+                />
+              </motion.div>
+              <motion.div
+                className="flex flex-col space-y-1.5"
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.3, duration: 0.4 }}
+              >
+                <Label htmlFor="framework" className="text-gray-300">
+                  MetaMask Public Key
+                </Label>
+                <Input
+                  id="name"
+                  placeholder="Key"
+                  className="bg-[#2b3a4a] text-white placeholder-gray-400"
+                />
+              </motion.div>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4, duration: 0.4 }}
+          >
+            <Button className="bg-[#365b85] text-white hover:bg-[#2b4a70]">
+              Save
+            </Button>
+          </motion.div>
+        </CardFooter>
+      </Card>
+    </motion.div>
+  );
+};
+export default Profile;
+// return <EventDescription/>
+// return <ConfirmationTicket ticketTitle='taylor swift' ticketID='2' eventDate='27th september'/>;
+// return <Profile/>;

components/custom/TicketButton.tsx

@@ -1,6 +1,5 @@
-'use client';
-import React, { useState } from 'react';
-import { Button } from '../ui/button'; // Adjust import path to where your shadcn Button component is located
+import React from 'react';
+import { Button } from '../ui/button';
 
 interface NumberPickerProps {
   initialCount?: number;
@@ -15,25 +14,23 @@ const NumberPicker: React.FC<NumberPickerProps> = ({
   max = 10,
   onChange,
 }) => {
-  const [count, setCount] = useState<number>(initialCount);
+  const [count, setCount] = React.useState(initialCount);
+
+  React.useEffect(() => {
+    if (onChange) {
+      onChange(count);
+    }
+  }, [count, onChange]);
 
   const increment = () => {
     if (count < max) {
-      const newCount = count + 1;
-      setCount(newCount);
-      if (onChange) {
-        onChange(newCount);
-      }
+      setCount(count + 1);
     }
   };
 
   const decrement = () => {
     if (count > min) {
-      const newCount = count - 1;
-      setCount(newCount);
-      if (onChange) {
-        onChange(newCount);
-      }
+      setCount(count - 1);
     }
   };
 

components/custom/header.tsx

@@ -65,6 +65,16 @@ const Header = () => {
                 </a>
               </Link>
             </li>
+            <li>
+              <Link href="/host" legacyBehavior>
+                <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)' }}
+                >
+                  Host Event
+                </a>
+              </Link>
+            </li>
             <li>
               <Link href="/contact" legacyBehavior>
                 <a