import { forwardRef } from "react";
import { ChevronLeft, ChevronRight, ArrowRight, Calendar, Clock, User } from "lucide-react";
import {
Block,
Stack,
Grid,
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 {
SplitBlock,
createContentHook
} from "@ui8kit/core";
// Blog post interface (reuse from GridBlog)
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;
}
// Split Blog data interface
export interface SplitBlogData {
badge?: string;
title: string;
subtitle?: string;
description: string;
tagline?: string;
viewAllText?: string;
posts: BlogPost[];
featuredPost?: BlogPost;
}
interface SplitBlogProps {
content: SplitBlogData;
variant?: "news" | "slider" | "featured" | "newsletter" | "timeline";
leftMedia?: boolean;
useContainer?: boolean;
py?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
className?: string;
}
const sideArticlesContentHooks = {
// News variant - side articles for media section
news: createContentHook({
content: (content: SplitBlogData) => {
const sideArticles = content.posts.slice(1, 4);
return (
Related Articles
{sideArticles.map((article) => (
{article.image && (
)}
{article.title}
{article.author.name}
•
{article.readTime}
))}
);
}
})
};
// Custom content hooks for different blog split variants
const splitBlogContentHooks = {
// News variant - main article only (side articles moved to media section)
news: createContentHook({
content: (content: SplitBlogData) => {
const mainPost = content.posts[0];
return (
{content.badge || "News"}
{content.title}
{content.subtitle && (
{content.subtitle}
)}
{/* Main Article */}
{mainPost && (
{mainPost.image && (
)}
{mainPost.category}
{mainPost.title}
{mainPost.description}
{mainPost.author.name}
{mainPost.date}
{mainPost.readTime}
)}
);
}
}),
// Slider variant - content with navigation
slider: createContentHook({
content: (content: SplitBlogData) => (
{content.tagline && (
{content.tagline}
)}
{content.title}
{content.description}
{content.viewAllText && (
}>
{content.viewAllText}
)}
{/* Navigation Controls */}
)
}),
// Featured variant - highlight one main post
featured: createContentHook({
content: (content: SplitBlogData) => {
const featuredPost = content.featuredPost || content.posts[0];
return (
{content.badge || "Featured"}
{content.title}
{content.description}
{/* Featured Post Details */}
{featuredPost && (
{featuredPost.category}
{featuredPost.title}
{featuredPost.description}
{featuredPost.author.avatar && (
)}
{featuredPost.author.name}
{featuredPost.date}
•
{featuredPost.readTime}
}>
Read Full Article
)}
);
}
}),
// Newsletter variant - subscription focused
newsletter: createContentHook({
content: (content: SplitBlogData) => (
{content.badge || "Newsletter"}
{content.title}
{content.description}
{/* Latest Posts Preview */}
Latest Posts
{content.posts.slice(0, 3).map((post) => (
{post.title}
{post.date} • {post.readTime}
))}
}>
Subscribe to Newsletter
)
}),
// Timeline variant - chronological posts
timeline: createContentHook({
content: (content: SplitBlogData) => (
{content.badge || "Timeline"}
{content.title}
{content.description}
{/* Timeline Posts */}
{content.posts.slice(0, 4).map((post, index) => (
{/* Timeline Line */}
{index < content.posts.length - 1 && (
)}
{/* Timeline Dot */}
{index + 1}
{/* Post Content */}
{post.category}
{post.title}
{post.description}
{post.author.name}
•
{post.date}
))}
{content.viewAllText && (
}>
{content.viewAllText}
)}
)
})
};
export const SplitBlog = forwardRef(
({
content,
variant = "news",
leftMedia = false,
useContainer = true,
py = "lg",
gap = "xl",
className,
...props
}, ref) => {
// Create media section based on variant and content
const createMediaSection = () => {
// Default: show first post image or gradient
const firstPost = content.posts[2];
if (variant === "news" && content.posts.length > 1) {
// Show side articles for news variant
const sideContentHooks = sideArticlesContentHooks.news as any;
return (
{/* Side Articles */}
{sideContentHooks?.content(content)}
);
}
if (variant === "slider" && content.posts.length > 0) {
// Show multiple posts in a grid for slider
return (
{content.posts.slice(0, 4).map((post) => (
{post.image && (
)}
{post.category}
{post.title}
{post.author.name}
•
{post.readTime}
))}
);
}
if (firstPost?.image) {
return (
);
}
// Default gradient background
return (
);
};
// Choose content hooks based on variant
const contentHooks = splitBlogContentHooks[variant] || splitBlogContentHooks.news;
return (
);
}
);
SplitBlog.displayName = "SplitBlog";
// Export template configurations
export const splitBlogTemplates = {
news: {
id: "splitBlogNews",
name: "Blog News Split",
description: "Split layout with main article and related posts",
component: SplitBlog,
defaultProps: { variant: "news" as const }
},
slider: {
id: "splitBlogSlider",
name: "Blog Slider Split",
description: "Split layout with post grid and navigation",
component: SplitBlog,
defaultProps: { variant: "slider" as const }
},
featured: {
id: "splitBlogFeatured",
name: "Featured Blog Split",
description: "Split layout highlighting one main post",
component: SplitBlog,
defaultProps: { variant: "featured" as const }
},
newsletter: {
id: "splitBlogNewsletter",
name: "Newsletter Blog Split",
description: "Split layout focused on newsletter subscription",
component: SplitBlog,
defaultProps: { variant: "newsletter" as const }
},
timeline: {
id: "splitBlogTimeline",
name: "Timeline Blog Split",
description: "Split layout with chronological post timeline",
component: SplitBlog,
defaultProps: { variant: "timeline" as const }
}
};