"use client" /** * @name Grid View 06 * @description A notes/ideas board with variable height cards in masonry layout. * Perfect for brainstorming boards, knowledge bases, or quick note collections. * * @slots grid-view, grid-view-container, grid-view-header, grid-view-heading, * grid-view-description, grid-view-filter, grid-view-filter-button, * grid-view-masonry, grid-view-column, grid-view-card, grid-view-card-image, * grid-view-card-header, grid-view-card-tag, grid-view-card-actions, grid-view-action-button, * grid-view-card-content, grid-view-card-title, grid-view-card-body, * grid-view-card-footer, grid-view-card-author, grid-view-card-date * @variant notes-board * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Bookmark, MoreHorizontal, Pin } from "lucide-react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface NoteItem { id: string title: string body?: string tag?: string tagVariant?: "default" | "secondary" | "destructive" author?: string date?: string pinned?: boolean saved?: boolean hasImage?: boolean } interface GridView06Props { heading?: string description?: string filters?: string[] activeFilter?: string items?: NoteItem[] onFilterChange?: (filter: string) => void onItemClick?: (id: string) => void onSaveToggle?: (id: string) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFilters = ["All", "Ideas", "Research", "Tasks", "Notes"] const defaultItems: NoteItem[] = [ { id: "note-1", title: "Product Launch Strategy", body: "Focus on early adopters first. Create beta program with exclusive access. Build community before public launch. Consider influencer partnerships for initial traction.", tag: "Ideas", author: "Sarah Chen", date: "2 hours ago", pinned: true, hasImage: true, }, { id: "note-2", title: "API Design Patterns", body: "REST vs GraphQL comparison. Consider versioning strategy.", tag: "Research", author: "Mike Ross", date: "Yesterday", }, { id: "note-3", title: "User Interview Insights", body: "Key findings: Users want simpler onboarding, faster search, and better mobile experience. Pain points include slow load times and confusing navigation.", tag: "Research", tagVariant: "secondary", author: "Alex Kim", date: "3 days ago", saved: true, }, { id: "note-4", title: "Sprint Planning Notes", body: "Priority: Auth system, Dashboard redesign, API optimization", tag: "Tasks", author: "Emma Wilson", date: "1 week ago", }, { id: "note-5", title: "Competitive Analysis", body: "Competitor A has better pricing but limited features. Competitor B strong on enterprise but weak mobile. Opportunity in mid-market with strong mobile-first approach and flexible pricing tiers.", tag: "Research", author: "David Lee", date: "1 week ago", pinned: true, }, { id: "note-6", title: "Quick Reminder", body: "Follow up with design team on new icons.", tag: "Notes", author: "Lisa Park", date: "2 weeks ago", }, { id: "note-7", title: "Feature Request: Dark Mode", body: "Multiple users requested dark mode support. Consider system preference detection and manual toggle. Should include all components and persist preference.", tag: "Ideas", tagVariant: "default", author: "James Miller", date: "2 weeks ago", saved: true, hasImage: true, }, { id: "note-8", title: "Performance Metrics", body: "Current: 2.3s load time. Target: under 1.5s.", tag: "Tasks", author: "Anna Brown", date: "3 weeks ago", }, { id: "note-9", title: "Integration Ideas", body: "Slack, Notion, Figma, GitHub - prioritize based on user survey results", tag: "Ideas", author: "Tom Wilson", date: "1 month ago", }, ] // ============================================================================ // COMPONENT // ============================================================================ function GridView06({ heading = "Notes & Ideas", description = "Capture and organize your thoughts in one place.", filters = defaultFilters, activeFilter = "All", items = defaultItems, onFilterChange, onItemClick, onSaveToggle, className, idBase = "grid-view-06", }: GridView06Props) { const headingId = `${idBase}-heading` // Distribute items across columns for masonry effect const columns = React.useMemo(() => { const cols: NoteItem[][] = [[], [], []] // Put pinned items first const sorted = [...items].sort((a, b) => { if (a.pinned && !b.pinned) return -1 if (!a.pinned && b.pinned) return 1 return 0 }) sorted.forEach((item, index) => { cols[index % 3].push(item) }) return cols }, [items]) return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Filters */}

{filters.map((filter) => ( ))}

{/* Masonry Grid */}

{columns.map((column, colIndex) => (

{column.map((item) => (

onItemClick?.(item.id)} > {/* Image Attachment */} {item.hasImage && (

)} {/* Header */}

{item.pinned && (

{/* Actions */}

{/* Content */}

{item.title}

{item.body && (

{item.body}

)}

{/* Footer */} {(item.author || item.date) && (

{item.author && ( {item.author} )} {item.author && item.date && •} {item.date && ( {item.date} )}

)}

))}

) } export default GridView06 export { GridView06, type GridView06Props }