import React from 'react'; import { useNavigate } from 'react-router-dom'; import { ArrowLeft, Github, ExternalLink } from 'lucide-react'; export const BlogLayout = ({ children }) => { const navigate = useNavigate(); return (
{/* Blog Nav */} {children} {/* Footer */}
); }; /* ─── Reusable Article Sub-Components ─── */ export const Section = ({ num, title, children }) => (
{title && (

{num !== 'References' && num && {num}.} {title} {num === 'References' && References}

)} {children}
); export const SubSection = ({ title, children }) => (

{title}

{children}
); export const P = ({ children, style = {} }) => (

{children}

); export const CodeBlock = ({ children }) => (
{children}
); export const ArticleHeader = ({ badges, title, meta }) => ( <>
{badges.map((b, i) => {b.text})}

{title}

{meta.map((m, i) => {m})}
); export const RefList = ({ refs }) => (
{refs.map((ref, i) => (
{ref.authors} ({ref.year}). {ref.title}. {ref.venue}.{' '} {ref.url && [Link] }
))}
); export const BackCTA = () => { const navigate = useNavigate(); return (
GitHub
); };