127 lines
3.6 KiB
TypeScript
127 lines
3.6 KiB
TypeScript
import { Card } from "@/components/ui/card";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Star } from "lucide-react";
|
|
|
|
interface ProductProperty {
|
|
name: string;
|
|
value: string;
|
|
}
|
|
|
|
interface ProductInfoCardProps {
|
|
name: string;
|
|
brandName?: string;
|
|
stock?: number;
|
|
barcode?: string;
|
|
colour?: string;
|
|
properties?: ProductProperty[];
|
|
description?: string;
|
|
averageRating: number;
|
|
reviewsCount: number;
|
|
t: (key: string, params?: any) => string;
|
|
}
|
|
|
|
export function ProductInfoCard({
|
|
name,
|
|
brandName,
|
|
stock,
|
|
barcode,
|
|
colour,
|
|
properties,
|
|
description,
|
|
averageRating,
|
|
reviewsCount,
|
|
t,
|
|
}: ProductInfoCardProps) {
|
|
return (
|
|
<div className="flex-1 space-y-6 bg-white">
|
|
<Card className="p-4 rounded-xl border-gray-200">
|
|
<h3 className="text-xl font-semibold mb-4">{name}</h3>
|
|
<div className="space-y-3">
|
|
{brandName && (
|
|
<>
|
|
<div className="flex justify-between items-center py-2">
|
|
<span className="text-gray-500">{t("brands")}</span>
|
|
<span className="font-medium">{brandName}</span>
|
|
</div>
|
|
<Separator />
|
|
</>
|
|
)}
|
|
|
|
{stock !== undefined && (
|
|
<>
|
|
<div className="flex justify-between items-center py-2">
|
|
<span className="text-gray-500">{t("stock")}</span>
|
|
<span
|
|
className={`font-medium ${
|
|
stock === 0
|
|
? "text-red-500"
|
|
: stock <= 5
|
|
? "text-orange-600"
|
|
: "text-green-600"
|
|
}`}
|
|
>
|
|
{stock === 0
|
|
? t("out_of_stock")
|
|
: stock <= 5
|
|
? `${t("only_left", { count: stock })}`
|
|
: stock}
|
|
</span>
|
|
</div>
|
|
<Separator />
|
|
</>
|
|
)}
|
|
|
|
{barcode && (
|
|
<>
|
|
<div className="flex justify-between items-center py-2">
|
|
<span className="text-gray-500">{t("barcode")}</span>
|
|
<span className="font-mono text-sm">{barcode}</span>
|
|
</div>
|
|
<Separator />
|
|
</>
|
|
)}
|
|
|
|
{colour && (
|
|
<>
|
|
<div className="flex justify-between items-center py-2">
|
|
<span className="text-gray-500">{t("color")}</span>
|
|
<span className="font-medium">{colour}</span>
|
|
</div>
|
|
<Separator />
|
|
</>
|
|
)}
|
|
|
|
{properties && properties.length > 0 && (
|
|
<>
|
|
{properties.map(
|
|
(prop, idx) =>
|
|
prop.value && (
|
|
<div key={idx}>
|
|
<div className="flex justify-between items-center py-2">
|
|
<span className="text-gray-500">{prop.name}</span>
|
|
<span className="font-medium">{prop.value}</span>
|
|
</div>
|
|
{idx < properties.length - 1 && <Separator />}
|
|
</div>
|
|
)
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
{description && (
|
|
<Card className="p-4 rounded-xl border-gray-200 gap-2">
|
|
<h3 className="text-xl font-semibold mb-3">
|
|
{t("product_description")}
|
|
</h3>
|
|
<div
|
|
className="text-gray-700 leading-relaxed prose prose-sm max-w-none"
|
|
dangerouslySetInnerHTML={{ __html: description }}
|
|
/>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|