"use client" import Link from "next/link" import { Separator } from "@/app/_components/ui/separator" import { Github, Twitter, Linkedin, Blocks, LucideIcon } from "lucide-react" export interface FooterLink { label: string href: string } export interface FooterSection { title: string links: FooterLink[] } export interface SocialLink { icon: LucideIcon href: string label: string } export interface FooterContent { logoText: string description: string copyrightText: string bottomLinks: FooterLink[] } export interface FooterMultiColumnProps { columns?: 4 | "simple" footerSections?: FooterSection[] socialLinks?: SocialLink[] content?: FooterContent } export const defaultFooterSections: FooterSection[] = [ { title: "Product", links: [ { label: "Features", href: "#" }, { label: "Pricing", href: "#" }, { label: "Documentation", href: "#" }, { label: "Changelog", href: "#" }, ], }, { title: "Company", links: [ { label: "About", href: "#" }, { label: "Blog", href: "#" }, { label: "Careers", href: "#" }, { label: "Contact", href: "#" }, ], }, { title: "Resources", links: [ { label: "Community", href: "#" }, { label: "Help Center", href: "#" }, { label: "Templates", href: "#" }, { label: "Partners", href: "#" }, ], }, { title: "Legal", links: [ { label: "Privacy", href: "#" }, { label: "Terms", href: "#" }, { label: "Cookie Policy", href: "#" }, { label: "Licenses", href: "#" }, ], }, ] export const defaultSocialLinks: SocialLink[] = [ { icon: Twitter, href: "#", label: "Twitter" }, { icon: Github, href: "#", label: "GitHub" }, { icon: Linkedin, href: "#", label: "LinkedIn" }, ] export const defaultFooterContent: FooterContent = { logoText: "MyloUI", description: "Copy-paste ready components built with shadcn/ui and Tailwind CSS.", copyrightText: "MyloUI. All rights reserved.", bottomLinks: [ { label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, ], } /** * FooterMultiColumn - Multi-column footer * * @description * A comprehensive footer with multiple columns for links, * social icons, and copyright information. * * @usage * ```tsx * import { FooterMultiColumn } from "@/components/blocks/footer-multi-column" * * * ``` * * @dependencies * - lucide-react (for icons) * - @/components/ui/separator * * @props * - columns: 4 | "simple" - Footer layout style * - footerSections: FooterSection[] - Array of footer link sections * - socialLinks: SocialLink[] - Array of social media links * - content: FooterContent - Footer content object * * @category Footer * @tags landing, navigation, links */ export function FooterMultiColumn({ columns = 4, footerSections = defaultFooterSections, socialLinks = defaultSocialLinks, content = defaultFooterContent, }: FooterMultiColumnProps) { if (columns === "simple") { return ( ) } return ( ) }

Multi-Column Footer

Installation

Preview

Usage

Dependencies

shadcn/ui Components