فوترِ ساده
پیشنمایش تمامصفحهبخشِ فوترِ وسطچین: برند، یک ردیف لینک، شبکههای اجتماعی و کپیرایت؛ برای سایتهای کوچک.
۱. نصب کامپوننتها
این بلاک از ۴ آیتم دیگ استفاده میکند: control-sizefootericonspersian
پکیجمنیجر پیشفرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیجمنیجر Bun
npx digdesign@latest add https://docs.digdesign.ir/r/control-size.json https://docs.digdesign.ir/r/footer.json https://docs.digdesign.ir/r/icons.json https://docs.digdesign.ir/r/persian.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/control-size.json https://docs.digdesign.ir/r/footer.json https://docs.digdesign.ir/r/icons.json https://docs.digdesign.ir/r/persian.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/control-size.json https://docs.digdesign.ir/r/footer.json https://docs.digdesign.ir/r/icons.json https://docs.digdesign.ir/r/persian.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/control-size.json https://docs.digdesign.ir/r/footer.json https://docs.digdesign.ir/r/icons.json https://docs.digdesign.ir/r/persian.json۲. کد صفحه
کد را در app/<route>/page.tsx بگذارید و متنها، داده و هندلرها را با محصول خودتان عوض کنید.
footer-simple.tsx
"use client"
import { InstagramLogo, LinkedInLogo, TelegramLogo } from "@/components/icons"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Footer, FooterSocialLink, FooterSocialLinks } from "@/components/ui/footer"
import { toFaDigits } from "@/lib/persian"
const LINKS = ["امکانات", "قیمتها", "مجله", "درباره ما", "تماس"]
/**
* فوترِ ساده و وسطچین: نشانِ برند، یک ردیف لینکِ اصلی، شبکههای اجتماعی و کپیرایت؛
* برای سایتهای کوچک و صفحههای تکمحصولی که فوترِ ستونی برایشان زیاد است.
*/
export default function FooterSimpleBlock() {
return (
<ControlSizeProvider size="xl" asChild>
<Footer>
<div className="mx-auto flex w-full max-w-6xl flex-col items-center gap-8 px-4 py-12 text-center sm:px-6">
<span className="flex items-center gap-2 text-lg font-black">
<span aria-hidden className="size-3 rounded-sm bg-[var(--dig-violet-500)]" />
آوند
</span>
<nav aria-label="لینکهای فوتر">
<ul className="flex flex-wrap justify-center gap-x-8 gap-y-3 text-sm">
{LINKS.map((link) => (
<li key={link}>
<a href="#" className="text-muted-foreground hover:text-foreground">
{link}
</a>
</li>
))}
</ul>
</nav>
<FooterSocialLinks>
<FooterSocialLink href="#" aria-label="اینستاگرام">
<InstagramLogo />
</FooterSocialLink>
<FooterSocialLink href="#" aria-label="تلگرام">
<TelegramLogo />
</FooterSocialLink>
<FooterSocialLink href="#" aria-label="لینکدین">
<LinkedInLogo />
</FooterSocialLink>
</FooterSocialLinks>
<p className="text-sm text-muted-foreground">© {toFaDigits(1405)} آوند. همهٔ حقوق محفوظ است.</p>
</div>
</Footer>
</ControlSizeProvider>
)
}