441 lines
11 KiB
TypeScript
441 lines
11 KiB
TypeScript
import { ChevronRight } from "lucide-react";
|
|
import { Fragment } from "react/jsx-runtime";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type FooterLink = {
|
|
text: string;
|
|
link?: string;
|
|
};
|
|
|
|
type SocialIcon = {
|
|
title: string;
|
|
light: string;
|
|
dark: string;
|
|
};
|
|
|
|
type SocialLink = {
|
|
link: string;
|
|
icon: SocialIcon;
|
|
};
|
|
|
|
type HomeLink = {
|
|
logo: {
|
|
light: string;
|
|
dark?: string;
|
|
};
|
|
link: string;
|
|
alt?: string;
|
|
};
|
|
|
|
type StoreLink = {
|
|
name: string;
|
|
link: string;
|
|
address?: string;
|
|
};
|
|
|
|
type FooterLinksSection = {
|
|
title: string;
|
|
items: FooterLink[];
|
|
};
|
|
|
|
type AppSection = {
|
|
title?: string;
|
|
description?: string;
|
|
links?: {
|
|
link: string;
|
|
badge: string;
|
|
alt?: string;
|
|
}[];
|
|
};
|
|
|
|
interface FooterHomeSectionProps {
|
|
home: HomeLink;
|
|
description?: string;
|
|
socialMediaLinks?: SocialLink[];
|
|
}
|
|
|
|
type AppPromoSectionProps = AppSection;
|
|
|
|
interface EcommerceFooter9Props {
|
|
className?: string;
|
|
stores?: StoreLink[];
|
|
home: HomeLink;
|
|
description?: string;
|
|
socialMediaLinks?: SocialLink[];
|
|
links?: FooterLinksSection[];
|
|
app?: AppSection;
|
|
paymentMethods: string[];
|
|
}
|
|
|
|
const FOOTER_DATA = {
|
|
stores: [
|
|
{
|
|
name: "شعبه پرچمدار تهران",
|
|
link: "#",
|
|
address: "میدان ونک، خیابان ملاصدرا، تهران",
|
|
},
|
|
{
|
|
name: "شعبه اصفهان",
|
|
link: "#",
|
|
address: "خیابان چهارباغ عباسی، اصفهان",
|
|
},
|
|
{
|
|
name: "شعبه شیراز",
|
|
link: "#",
|
|
address: "خیابان زند، شیراز",
|
|
},
|
|
{
|
|
name: "شعبه مشهد",
|
|
link: "#",
|
|
address: "بلوار سجاد، مشهد",
|
|
},
|
|
],
|
|
home: {
|
|
logo: {
|
|
light:
|
|
"/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
|
|
dark: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark-white.svg",
|
|
},
|
|
alt: "لوگو",
|
|
link: "#",
|
|
},
|
|
description:
|
|
"محصولاتی با طراحی دقیق برای ارتقای زندگی روزمره. مواد باکیفیت، استایل ماندگار و راحتی بی‌دردسر.",
|
|
links: [
|
|
{
|
|
title: "مجموعه‌ها",
|
|
items: [
|
|
{
|
|
text: "تازه‌ها",
|
|
link: "#",
|
|
},
|
|
{
|
|
text: "پرفروش‌ترین‌ها",
|
|
link: "#",
|
|
},
|
|
{
|
|
text: "پیشنهادهای فصلی",
|
|
link: "#",
|
|
},
|
|
{
|
|
text: "محصولات ضروری",
|
|
link: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "راهنما",
|
|
items: [
|
|
{
|
|
text: "تماس با ما",
|
|
link: "#",
|
|
},
|
|
{
|
|
text: "سؤالات متداول",
|
|
link: "#",
|
|
},
|
|
{
|
|
text: "ارسال و پیگیری",
|
|
link: "#",
|
|
},
|
|
{
|
|
text: "مرجوعی و تعویض",
|
|
link: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "اطلاعات",
|
|
items: [
|
|
{
|
|
text: "شرایط و ضوابط",
|
|
link: "#",
|
|
},
|
|
{
|
|
text: "حریم خصوصی",
|
|
link: "#",
|
|
},
|
|
{
|
|
text: "سیاست ضمانت",
|
|
link: "#",
|
|
},
|
|
{
|
|
text: "شرایط استفاده",
|
|
link: "#",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
paymentMethods: [
|
|
"/block-media/shadcnblocks/block/ecommerce/payment-methods/amazonpay.svg",
|
|
"/block-media/shadcnblocks/block/ecommerce/payment-methods/applepay.svg",
|
|
"/block-media/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg",
|
|
"/block-media/shadcnblocks/block/ecommerce/payment-methods/paypal.svg",
|
|
"/block-media/shadcnblocks/block/ecommerce/payment-methods/visa.svg",
|
|
"/block-media/shadcnblocks/block/ecommerce/payment-methods/discover.svg",
|
|
],
|
|
app: {
|
|
title: "خرید در هر مکان",
|
|
description:
|
|
"اپلیکیشن ما را دانلود کنید تا از پیشنهادهای ویژه، دسترسی زودهنگام به محصولات جدید و پرداخت آسان بهره‌مند شوید.",
|
|
links: [
|
|
{
|
|
link: "#",
|
|
badge:
|
|
"/block-media/shadcnblocks/block/badges/googleplay.svg",
|
|
alt: "گوگل پلی",
|
|
},
|
|
{
|
|
link: "#",
|
|
badge:
|
|
"/block-media/shadcnblocks/block/badges/appstore.svg",
|
|
alt: "اپ استور",
|
|
},
|
|
],
|
|
},
|
|
socialMediaLinks: (() => {
|
|
const SOCIAL_ICONS = {
|
|
facebook: {
|
|
title: "Facebook",
|
|
light:
|
|
"/block-media/shadcnblocks/block/logos/facebook-icon.svg",
|
|
dark: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
|
|
},
|
|
x: {
|
|
title: "X",
|
|
light:
|
|
"/block-media/shadcnblocks/block/logos/x.svg",
|
|
dark: "/block-media/shadcnblocks/block/logos/x.svg",
|
|
},
|
|
instagram: {
|
|
title: "Instagram",
|
|
light:
|
|
"/block-media/shadcnblocks/block/logos/instagram-icon.svg",
|
|
dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
|
|
},
|
|
} as const;
|
|
return [
|
|
{ icon: SOCIAL_ICONS.facebook, link: "#" },
|
|
{ icon: SOCIAL_ICONS.x, link: "#" },
|
|
{ icon: SOCIAL_ICONS.instagram, link: "#" },
|
|
];
|
|
})(),
|
|
};
|
|
|
|
const EcommerceFooter9 = ({
|
|
className,
|
|
stores = FOOTER_DATA.stores,
|
|
home = FOOTER_DATA.home,
|
|
description = FOOTER_DATA.description,
|
|
socialMediaLinks = FOOTER_DATA.socialMediaLinks,
|
|
links = FOOTER_DATA.links,
|
|
app = FOOTER_DATA.app,
|
|
paymentMethods = FOOTER_DATA.paymentMethods,
|
|
}: EcommerceFooter9Props) => {
|
|
return (
|
|
<footer dir="rtl" lang="fa" className={cn("py-10", className)}>
|
|
<div className="container">
|
|
<div className="py-10">
|
|
<FooterStoresLinks links={stores} />
|
|
</div>
|
|
<Separator />
|
|
<div className="py-10">
|
|
<div className="grid grid-cols-1 gap-7.5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-7">
|
|
<div className="sm:col-span-2">
|
|
<FooterHomeSection
|
|
home={home}
|
|
description={description}
|
|
socialMediaLinks={socialMediaLinks}
|
|
/>
|
|
</div>
|
|
<FooterLinksSection links={links} />
|
|
<div className="lg:col-span-2">
|
|
<AppPromoSection
|
|
title={app.title}
|
|
description={app.description}
|
|
links={app.links}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex flex-col items-center justify-between gap-5 py-5 md:flex-row">
|
|
<p className="text-xs text-muted-foreground">
|
|
© ۲۲۶ ساخته‌شده با ❤️ توسط <b>ری یو آی</b>
|
|
</p>
|
|
<PaymentMethods cards={paymentMethods} />
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
const FooterHomeSection = ({
|
|
home,
|
|
description,
|
|
socialMediaLinks,
|
|
}: FooterHomeSectionProps) => {
|
|
return (
|
|
<div className="space-y-5">
|
|
<HomeLink home={home} />
|
|
{description && (
|
|
<p className="text-sm leading-relaxed text-balance text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
)}
|
|
<div className="space-y-2.5">
|
|
<div className="text-xl leading-relaxed font-semibold">ما را دنبال کنید</div>
|
|
<SocialMediaSection links={socialMediaLinks} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FooterStoresLinks = ({ links }: { links: StoreLink[] }) => {
|
|
if (!links) return;
|
|
|
|
return (
|
|
<ul className="grid grid-cols-1 gap-7.5 md:grid-cols-2 lg:grid-cols-4">
|
|
{links.map(({ name, address, link }, index) => (
|
|
<li key={index} className="space-y-1">
|
|
<Button
|
|
asChild
|
|
className="gap-4 p-0 text-base hover:bg-background"
|
|
variant="ghost"
|
|
>
|
|
<a href={link}>
|
|
{name}
|
|
<div className="flex size-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
|
|
<ChevronRight className="rtl:rotate-180" />
|
|
</div>
|
|
</a>
|
|
</Button>
|
|
<p className="text-sm text-muted-foreground">{address}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
const HomeLink = ({ home }: { home: HomeLink }) => {
|
|
return (
|
|
<a href={home.link} className="inline-block">
|
|
<div className="max-w-50">
|
|
<img
|
|
className="w-full dark:hidden"
|
|
src={home.logo.light}
|
|
alt={home.alt ?? "لوگو"}
|
|
/>
|
|
{home.logo.dark && (
|
|
<img
|
|
className="hidden w-full dark:inline-block"
|
|
src={home.logo.dark}
|
|
alt={home.alt ?? "لوگو"}
|
|
/>
|
|
)}
|
|
</div>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
const SocialMediaSection = ({ links }: { links?: SocialLink[] }) => {
|
|
if (!links) return;
|
|
|
|
return (
|
|
<ul className="flex flex-wrap gap-4">
|
|
{links.map(({ icon, link }) => (
|
|
<li key={crypto.randomUUID()}>
|
|
<Button size="icon-sm" asChild className="rounded-full">
|
|
<a href={link}>
|
|
<img
|
|
className="size-3.5 dark:hidden"
|
|
alt={icon.title}
|
|
src={icon.light}
|
|
/>
|
|
<img
|
|
className="hidden size-3.5 dark:block"
|
|
alt={icon.title}
|
|
src={icon.dark}
|
|
/>
|
|
</a>
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
const FooterLinksSection = ({ links }: { links?: FooterLinksSection[] }) => {
|
|
if (!links) return;
|
|
|
|
return (
|
|
<Fragment>
|
|
{links.map(({ title, items }, i) => (
|
|
<div key={i} className="space-y-4">
|
|
<h2 className="text-base leading-normal font-semibold">{title}</h2>
|
|
<div>
|
|
{items.map(({ link, text }, j) => (
|
|
<a
|
|
key={`${i}-${j}`}
|
|
className="block py-2 text-sm leading-normal text-muted-foreground"
|
|
href={link}
|
|
>
|
|
{text}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
const AppPromoSection = ({
|
|
title,
|
|
description,
|
|
links,
|
|
}: AppPromoSectionProps) => {
|
|
if (!links) return;
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
{title && (
|
|
<h2 className="text-base leading-normal font-semibold">{title}</h2>
|
|
)}
|
|
{description && (
|
|
<p className="text-sm leading-relaxed text-balance text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
)}
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{links.map(({ link, badge, alt }, index) => (
|
|
<a
|
|
className="block flex-1 shrink-0 grow-0 basis-33"
|
|
href={link}
|
|
key={index}
|
|
>
|
|
<img src={badge} alt={alt} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const PaymentMethods = ({ cards }: { cards: string[] }) => {
|
|
return (
|
|
<ul className="flex flex-wrap items-center gap-3">
|
|
{cards.map((card) => (
|
|
<li key={crypto.randomUUID()}>
|
|
<img className="w-9.5" src={card} alt="روش پرداخت" />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
export { EcommerceFooter9 };
|