hamid zarghami
29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
import { ColorSwatch, Element4, LampCharge, Magicpen, Setting2, TruckFast } from "iconsax-reactjs";
|
|
import { FC } from "react";
|
|
|
|
const steps = [
|
|
{ label: "تحلیل نیاز برند", Icon: LampCharge },
|
|
{ label: "طراحی و آمادهسازی فایل", Icon: Magicpen },
|
|
{ label: "انتخاب فناوری و متریال", Icon: Element4 },
|
|
{ label: "کنترل رنگ و نمونهگیری", Icon: ColorSwatch },
|
|
{ label: "عملیات تکمیلی", Icon: Setting2 },
|
|
{ label: "تحویل به موقع", Icon: TruckFast },
|
|
];
|
|
|
|
const StepSection: FC = () => {
|
|
return (
|
|
<div className="w-full px-4 sm:px-8 lg:px-[120px] bg-secondary">
|
|
<div className="flex gap-6 lg:gap-4 lg:justify-between items-center h-auto py-4 lg:py-0 lg:h-[80px] overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
|
|
{steps.map(({ label, Icon }) => (
|
|
<div key={label} className="flex gap-3 items-center shrink-0">
|
|
<Icon variant="Bulk" size={24} color="currentColor" className="text-primary" />
|
|
<div className="font-bold text-sm whitespace-nowrap">{label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StepSection;
|