import { forwardRef } from "react";
import {
Camera,
Image as ImageIcon,
Grid3x3,
Filter,
ZoomIn,
Share2,
Eye,
Heart,
MoreHorizontal,
Play,
Maximize2
} from "lucide-react";
import {
Stack,
Group,
Title,
Text,
Badge,
Button,
Image,
Icon,
Box,
} from "@ui8kit/core";
import { skyOSTheme } from "@ui8kit/theme";
const currentTheme = skyOSTheme;
const theme = {
theme: currentTheme,
themeRounded: currentTheme.rounded,
themeButtonSize: currentTheme.buttonSize
}
import {
LayoutBlock,
createLayoutContentHook
} from "@ui8kit/core";
// Gallery interfaces (reuse from SplitGallery)
interface GalleryImage {
id: string;
src: string;
alt: string;
title?: string;
description: string;
category?: string;
likes?: string;
views?: string;
}
interface GalleryStats {
totalImages?: string;
categories?: string;
views?: string;
}
// Grid Gallery data interface
export interface GridGalleryData {
title: string;
subtitle?: string;
description?: string;
badge?: string;
images: GalleryImage[];
stats?: GalleryStats;
categories?: string[];
}
interface GridGalleryProps {
content: GridGalleryData;
variant?: "grid" | "masonry" | "carousel" | "mosaic" | "minimal" | "cards" | "polaroid" | "magazine";
useContainer?: boolean;
py?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
className?: string;
}
// Custom content hooks for different grid gallery variants
const gridGalleryContentHooks = {
// 1. Classic Grid Layout
grid: createLayoutContentHook({
header: (content: GridGalleryData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description && (
{content.description}
)}
{content.stats && (
{content.stats.totalImages && (
{content.stats.totalImages} Images
)}
{content.stats.categories && (
{content.stats.categories} Categories
)}
)}
),
item: (image: GalleryImage) => (
)
}),
// 2. Masonry Layout
masonry: createLayoutContentHook({
header: (content: GridGalleryData) => (
{content.title}
{content.subtitle && (
{content.subtitle}
)}
),
item: (image: GalleryImage, index: number) => (
{image.title && (
{image.title}
{image.category && (
{image.category}
)}
)}
)
}),
// 3. Carousel-style with featured image
carousel: createLayoutContentHook({
header: (content: GridGalleryData) => (
Interactive Gallery
{content.title}
{/* Featured Image */}
{content.images[0] && (
{content.images[0].title && (
{content.images[0].title}
)}
{content.images[0].category && (
{content.images[0].category}
)}
)}
),
item: (image: GalleryImage, index: number) => {
if (index === 0) return null; // Skip first image as it's featured
return (
);
}
}),
// 4. Mosaic Layout with different sizes
mosaic: createLayoutContentHook({
header: (content: GridGalleryData) => (
{content.title}
{content.description && (
{content.description}
)}
),
item: (image: GalleryImage, index: number) => {
const sizeClass = index % 6 === 0 ? "col-span-2 row-span-2" :
index % 4 === 0 ? "col-span-2" :
index % 3 === 0 ? "row-span-2" : "";
return (
{image.title && (
{image.title}
)}
{image.likes && (
{image.likes}
)}
);
}
}),
// 5. Minimal Clean Layout
minimal: createLayoutContentHook({
header: (content: GridGalleryData) => (
{content.badge || "Gallery"}
{content.title}
{content.subtitle && (
{content.subtitle}
)}
),
item: (image: GalleryImage) => (
{image.title && (
{image.title}
)}
)
}),
// 6. Card-based Layout
cards: createLayoutContentHook({
header: (content: GridGalleryData) => (
{content.badge || "Photo Collection"}
{content.title}
{content.categories && (
{content.categories.map((category, index) => (
{category}
))}
)}
),
item: (image: GalleryImage) => (
{image.title && (
{image.title}
)}
{image.category && (
{image.category}
)}
{image.likes && (
{image.likes}
)}
{image.views && (
{image.views}
)}
)
}),
// 7. Polaroid Style
polaroid: createLayoutContentHook({
header: (content: GridGalleryData) => (
{content.title}
{content.description && (
{content.description}
)}
),
item: (image: GalleryImage, index: number) => {
const rotation = (index % 4 - 1.5) * 3; // Random rotation between -4.5 and 4.5 degrees
return (
{image.title && (
{image.title}
)}
);
}
}),
// 8. Magazine Layout
magazine: createLayoutContentHook({
header: (content: GridGalleryData) => (
{content.badge || "Featured"}
{content.title}
{content.subtitle && (
{content.subtitle}
)}
{content.stats && (
{content.stats.totalImages && (
{content.stats.totalImages}
Photographs
)}
{content.stats.categories && (
{content.stats.categories}
Collections
)}
{content.stats.views && (
{content.stats.views}
Total Views
)}
)}
),
item: (image: GalleryImage, index: number) => {
const isFeatured = index % 7 === 0;
return (
{image.category && (
{image.category}
)}
{image.title && (
{image.title}
)}
{image.description && isFeatured && (
{image.description}
)}
);
}
})
};
export const GridGallery = forwardRef(
({
content,
variant = "grid",
useContainer = true,
py = "lg",
className,
...props
}, ref) => {
// Choose content hooks based on variant
const contentHooks = gridGalleryContentHooks[variant] || gridGalleryContentHooks.grid;
// Determine layout type and grid configuration based on variant
const getLayoutConfig = () => {
switch (variant) {
case "masonry":
return { layout: "grid" as const, gridCols: "1-2-3" };
case "carousel":
return { layout: "grid" as const, gridCols: "1-2-4" };
case "mosaic":
return { layout: "grid" as const, gridCols: "2-3-4" };
case "minimal":
return { layout: "grid" as const, gridCols: "1-2-3" };
case "cards":
return { layout: "grid" as const, gridCols: "1-2-3" };
case "polaroid":
return { layout: "flex" as const, flexWrap: true };
case "magazine":
return { layout: "grid" as const, gridCols: "1-2-3" };
default: // grid
return { layout: "grid" as const, gridCols: "1-2-3" };
}
};
const layoutConfig = getLayoutConfig();
return (
);
}
);
GridGallery.displayName = "GridGallery";
// Export template configurations
export const gridGalleryTemplates = {
grid: {
id: "gridGalleryGrid",
name: "Classic Grid Gallery",
description: "Traditional grid layout with hover effects",
component: GridGallery,
defaultProps: { variant: "grid" as const }
},
masonry: {
id: "gridGalleryMasonry",
name: "Masonry Gallery",
description: "Pinterest-style masonry layout with varying heights",
component: GridGallery,
defaultProps: { variant: "masonry" as const }
},
carousel: {
id: "gridGalleryCarousel",
name: "Carousel Gallery",
description: "Featured image with thumbnail carousel",
component: GridGallery,
defaultProps: { variant: "carousel" as const }
},
mosaic: {
id: "gridGalleryMosaic",
name: "Mosaic Gallery",
description: "Dynamic mosaic layout with varying sizes",
component: GridGallery,
defaultProps: { variant: "mosaic" as const }
},
minimal: {
id: "gridGalleryMinimal",
name: "Minimal Gallery",
description: "Clean, minimal design with subtle interactions",
component: GridGallery,
defaultProps: { variant: "minimal" as const }
},
cards: {
id: "gridGalleryCards",
name: "Card Gallery",
description: "Card-based layout with metadata and stats",
component: GridGallery,
defaultProps: { variant: "cards" as const }
},
polaroid: {
id: "gridGalleryPolaroid",
name: "Polaroid Gallery",
description: "Vintage polaroid-style photo layout",
component: GridGallery,
defaultProps: { variant: "polaroid" as const }
},
magazine: {
id: "gridGalleryMagazine",
name: "Magazine Gallery",
description: "Editorial magazine-style layout with featured images",
component: GridGallery,
defaultProps: { variant: "magazine" as const }
}
};