hamid zarghami
65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
import { FC, Fragment } from 'react'
|
||
import { Separator } from '@/components/ui/separator'
|
||
|
||
type SpecItem = {
|
||
label: string
|
||
value: string | string[]
|
||
}
|
||
|
||
const SPEC_ITEMS: SpecItem[] = [
|
||
{ label: 'ابعاد', value: 'میلیمتر 163.3×79×8.6' },
|
||
{ label: 'وزن', value: '233 گرم' },
|
||
{ label: 'توضیحات سیم کارت', value: 'سایز نانو (12.3 × 8.8 میلیمتر)' },
|
||
{
|
||
label: 'ویژگیهای خاص',
|
||
value: [
|
||
'مجهز به حسگر اثرانگشت',
|
||
'مقاوم در برابر آب',
|
||
'مناسب بازی',
|
||
'مناسب عکاسی',
|
||
'مناسب عکاسی سلفی',
|
||
],
|
||
},
|
||
{ label: 'تعداد سیم کارت', value: 'دو عدد' },
|
||
]
|
||
|
||
const Specifications: FC = () => {
|
||
return (
|
||
<div className="mt-16 w-full">
|
||
<div className="flex items-center justify-end gap-3 flex-row-reverse">
|
||
<h2 className="text-primary text-lg">مشخصات</h2>
|
||
<div className="w-1 h-6 bg-primary rounded"></div>
|
||
</div>
|
||
|
||
<div className="mt-6 rounded-xl bg-white">
|
||
{SPEC_ITEMS.map((item, index) => (
|
||
<Fragment key={item.label}>
|
||
<div className="grid grid-cols-12 items-start px-6 py-5">
|
||
<div className="col-span-12 md:col-span-3 flex items-center justify-end gap-2 text-[#7F7F7F] flex-row-reverse">
|
||
<span className="text-sm">{item.label}</span>
|
||
<span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
|
||
</div>
|
||
<div className="col-span-12 md:col-span-9">
|
||
{Array.isArray(item.value) ? (
|
||
<div className="flex flex-col gap-3 text-sm text-[#333333] text-center md:text-center">
|
||
{item.value.map((v) => (
|
||
<div key={v}>{v}</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="text-sm text-[#333333] text-center md:text-center">{item.value}</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{index !== SPEC_ITEMS.length - 1 && <Separator />}
|
||
</Fragment>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Specifications
|
||
|
||
|