import { forwardRef } from "react";
import {
Calendar,
Clock,
User,
ArrowLeft,
Share2,
BookOpen,
Eye,
Heart,
Bookmark,
ChevronRight,
Play,
Download,
Star
} from "lucide-react";
import {
Block,
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 {
SplitBlock,
createContentHook,
} from "@ui8kit/core";
// Post interfaces (reuse from CenteredPost)
interface PostAuthor {
name: string;
avatar?: string;
role?: string;
bio?: string;
}
interface PostMeta {
category: string;
readTime: string;
publishedDate: string;
views?: string;
likes?: string;
comments?: string;
}
// Split Post data interface
export interface SplitPostData {
title: string;
subtitle?: string;
excerpt?: string;
author?: PostAuthor;
meta: PostMeta;
image: {
src: string;
alt: string;
};
tags?: string[];
breadcrumbs?: {
label: string;
href?: string;
}[];
relatedLinks?: {
title: string;
href: string;
}[];
}
interface SplitPostProps {
content: SplitPostData;
variant?: "standard" | "author" | "media" | "sidebar" | "hero";
leftMedia?: boolean;
useContainer?: boolean;
py?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
className?: string;
}
// Custom content hooks for different split post header variants
const splitPostContentHooks = {
// Standard split post header
standard: createContentHook({
content: (content: SplitPostData) => (
{/* Breadcrumbs */}
{content.breadcrumbs && (
Back to Blog
)}
{/* Category & Meta */}
{content.meta.category}
{content.meta.readTime}
{/* Title */}
{content.title}
{/* Subtitle */}
{content.subtitle && (
{content.subtitle}
)}
{/* Author & Date */}
{content.author && (
{content.author.name}
{content.author.role && (
{content.author.role}
)}
{content.meta.publishedDate}
)}
{/* Tags */}
{content.tags && (
{content.tags.map((tag, index) => (
{tag}
))}
)}
{/* Actions */}
)
}),
// Author-focused split header
author: createContentHook({
content: (content: SplitPostData) => (
{/* Category */}
{content.meta.category}
{/* Title */}
{content.title}
{/* Excerpt */}
{content.excerpt && (
{content.excerpt}
)}
{/* Author Card */}
{content.author && (
{content.author.name}
{content.author.role && (
{content.author.role}
)}
{content.meta.publishedDate}
{content.author.bio && (
{content.author.bio}
)}
)}
{/* Meta Stats */}
{content.meta.readTime}
{content.meta.views && (
{content.meta.views}
)}
{content.meta.likes && (
{content.meta.likes}
)}
)
}),
// Media-focused split header
media: createContentHook({
content: (content: SplitPostData) => (
{/* Simple Meta */}
{content.meta.category}
{content.meta.readTime}
{/* Title */}
{content.title}
{/* Subtitle */}
{content.subtitle && (
{content.subtitle}
)}
{/* Author Line */}
{content.author && (
By {content.author.name}
•
{content.meta.publishedDate}
)}
{/* Media Actions */}
{/* Quick Tags */}
{content.tags && (
{content.tags.slice(0, 3).map((tag, index) => (
#{tag}
))}
)}
)
}),
// Sidebar-style split header
sidebar: createContentHook({
content: (content: SplitPostData) => (
{/* Navigation */}
All Articles
{/* Category Badge */}
{content.meta.category}
{/* Title */}
{content.title}
{/* Meta Info */}
{content.author && (
{content.author.name}
)}
{content.meta.publishedDate}
{content.meta.readTime}
{content.meta.views && (
{content.meta.views} views
)}
{/* Related Links */}
{content.relatedLinks && (
Related
{content.relatedLinks.slice(0, 3).map((link, index) => (
{link.title}
))}
)}
{/* Action Buttons */}
)
}),
// Hero-style split header
hero: createContentHook({
content: (content: SplitPostData) => (
{/* Hero Badge */}
Featured Story
{content.meta.category}
{/* Hero Title */}
{content.title}
{/* Hero Subtitle */}
{content.subtitle && (
{content.subtitle}
)}
{/* Hero Stats */}
{content.meta.readTime}
{content.meta.views && (
{content.meta.views}
)}
{content.meta.likes && (
{content.meta.likes}
)}
{/* Author Hero Card */}
{content.author && (
{content.author.name}
{content.author.role && (
{content.author.role}
)}
Published {content.meta.publishedDate}
)}
{/* Hero Actions */}
{/* Hero Tags */}
{content.tags && (
{content.tags.map((tag, index) => (
{tag}
))}
)}
)
})
};
export const SplitPost = forwardRef(
({
content,
variant = "standard",
leftMedia = false,
useContainer = true,
py = "lg",
gap = "xl",
className,
...props
}, ref) => {
// Create media section - always use the post image
const createMediaSection = () => {
return (
{/* Overlay for better text readability */}
);
};
// Choose content hooks based on variant
const contentHooks = splitPostContentHooks[variant] || splitPostContentHooks.standard;
return (
);
}
);
SplitPost.displayName = "SplitPost";
// Export template configurations
export const splitPostTemplates = {
standard: {
id: "splitPostStandard",
name: "Standard Split Post",
description: "Classic split layout with post content and image",
component: SplitPost,
defaultProps: { variant: "standard" as const }
},
author: {
id: "splitPostAuthor",
name: "Author-Focused Split Post",
description: "Split layout highlighting author information",
component: SplitPost,
defaultProps: { variant: "author" as const }
},
media: {
id: "splitPostMedia",
name: "Media-Focused Split Post",
description: "Split layout optimized for media content",
component: SplitPost,
defaultProps: { variant: "media" as const }
},
sidebar: {
id: "splitPostSidebar",
name: "Sidebar Split Post",
description: "Split layout with sidebar-style navigation",
component: SplitPost,
defaultProps: { variant: "sidebar" as const }
},
hero: {
id: "splitPostHero",
name: "Hero Split Post",
description: "Hero-style split layout for featured posts",
component: SplitPost,
defaultProps: { variant: "hero" as const }
}
};