finished previousTicket component

app/page.tsx

@@ -3,18 +3,16 @@ import React from 'react';
 import EventDescription from '@/components/custom/EventDescription';
 import Home from '../components/Home';
 import EventForm from '@/components/custom/EventForm';
+import PreviousTickets from '@/components/PreviousTickets';
 
 export default function Page() {
   // Define the handleSubmit function
 
-
   return (
     <>
       {/* <Home /> */}
       {/* <EventForm onSubmit={(data) => handleSubmit(data)} /> */}
-      
+      {/* <PreviousTickets/> */}
     </>
   );
 }
-
-

components/PreviousTickets.tsx

@@ -1,11 +1,30 @@
 import React from 'react';
-
-// interface props{
-//     previousTickets: previousTicket[];
-// }
+import { PreviousTicketComponent } from '@/components/custom/previousTicket';
 
 const PreviousTickets = () => {
-  return <div className="flex flex-row">PreviousTicket</div>;
+  return (
+    <div className="flex flex-col space-y-4">
+      <PreviousTicketComponent
+        name="Concert Ticket"
+        status={true}
+        description="This is a previous ticket for a concert event."
+        capacity={500}
+        ticketPrice={50}
+        eventStartDate={new Date('2023-09-15T19:00:00')}
+        eventHost="0x1234567890abcdef1234567890abcdef12345678"
+      />
+      <PreviousTicketComponent
+        name="Festival Ticket"
+        status={false}
+        description="This is a previous ticket for a festival event."
+        capacity={1000}
+        ticketPrice={100}
+        eventStartDate={new Date('2023-07-10T12:00:00')}
+        eventEndDate={new Date('2023-07-12T23:59:00')} // Optional, passed here
+        eventHost="0xabcdef1234567890abcdef1234567890abcdef12"
+      />
+    </div>
+  );
 };
 
 export default PreviousTickets;

components/custom/previousTicket.tsx

@@ -1,19 +1,104 @@
-import React from 'react'
+'use client';
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 
-interface previousTicket{
-
-    name: string,
-    status: boolean,
-    
-    // ticket status
-    // 
-    // optional transfer
+export interface PreviousTicket {
+  name: string;
+  status: boolean;
+  description: string;
+  capacity: number;
+  ticketPrice: number;
+  eventStartDate: Date;
+  eventEndDate?: Date;
+  eventHost: string; // metamask address
 }
 
-const previousTicket = () => {
+const cardVariants = {
+  hidden: { opacity: 0, y: 10 },
+  visible: { opacity: 1, y: 0 },
+};
+
+export const PreviousTicketComponent = ({
+  name,
+  status,
+  description,
+  capacity,
+  ticketPrice,
+  eventStartDate,
+  eventEndDate,
+  eventHost,
+}: PreviousTicket) => {
   return (
-    <div>previousTicket</div>
-  )
-}
-
-export default previousTicket;
+    <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">{name}</CardTitle>
+            <CardDescription className="text-gray-400">
+              Status: {status ? 'Active' : 'Inactive'}
+            </CardDescription>
+          </motion.div>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4 wrap">
+            <motion.div
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.2, duration: 0.4 }}
+            >
+              <p className="text-gray-300 mb-2 whitespace-normal break-words">
+                {description}
+              </p>
+              <p className="text-gray-400">
+                <strong>Capacity:</strong> {capacity}
+              </p>
+              <p className="text-gray-400">
+                <strong>Ticket Price:</strong> ${ticketPrice.toFixed(2)}
+              </p>
+              <p className="text-gray-400">
+                <strong>Event Start:</strong> {eventStartDate.toLocaleString()}
+              </p>
+              {eventEndDate && (
+                <p className="text-gray-400">
+                  <strong>Event End:</strong> {eventEndDate.toLocaleString()}
+                </p>
+              )}
+              <p className="text-gray-400 whitespace-normal break-all">
+                <strong>Host:</strong> {eventHost}
+              </p>
+            </motion.div>
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-end">
+          <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]">
+              View Details
+            </Button>
+          </motion.div>
+        </CardFooter>
+      </Card>
+    </motion.div>
+  );
+};

tailwind.config.ts

@@ -60,6 +60,14 @@ const config: Config = {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
+      typography: {
+        wrap: {
+          '*': {
+            wordBreak: 'break-word',
+            overflowWrap: 'break-word',
+          },
+        },
+      },
     },
   },
   plugins: [require('tailwindcss-animate')],