import { forwardRef } from "react";
import { ArrowRight, Calendar, Clock, User, Tag } from "lucide-react";
import {
Stack,
Group,
Title,
Text,
Badge,
Button,
Card,
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";
// Blog post interface
interface BlogPost {
id: string;
title: string;
description: string;
author: {
name: string;
avatar?: string;
};
date: string;
readTime: string;
image?: {
src: string;
alt: string;
};
category: string;
categoryId?: string;
}
// Blog data interface
export interface GridBlogData {
badge?: string;
title: string;
description: string;
buttonText?: string;
categories?: Array<{
id: string;
name: string;
}>;
posts: BlogPost[];
}
interface GridBlogProps {
content: GridBlogData;
variant?: "cards" | "postsGrid" | "filtered" | "compact" | "featured";
cols?: "1" | "2" | "3" | "4" | "1-2" | "1-2-3" | "1-2-4";
gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
useContainer?: boolean;
py?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
_showFilters?: boolean;
className?: string;
}
// Custom content hooks for different blog variants
const gridBlogContentHooks = {
// Blog cards variant
cards: createLayoutContentHook({
item: (post: BlogPost) => (
{post.image && (
{post.category}
)}
{post.title}
{post.description}
{post.author.name}
{post.date}
{post.readTime}
)
}),
// Posts grid variant
postsGrid: createLayoutContentHook({
beforeItems: (content: GridBlogData) => (
content.buttonText ? (
{/* Spacer */}
}>
{content.buttonText}
) : null
),
item: (post: BlogPost) => (
{post.image && (
)}
{post.category}
{post.title}
{post.description}
{post.author.avatar && (
)}
{post.author.name}
{post.date}
{post.readTime}
)
}),
// Filtered variant - Note: State management should be handled at component level
filtered: createLayoutContentHook({
beforeItems: (content: GridBlogData) => {
return content.categories ? (
{content.categories.map((category) => (
))}
) : null;
},
item: (post: BlogPost, _index: number) => (
{post.image && (
)}
{post.category}
{post.title}
{post.description}
{post.author.name}
•
{post.readTime}
)
}),
// Compact variant
compact: createLayoutContentHook({
item: (post: BlogPost) => (
{post.image && (
)}
{post.category}
{post.title}
{post.author.name}
•
{post.date}
)
}),
// Featured variant
featured: createLayoutContentHook({
item: (post: BlogPost, index: number) => {
const isFeatured = index === 0;
return (
{post.image && (
)}
{post.category}
{post.title}
{post.description}
{post.author.avatar && (
)}
{post.author.name}
{post.date}
•
{post.readTime}
{isFeatured && (
}>
Read More
)}
);
}
})
};
export const GridBlog = forwardRef(
({
content,
variant = "cards",
cols = "1-2-3",
py = "lg",
gap = "xl",
useContainer = true,
_showFilters = false,
className,
...props
}, ref) => {
// Choose content hooks and layout settings based on variant
const getVariantConfig = () => {
switch (variant) {
case "cards":
return {
contentHooks: gridBlogContentHooks.cards,
cols: "1-2-3" as const,
gap: "xl" as const
};
case "postsGrid":
return {
contentHooks: gridBlogContentHooks.postsGrid,
cols: "1-2-3" as const,
gap: "lg" as const
};
case "filtered":
return {
contentHooks: gridBlogContentHooks.filtered,
cols: "1-2-3" as const,
gap: "lg" as const
};
case "compact":
return {
contentHooks: gridBlogContentHooks.compact,
cols: "1" as const,
gap: "sm" as const
};
case "featured":
return {
contentHooks: gridBlogContentHooks.featured,
cols: "1-2-4" as const,
gap: "lg" as const
};
default:
return {
contentHooks: gridBlogContentHooks.cards,
cols: "1-2-3" as const,
gap: "lg" as const
};
}
};
const config = getVariantConfig();
// Transform posts to items for LayoutBlock
const layoutContent = {
...content,
items: content.posts
};
return (
);
}
);
GridBlog.displayName = "GridBlog";
// Export template configurations
export const gridBlogTemplates = {
cards: {
id: "gridBlogCards",
name: "Blog Cards Grid",
description: "Grid layout with blog post cards",
component: GridBlog,
defaultProps: { variant: "cards" as const }
},
postsGrid: {
id: "gridBlogPostsGrid",
name: "Blog Posts Grid",
description: "Grid layout with detailed blog posts",
component: GridBlog,
defaultProps: { variant: "postsGrid" as const }
},
filtered: {
id: "gridBlogFiltered",
name: "Filtered Blog Grid",
description: "Grid layout with category filters",
component: GridBlog,
defaultProps: { variant: "filtered" as const, _showFilters: true }
},
compact: {
id: "gridBlogCompact",
name: "Compact Blog List",
description: "Compact list layout for blog posts",
component: GridBlog,
defaultProps: { variant: "compact" as const, cols: "1" as const }
},
featured: {
id: "gridBlogFeatured",
name: "Featured Blog Grid",
description: "Grid layout with featured post highlight",
component: GridBlog,
defaultProps: { variant: "featured" as const, cols: "1-2-4" as const }
}
};