71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
interface ProductCardProps {
|
|
title: string;
|
|
name: string;
|
|
image: string;
|
|
slug: string;
|
|
status: "full" | "empty" | "withOrder";
|
|
}
|
|
|
|
export default function ProductCard({
|
|
title,
|
|
name,
|
|
image,
|
|
slug,
|
|
status,
|
|
}: ProductCardProps) {
|
|
const statusColor =
|
|
status === "full"
|
|
? "text-green-500"
|
|
: status === "empty"
|
|
? "text-red-600"
|
|
: "text-yellow-800";
|
|
|
|
const statusText =
|
|
status === "full"
|
|
? "Sotuvda mavjud"
|
|
: status === "empty"
|
|
? "Sotuvda qolmagan"
|
|
: "Buyurtma asosida";
|
|
return (
|
|
<Link href={`/products/${slug}`}>
|
|
<article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full ">
|
|
{/* Image Container */}
|
|
<div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden bg-white">
|
|
<Image
|
|
src={image || "/placeholder.svg"}
|
|
alt={title}
|
|
fill
|
|
className="object-contain transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
|
|
{/* Content Container */}
|
|
<div className="p-6 sm:p-4">
|
|
{/* Title */}
|
|
<h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
|
|
{title}
|
|
</h3>
|
|
|
|
{/* Meta Information */}
|
|
<div className="flex flex-col items-start gap-0 text-gray-400 text-sm sm:text-base mb-6">
|
|
<span className="font-medium">{name}</span>
|
|
<span className={`font-medium ${statusColor}`}>{statusText}</span>
|
|
</div>
|
|
|
|
{/* Read More Link */}
|
|
<span className="inline-flex items-center gap-2 text-red-600 font-bold text-base sm:text-lg uppercase tracking-wide hover:gap-4 transition-all duration-300 group/link">
|
|
Read More
|
|
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover/link:translate-x-1" />
|
|
</span>
|
|
</div>
|
|
</article>
|
|
</Link>
|
|
);
|
|
}
|