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>
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { Ruler } from "lucide-react";
|
||
|
||
interface SizeSelectorProps {
|
||
sizes: string[] | undefined;
|
||
selectedSize: string | null;
|
||
setSelectedSize: (size: string) => void;
|
||
/** When provided, shows a "راهنمای سایز" link that opens the size guide. */
|
||
onSizeGuide?: () => void;
|
||
}
|
||
|
||
export const SizeSelector = ({
|
||
sizes,
|
||
selectedSize,
|
||
setSelectedSize,
|
||
onSizeGuide,
|
||
}: SizeSelectorProps) => (
|
||
<div className="flex flex-col gap-4 mt-10 px-4">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-B18 font-bold">انتخاب سایز</p>
|
||
{onSizeGuide && (
|
||
<button
|
||
type="button"
|
||
onClick={onSizeGuide}
|
||
className="flex items-center gap-1 text-R12 text-VITROWN_BLUE hover:underline cursor-pointer"
|
||
>
|
||
<Ruler className="h-3.5 w-3.5" />
|
||
راهنمای سایز
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="gap-4 flex">
|
||
{sizes?.map((size: string, index: number) => (
|
||
<div
|
||
key={index}
|
||
className={`w-10 h-10 rounded-md flex border border-BLACK border-inner-border items-center justify-center ${
|
||
selectedSize === size
|
||
? "bg-BLACK text-WHITE"
|
||
: "bg-WHITE text-BLACK"
|
||
}`}
|
||
onClick={() => setSelectedSize(size)}
|
||
onKeyDown={() => {}}
|
||
role="button"
|
||
tabIndex={0}
|
||
>
|
||
<p className="text-R12">{size}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|