"use client" /** * @name Portfolio 05 * @description Filterable portfolio grid with category tabs. * Filter projects by type with smooth transitions. * * @slots portfolio, portfolio-container, portfolio-header, portfolio-badge, * portfolio-heading, portfolio-description, portfolio-filters, * portfolio-filter, portfolio-grid, portfolio-item, portfolio-image, * portfolio-content, portfolio-category, portfolio-title, * portfolio-excerpt, portfolio-link * @variant filterable * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface PortfolioProject { id: string title: string category: string excerpt: string href: string } interface Portfolio05Props { badge?: string heading?: string description?: string projects?: PortfolioProject[] categories?: string[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultProjects: PortfolioProject[] = [ { id: "proj-1", title: "E-Commerce Platform", category: "Web Design", excerpt: "Complete redesign of an online shopping experience.", href: "#" }, { id: "proj-2", title: "Brand Identity System", category: "Branding", excerpt: "Comprehensive visual identity for tech startup.", href: "#" }, { id: "proj-3", title: "Mobile Banking App", category: "Mobile", excerpt: "Secure and intuitive banking application.", href: "#" }, { id: "proj-4", title: "SaaS Dashboard", category: "Web Design", excerpt: "Analytics platform for enterprise clients.", href: "#" }, { id: "proj-5", title: "Restaurant Branding", category: "Branding", excerpt: "Full brand experience for fine dining.", href: "#" }, { id: "proj-6", title: "Fitness Tracking App", category: "Mobile", excerpt: "Health and wellness companion app.", href: "#" }, { id: "proj-7", title: "Corporate Website", category: "Web Design", excerpt: "Professional presence for consulting firm.", href: "#" }, { id: "proj-8", title: "Startup Logo Design", category: "Branding", excerpt: "Memorable mark for emerging brand.", href: "#" }, ] const defaultCategories = ["All", "Web Design", "Branding", "Mobile"] // ============================================================================ // COMPONENT // ============================================================================ function Portfolio05({ badge = "Portfolio", heading = "Our latest work", description = "Browse our collection of projects across different industries and disciplines.", projects = defaultProjects, categories = defaultCategories, className, idBase = "portfolio-05", }: Portfolio05Props) { const [activeFilter, setActiveFilter] = React.useState("All") const headingId = `${idBase}-heading` const filteredProjects = React.useMemo(() => { if (activeFilter === "All") return projects return projects.filter((project) => project.category === activeFilter) }, [projects, activeFilter]) return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Filters */}

{categories.map((category) => ( ))}

{/* Grid */}

{filteredProjects.map((project) => ( {/* Image */}

{/* Content */}

{project.category}

{project.title}

{project.excerpt}

View Project

))}

) } export default Portfolio05 export { Portfolio05, type Portfolio05Props }