Arda Samadi
d4316381d5
Sellers fill a size grid (rows = sizes, columns = measurements) in the product create/edit wizard; buyers see it via a راهنمای سایز dialog. - SizeChartSection editor: rows seeded from the product's sizes, columns seeded from category-aware defaults, category-specific quick-add chips (tops→دور سینه/سرشانه/آستین, pants→دور کمر/دور باسن/فاق, shoes→سایز اروپایی, bags→طول/عرض/ارتفاع, …), custom columns, cm/inch toggle, scrollable grid - required-if-the-product-has-sizes gate on publish (with per-size hint); optional otherwise so accessories/one-size and imports aren't blocked - buyer SizeGuideDialog + راهنمای سایز link in the size selector header - SizeChart types on ProductDetail / FullProductCreate / FullProductUpdate Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import { Dialog, DialogContent, DialogOverlay } from "../ui/dialog";
|
||
import type { SizeChart } from "../../../src/api/types";
|
||
|
||
interface SizeGuideDialogProps {
|
||
isOpen: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
sizeChart: SizeChart;
|
||
}
|
||
|
||
const UNIT_LABELS: Record<string, string> = {
|
||
cm: "سانتیمتر",
|
||
inch: "اینچ",
|
||
};
|
||
|
||
export function SizeGuideDialog({
|
||
isOpen,
|
||
onOpenChange,
|
||
sizeChart,
|
||
}: SizeGuideDialogProps) {
|
||
const { columns = [], rows = [], unit = "cm" } = sizeChart;
|
||
const unitLabel = UNIT_LABELS[unit] || unit;
|
||
|
||
return (
|
||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||
<DialogOverlay />
|
||
<DialogContent className="p-4 bg-WHITE rounded-[15px] w-[calc(100%-40px)] max-w-lg max-h-[85vh] overflow-y-auto">
|
||
<div className="flex flex-col gap-3">
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-B18 font-bold">راهنمای سایز</h2>
|
||
<span className="text-R12 text-GRAY">اندازهها به {unitLabel}</span>
|
||
</div>
|
||
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full border-collapse text-center">
|
||
<thead>
|
||
<tr>
|
||
<th className="sticky right-0 z-10 bg-WHITE2 border border-GRAY3 px-3 py-2 text-R12 font-bold text-BLACK2">
|
||
سایز
|
||
</th>
|
||
{columns.map((col, ci) => (
|
||
<th
|
||
key={ci}
|
||
className="border border-GRAY3 bg-WHITE2 px-3 py-2 text-R12 font-bold text-BLACK2 whitespace-nowrap"
|
||
>
|
||
{col}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rows.map((row, ri) => (
|
||
<tr key={ri}>
|
||
<td className="sticky right-0 z-10 bg-WHITE border border-GRAY3 px-3 py-2 text-R12 font-bold">
|
||
{row.label}
|
||
</td>
|
||
{columns.map((_, ci) => (
|
||
<td
|
||
key={ci}
|
||
className="border border-GRAY3 px-3 py-2 text-R12 text-BLACK2"
|
||
dir="ltr"
|
||
>
|
||
{row.values[ci]?.trim() ? row.values[ci] : "—"}
|
||
</td>
|
||
))}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p className="text-R12 text-GRAY leading-6">
|
||
اندازهها ممکن است بسته به روش اندازهگیری کمی متفاوت باشند.
|
||
</p>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|
||
|
||
export default SizeGuideDialog;
|