mirror of
https://github.com/0xShay/ticketchain.git
synced 2026-01-11 13:13:25 +00:00
Ashprit Singh Mehra
30
components/PreviousTickets.tsx
Normal file
30
components/PreviousTickets.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import { PreviousTicketComponent } from '@/components/custom/previousTicket';
|
||||
|
||||
const PreviousTickets = () => {
|
||||
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;
|
||||
0
components/TicketListings.tsx
Normal file
0
components/TicketListings.tsx
Normal file
223
components/custom/EventForm.tsx
Normal file
223
components/custom/EventForm.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
'use client';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
// Define the schema using Zod
|
||||
const eventSchema = z
|
||||
.object({
|
||||
name: z.string().min(1, { message: 'Event name is required' }),
|
||||
description: z.string().min(1, { message: 'Description is required' }),
|
||||
capacity: z
|
||||
.number({ invalid_type_error: 'Capacity must be a number' })
|
||||
.min(1, { message: 'Capacity must be at least 1' })
|
||||
.refine(Number.isInteger, { message: 'Capacity must be an integer' }),
|
||||
ticketPrice: z
|
||||
.number({ invalid_type_error: 'Ticket price must be a number' })
|
||||
.min(0, { message: 'Ticket price must be at least 0' })
|
||||
.refine(Number.isInteger, { message: 'Ticket price must be in cents' }),
|
||||
location: z.string().min(1, { message: 'Location is required' }),
|
||||
eventStartTime: z.preprocess(
|
||||
(val) =>
|
||||
typeof val === 'string' && val !== '' ? new Date(val) : undefined,
|
||||
z
|
||||
.date({ required_error: 'Event start time is required' })
|
||||
.min(new Date(), { message: 'Event start time must be in the future' })
|
||||
),
|
||||
eventEndTime: z.preprocess(
|
||||
(val) =>
|
||||
typeof val === 'string' && val !== '' ? new Date(val) : undefined,
|
||||
z.date().optional()
|
||||
),
|
||||
images: z.preprocess(
|
||||
(val) => {
|
||||
if (Array.isArray(val)) {
|
||||
// Filter out empty strings
|
||||
return val.filter((v) => v !== '');
|
||||
}
|
||||
return [];
|
||||
},
|
||||
z
|
||||
.array(z.string().url({ message: 'Invalid image URL format' }))
|
||||
.optional()
|
||||
),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (data.eventEndTime && data.eventEndTime <= data.eventStartTime) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Event end time must be after the start time',
|
||||
path: ['eventEndTime'],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Define the TypeScript type based on the Zod schema
|
||||
type EventFormData = z.infer<typeof eventSchema>;
|
||||
|
||||
interface EventFormProps {
|
||||
onSubmit: (data: EventFormData) => void;
|
||||
}
|
||||
|
||||
const EventForm = ({ onSubmit }: EventFormProps) => {
|
||||
const [imageFields, setImageFields] = useState<string[]>(['']);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
watch,
|
||||
} = useForm<EventFormData>({
|
||||
resolver: zodResolver(eventSchema),
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
images: [''],
|
||||
},
|
||||
});
|
||||
|
||||
const images = watch('images') || [];
|
||||
|
||||
const handleAddImageField = () => {
|
||||
setImageFields((prev) => [...prev, '']);
|
||||
};
|
||||
|
||||
const handleRemoveImageField = (index: number) => {
|
||||
const updatedImages = [...imageFields];
|
||||
updatedImages.splice(index, 1);
|
||||
setImageFields(updatedImages);
|
||||
// Also update the form values
|
||||
setValue('images', updatedImages);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
{/* Name Field */}
|
||||
<div>
|
||||
<Label htmlFor="name">Event Name</Label>
|
||||
<Input id="name" {...register('name')} />
|
||||
{errors.name && <p className="text-red-500">{errors.name.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Description Field */}
|
||||
<div>
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea id="description" {...register('description')} />
|
||||
{errors.description && (
|
||||
<p className="text-red-500">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Capacity Field */}
|
||||
<div>
|
||||
<Label htmlFor="capacity">Capacity</Label>
|
||||
<Input
|
||||
type="number"
|
||||
id="capacity"
|
||||
{...register('capacity', { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.capacity && (
|
||||
<p className="text-red-500">{errors.capacity.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Ticket Price Field */}
|
||||
<div>
|
||||
<Label htmlFor="ticketPrice">Ticket Price (in USD cents)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
id="ticketPrice"
|
||||
{...register('ticketPrice', { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.ticketPrice && (
|
||||
<p className="text-red-500">{errors.ticketPrice.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Location Field */}
|
||||
<div>
|
||||
<Label htmlFor="description">Location</Label>
|
||||
<Textarea id="description" {...register('location')} />
|
||||
{errors.description && (
|
||||
<p className="text-red-500">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Event Start Time Field */}
|
||||
<div>
|
||||
<Label htmlFor="eventStartTime">Event Start Date & Time</Label>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
id="eventStartTime"
|
||||
{...register('eventStartTime')}
|
||||
/>
|
||||
{errors.eventStartTime && (
|
||||
<p className="text-red-500">{errors.eventStartTime.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Event End Time Field */}
|
||||
<div>
|
||||
<Label htmlFor="eventEndTime">Event End Date & Time (Optional)</Label>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
id="eventEndTime"
|
||||
{...register('eventEndTime')}
|
||||
/>
|
||||
{errors.eventEndTime && (
|
||||
<p className="text-red-500">{errors.eventEndTime.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Images Field */}
|
||||
<div>
|
||||
<Label>Event Images (Optional)</Label>
|
||||
{imageFields.map((_, index) => (
|
||||
<div key={index} className="flex items-center space-x-2 mt-2">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Enter image URL"
|
||||
{...register(`images.${index}`)}
|
||||
/>
|
||||
{imageFields.length > 1 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={() => handleRemoveImageField(index)}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button type="button" onClick={handleAddImageField}>
|
||||
Add URL
|
||||
</Button>
|
||||
{/* Display individual image URL errors */}
|
||||
{errors.images &&
|
||||
Array.isArray(errors.images) &&
|
||||
errors.images.map((imgError, index) => {
|
||||
if (imgError) {
|
||||
const message = imgError.message || 'Invalid image URL';
|
||||
return (
|
||||
<p key={index} className="text-red-500">
|
||||
Image {index + 1}: {message}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button type="submit">Create Event</Button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventForm;
|
||||
104
components/custom/previousTicket.tsx
Normal file
104
components/custom/previousTicket.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
'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';
|
||||
|
||||
export interface PreviousTicket {
|
||||
name: string;
|
||||
status: boolean;
|
||||
description: string;
|
||||
capacity: number;
|
||||
ticketPrice: number;
|
||||
eventStartDate: Date;
|
||||
eventEndDate?: Date;
|
||||
eventHost: string; // metamask address
|
||||
}
|
||||
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
24
components/ui/textarea.tsx
Normal file
24
components/ui/textarea.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface TextareaProps
|
||||
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||
|
||||
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
({ className, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm 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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Textarea.displayName = 'Textarea';
|
||||
|
||||
export { Textarea };
|
||||
Reference in New Issue
Block a user