hamid zarghami
74 lines
3.1 KiB
TypeScript
74 lines
3.1 KiB
TypeScript
"use client";
|
||
|
||
import { cn } from "@/app/lib/cn";
|
||
import productImage from "@/assets/images/product_image.png";
|
||
import Image from "next/image";
|
||
import { useState, type FC } from "react";
|
||
import { PRODUCT_DESCRIPTION_CONTENT, PRODUCT_TABS, type ProductTabId } from "../constants";
|
||
|
||
const ProductTabs: FC = () => {
|
||
const [activeTab, setActiveTab] = useState<ProductTabId>("description");
|
||
|
||
return (
|
||
<section className="mt-8 sm:mt-10">
|
||
<div className="px-4 sm:px-8 lg:px-30">
|
||
<div className="overflow-x-auto border-b border-[#E9EEF2]">
|
||
<div className="flex min-w-max items-end justify-start gap-6 sm:gap-8 lg:gap-10">
|
||
{PRODUCT_TABS.map((tab) => {
|
||
const isActive = activeTab === tab.id;
|
||
|
||
return (
|
||
<button key={tab.id} type="button" onClick={() => setActiveTab(tab.id)} className="relative shrink-0">
|
||
<span className={cn("block pb-3 text-sm leading-5 transition-colors", isActive ? "font-bold text-[#0A1B2C]" : "font-normal text-[#3F4D5A]")}>{tab.label}</span>
|
||
{isActive && <span className="absolute bottom-0 left-1/2 h-0.75 w-[72%] -translate-x-1/2 rounded-full bg-primary" />}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6 rounded-2xl bg-[#F7FAFC] p-5 sm:mt-8 sm:p-6 lg:p-8">
|
||
{activeTab === "description" && <DescriptionPanel />}
|
||
{activeTab !== "description" && <p className="py-6 text-center text-xs text-[#53606B] sm:text-sm">محتوای این بخش بهزودی اضافه میشود.</p>}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
const DescriptionPanel: FC = () => {
|
||
const { title, bullets, sections } = PRODUCT_DESCRIPTION_CONTENT;
|
||
|
||
return (
|
||
<div className="flex flex-col items-center gap-6 lg:flex-row lg:items-center lg:gap-12" dir="ltr">
|
||
<div className="mx-auto w-full max-w-85 shrink-0 rounded-2xl bg-white p-3 shadow-[0_4px_20px_rgba(0,0,0,0.08)] sm:max-w-90 lg:max-w-100 lg:p-4">
|
||
<div className="relative aspect-square w-full overflow-hidden rounded-xl">
|
||
<Image src={productImage} alt="" fill className="object-cover" sizes="(max-width: 1024px) 80vw, 400px" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="min-w-0 flex-1 space-y-4 text-right" dir="rtl">
|
||
<h2 className="text-sm font-bold leading-6 text-[#0A1B2C] sm:text-base sm:leading-7">{title}</h2>
|
||
|
||
<ul className="space-y-1.5 text-xs leading-6 text-[#0A1B2C] sm:text-sm sm:leading-7">
|
||
{bullets.map((item) => (
|
||
<li key={item} className="flex items-start gap-2">
|
||
<span className="mt-2 size-1 shrink-0 rounded-full bg-[#0A1B2C]" />
|
||
<span>{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
{sections.map((section) => (
|
||
<div key={section.title} className="space-y-1.5">
|
||
<h3 className="text-xs font-bold leading-6 text-[#0A1B2C] sm:text-sm sm:leading-7">{section.title}</h3>
|
||
<p className="text-xs leading-6 text-[#0A1B2C] sm:text-sm sm:leading-7">{section.body}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ProductTabs;
|