// grid.tsx import Image from "next/image"; import React from "react"; import { cn } from "@gmana/utils"; import { type LucideIcon } from "lucide-react"; interface GridProps extends React.HTMLAttributes { columns?: 1 | 2 | 3 | 4 | 5 | 6; gap?: "small" | "medium" | "large"; responsive?: boolean; maintainAspectRatio?: boolean; } interface ImageData { src: string; alt: string; width?: number; height?: number; blurDataURL?: string; } type AspectRatioType = | "square" // 1:1 | "video" // 16:9 | "portrait" // 3:4 | "landscape" // 4:3 | "ultrawide" // 21:9 | "golden" // 1.618:1 | "custom" // custom ratio | "auto"; // natural ratio interface Caption { text: string; position?: "overlay" | "below" | "hover"; style?: "minimal" | "boxed" | "gradient"; align?: "left" | "center" | "right"; } const aspectRatioClasses: Record = { square: "aspect-square", // 1:1 video: "aspect-video", // 16:9 portrait: "aspect-[3/4]", // 3:4 landscape: "aspect-[4/3]", // 4:3 ultrawide: "aspect-[21/9]", // 21:9 golden: "aspect-[1.618/1]", // Golden ratio custom: "", // Will be handled separately auto: "aspect-auto", // Natural aspect ratio }; const gapSizes = { small: 2, medium: 4, large: 6, }; const hoverEffects = { opacity: "hover:opacity-80", scale: "hover:scale-105", none: "", }; interface CaptionBadge { type: "icon" | "text" | "dot"; content: string; icon?: LucideIcon; color?: "primary" | "secondary" | "success" | "warning" | "error"; position?: "left" | "right"; } interface Caption { text: string; subtext?: string; position?: "overlay" | "below" | "hover"; style?: "minimal" | "boxed" | "gradient"; align?: "left" | "center" | "right"; maxLines?: number; badges?: CaptionBadge[]; icon?: LucideIcon; } interface GridItemProps extends Omit, "children"> { aspectRatio?: AspectRatioType; customRatio?: string; hover?: "opacity" | "scale" | "none"; image?: ImageData; caption?: Caption | string; fill?: boolean; priority?: boolean; sizes?: string; quality?: number; objectFit?: "contain" | "cover" | "fill"; children?: React.ReactNode; } const badgeColors = { primary: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300", secondary: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300", success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300", warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300", error: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300", }; const captionStyles = { minimal: "text-sm text-gray-600 dark:text-gray-300", boxed: "text-sm p-3 bg-white/90 dark:bg-gray-800/90 shadow-sm backdrop-blur-sm", gradient: "text-sm text-white bg-gradient-to-t from-black/80 via-black/50 to-transparent p-4 w-full", }; const captionPositions = { overlay: "absolute bottom-0 left-0 right-0", below: "mt-2", hover: "absolute bottom-0 left-0 right-0 translate-y-full group-hover:translate-y-0 transition-transform duration-300", }; const captionAlignments = { left: "text-left", center: "text-center", right: "text-right", }; const CaptionBadgeComponent = ({ badge }: { badge: CaptionBadge }) => { const Icon = badge.icon; return ( {badge.type === "icon" && Icon && } {badge.type === "dot" && } {badge.content} ); }; function GridItem({ children, aspectRatio = "square", customRatio, hover = "opacity", image, caption, fill = true, priority = false, sizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw", quality = 85, objectFit = "cover", className, ...props }: GridItemProps) { const getAspectRatioClass = () => { if (aspectRatio === "custom" && customRatio) { return `aspect-[${customRatio}]`; } return aspectRatioClasses[aspectRatio]; }; const captionConfig: Caption = typeof caption === "string" ? { text: caption, position: "below", style: "minimal", align: "left" } : { text: caption?.text ?? "", position: "below", style: "minimal", align: "left", ...caption, }; const CaptionIcon = captionConfig.icon; const renderCaption = () => (

{/* Badges at the top of caption */} {captionConfig.badges && captionConfig.badges.length > 0 && (

{captionConfig.badges.map((badge, index) => ( ))}

)} {/* Main caption content */}

{CaptionIcon && } {captionConfig.text}

{/* Subtext if provided */} {captionConfig.subtext &&

{captionConfig.subtext}

}

); return (

{image ? ( {image.alt}

) : ( children )} {caption && captionConfig.position !== "below" && renderCaption()}

{caption && captionConfig.position === "below" && renderCaption()}

); } function Grid({ children, columns = 4, gap = "medium", responsive = true, maintainAspectRatio = true, className, ...props }: GridProps) { return (

= 2, "md:grid-cols-3": columns >= 3, "lg:grid-cols-4": columns >= 4, "xl:grid-cols-5": columns >= 5, "2xl:grid-cols-6": columns >= 6, } : { [`grid-cols-${columns}`]: true, }, maintainAspectRatio && "grid-flow-dense", className, )} > {children} ); } Grid.Item = GridItem; export type { AspectRatioType, GridItemProps, GridProps, ImageData }; export default Grid;

Grid Component

Grid Component