"use client" /** * @name Portfolio 04 * @description Masonry grid layout portfolio. * Pinterest-style project gallery with filter capability. * * @slots portfolio, portfolio-container, portfolio-header, portfolio-heading, * portfolio-description, portfolio-filters, portfolio-filter, portfolio-grid, * portfolio-item, portfolio-image, portfolio-overlay, portfolio-content, * portfolio-title, portfolio-category * @variant masonry * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { ArrowUpRight } from "lucide-react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Project { id: string title: string category: string href?: string featured?: boolean } interface Portfolio04Props { heading?: string description?: string projects?: Project[] categories?: string[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultProjects: Project[] = [ { id: "proj-1", title: "Brand Identity Design", category: "Branding", featured: true }, { id: "proj-2", title: "E-commerce Platform", category: "Web Design" }, { id: "proj-3", title: "Mobile Banking App", category: "Mobile" }, { id: "proj-4", title: "SaaS Dashboard", category: "Web Design" }, { id: "proj-5", title: "Restaurant Branding", category: "Branding" }, { id: "proj-6", title: "Fitness App UI", category: "Mobile" }, { id: "proj-7", title: "Corporate Website", category: "Web Design" }, { id: "proj-8", title: "Product Packaging", category: "Branding", featured: true }, ] // Aspect ratios for masonry effect const aspectRatios = [ "aspect-[3/4]", "aspect-[4/3]", "aspect-square", "aspect-[4/5]", "aspect-[3/4]", "aspect-[5/4]", "aspect-[4/5]", "aspect-[3/4]", ] const defaultCategories = ["All", "Web Design", "Mobile", "Branding"] // ============================================================================ // COMPONENT // ============================================================================ function Portfolio04({ heading = "Our Work", description = "A collection of projects we're proud of", projects = defaultProjects, categories = defaultCategories, className, idBase = "portfolio-04", }: Portfolio04Props) { const [activeFilter, setActiveFilter] = React.useState("All") const headingId = `${idBase}-heading` const filteredProjects = React.useMemo(() => { if (activeFilter === "All") return projects return projects.filter((p) => p.category === activeFilter) }, [projects, activeFilter]) return (

{/* Header */}

{heading}

{description}

{/* Filters */}

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

{/* Masonry Grid */}

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

{/* Overlay */}

{/* Content */}

{project.category}

{project.title}

{/* Featured Badge */} {project.featured && ( Featured )}

))}

) } export default Portfolio04 export { Portfolio04, type Portfolio04Props }