106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { MapPin, Calendar, ArrowRight } from 'lucide-react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
interface EventCardProps {
|
|
id: string;
|
|
title: string;
|
|
image: string;
|
|
date: string;
|
|
location: string;
|
|
price: string;
|
|
organizer: string;
|
|
status?: string;
|
|
isAvailable?: boolean;
|
|
}
|
|
|
|
export default function EventCard({
|
|
id,
|
|
title,
|
|
image,
|
|
date,
|
|
location,
|
|
price,
|
|
organizer,
|
|
status = "ON SALE",
|
|
isAvailable = true,
|
|
}: EventCardProps) {
|
|
return (
|
|
<div className="group flex flex-col bg-white brutal-card h-full">
|
|
|
|
{/* Image Container */}
|
|
<div className="relative h-56 overflow-hidden brutal-border m-2 border-b-4">
|
|
<div className="absolute inset-0 bg-brutal-yellow animate-pulse" />
|
|
<img
|
|
src={image}
|
|
alt={title}
|
|
className={`absolute inset-0 w-full h-full object-cover grayscale contrast-125 transition-transform duration-500 group-hover:scale-110 group-hover:grayscale-0 ${!isAvailable ? 'opacity-70' : ''}`}
|
|
loading="lazy"
|
|
/>
|
|
|
|
{/* Status Badge */}
|
|
<div className="absolute top-4 left-4 z-10">
|
|
<span className={`px-4 py-2 text-sm font-black uppercase brutal-border ${
|
|
isAvailable
|
|
? 'bg-brutal-pink text-black brutal-shadow-sm'
|
|
: 'bg-white text-black brutal-shadow-sm'
|
|
}`}>
|
|
{status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Container */}
|
|
<div className="flex flex-col flex-1 p-5 sm:p-6">
|
|
<h3 className="font-display text-2xl font-black text-black mb-4 line-clamp-2 leading-tight uppercase group-hover:text-brutal-pink transition-colors">
|
|
{title}
|
|
</h3>
|
|
|
|
<div className="space-y-3 mb-6 mt-auto">
|
|
<div className="flex items-center gap-3 text-black font-bold text-sm uppercase">
|
|
<MapPin className="w-5 h-5 shrink-0 stroke-[3]" />
|
|
<span className="truncate">{location}</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-black font-bold text-sm uppercase">
|
|
<Calendar className="w-5 h-5 shrink-0 stroke-[3]" />
|
|
<span>{date}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Area */}
|
|
<div className="pt-4 mt-auto border-t-4 border-black flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-black text-black mb-1 uppercase">START FROM</p>
|
|
{isAvailable ? (
|
|
<p className="font-display font-black text-xl text-black">
|
|
{price}
|
|
</p>
|
|
) : (
|
|
<p className="text-sm font-bold text-gray-500 uppercase">
|
|
Habis
|
|
</p>
|
|
)}
|
|
<p className="text-xs font-bold text-black mt-1 uppercase">BY: {organizer}</p>
|
|
</div>
|
|
|
|
{isAvailable ? (
|
|
<Link
|
|
to={`/event/${id}`}
|
|
className="flex items-center gap-2 px-5 py-3 text-sm uppercase bg-brutal-blue brutal-btn"
|
|
>
|
|
BELI TIKET
|
|
<ArrowRight className="w-5 h-5 stroke-[3]" />
|
|
</Link>
|
|
) : (
|
|
<button
|
|
className="flex items-center gap-2 px-5 py-3 text-sm uppercase bg-gray-200 border-4 border-black font-bold text-gray-500 cursor-not-allowed"
|
|
>
|
|
CLOSE
|
|
<ArrowRight className="w-5 h-5 stroke-[3]" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|