بلاک‌ها · بخش‌های صفحه

بخشِ فوترِ وسط‌چین: برند، یک ردیف لینک، شبکه‌های اجتماعی و کپی‌رایت؛ برای سایت‌های کوچک.

۱. نصب کامپوننت‌ها

این بلاک از ۴ آیتم دیگ استفاده می‌کند: 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.json
pnpm 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.json
yarn 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.json
bunx --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>
  )
}