Footer Variants Test

AppFooter komponentinin özellikleri ve kullanımı

Footer Durumu

DashboardLayout'ta footer gösterimi

Footer Özellikleri:

✅ İsteğe bağlı (showFooter prop)
✅ Multi-column link grupları
✅ Social media linkleri
✅ Copyright metni
✅ Company açıklaması
✅ Privacy/Terms linkleri
✅ Lucide React ikonları
✅ Responsive tasarım

Şu an footer kapalıDashboardLayout'ta showFooter=true yapın

AppFooter Props

Özelleştirilebilir özellikler

Prop	Tip	Zorunlu	Açıklama
companyName	string	❌	Şirket adı
description	string	❌	Kısa açıklama
linkGroups	FooterLinkGroup[]	❌	Link kolonları
socialLinks	FooterSocialLink[]	❌	Social media linkleri
copyrightText	string	❌	Copyright metni
showPrivacyTerms	boolean	❌	Privacy/Terms linkleri

Kullanım Örneği

DashboardLayout ile footer ekleme

import { DashboardLayout } from '@hascanb/arf-ui-kit/layout-kit'
import { Github, Twitter, Linkedin } from 'lucide-react'

<DashboardLayout
  brandData={{...}}
  userData={{...}}
  navGroups={[...]}
  showFooter={true}
  footerData={{
    companyName: "ARF Tech",
    description: "Modern web uygulamaları geliştiriyoruz",
    linkGroups: [
      {
        title: "Ürünler",
        links: [
          { label: "Auth Kit", href: "/products/auth" },
          { label: "Layout Kit", href: "/products/layout" },
          { label: "Form Kit", href: "/products/form" },
        ],
      },
      {
        title: "Şirket",
        links: [
          { label: "Hakkımızda", href: "/about" },
          { label: "İletişim", href: "/contact" },
          { label: "Kariyer", href: "/careers" },
        ],
      },
    ],
    socialLinks: [
      { platform: "github", url: "https://github.com/...", icon: Github },
      { platform: "twitter", url: "https://twitter.com/...", icon: Twitter },
      { platform: "linkedin", url: "https://linkedin.com/...", icon: Linkedin },
    ],
    copyrightText: "© 2026 ARF Tech. Tüm hakları saklıdır.",
    showPrivacyTerms: true,
  }}
>
  {children}
</DashboardLayout>

Type Definitions

interface FooterLinkGroup {
  title: string
  links: FooterLink[]
}

interface FooterLink {
  label: string
  href: string
}

interface FooterSocialLink {
  platform: string      // "github", "twitter", etc.
  url: string
  icon: LucideIcon
}

interface AppFooterProps {
  companyName?: string
  description?: string
  linkGroups?: FooterLinkGroup[]
  socialLinks?: FooterSocialLink[]
  copyrightText?: string
  showPrivacyTerms?: boolean
}

Footer Görünümü

Tipik bir footer layout'u

ARF Tech

Modern web uygulamaları geliştiriyoruz

Ürünler

Auth Kit
Layout Kit
Form Kit

Şirket

Hakkımızda
İletişim
Kariyer

Destek

Dokümantasyon
API Referans
İletişim

Gizlilik Politikası Kullanım Şartları

Footer Varyasyonları

Farklı kullanım senaryoları

1. Minimal Footer

Sadece copyright ve sosyal medya

footerData={{
  copyrightText: "© 2026 Company",
  socialLinks: [...]
}}

2. Full Footer

Tüm özellikler (yukarıdaki örnek)

3. Footer Yok

DashboardLayout'ta showFooter=false (varsayılan)

<DashboardLayout
  {...props}
  // showFooter prop verilmezse footer görünmez
/>

Footer'ı Etkinleştir

Mevcut layout'a footer eklemek için

app/(dashboard)/layout.tsx dosyasında:

<AppSidebar 
  brand={brandData}
  user={userData}
  navGroups={navGroups}
  
  // Footer için bu props'ları ekleyin:
  showFooter={true}
  footerData={{
    companyName: "Kargo Sistemi",
    copyrightText: "© 2026 Kargo Sistemi",
    showPrivacyTerms: true,
  }}
/>