34 lines
948 B
TypeScript
34 lines
948 B
TypeScript
interface SizeSelectorProps {
|
||
sizes: string[] | undefined;
|
||
selectedSize: string | null;
|
||
setSelectedSize: (size: string) => void;
|
||
}
|
||
|
||
export const SizeSelector = ({
|
||
sizes,
|
||
selectedSize,
|
||
setSelectedSize,
|
||
}: SizeSelectorProps) => (
|
||
<div className="flex flex-col gap-4 mt-10 px-4">
|
||
<p className="text-B18 font-bold">انتخاب سایز</p>
|
||
<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>
|
||
);
|