Blog

import { Footer } from "@/registry/components/footer"
import { Header } from "@/registry/components/header"
import { BlogArticle } from "./components/blog-article"

const demoHeader = {
  title: "XACLABS.DEV",
  description: "Open Source Organization",
  menus: [
    { title: "Blocks", href: "/blocks" },
    { title: "Components", href: "/docs" },
    { title: "Blog", href: "/articles" },
  ],
}

const demoFooter = {
  title: "XaC Labs UI",
  description: "A modern, open source component library.",
  copyright: "XaC Labs",
  menus: [
    {
      title: "Documentation",
      children: [
        { title: "Introduction", href: "/docs" },
        { title: "Components", href: "/docs/components/header" },
      ],
    },
  ],
}

const demoArticle = {
  title: "Getting Started with XaC Labs",
  description:
    "Learn how to build everything as code with XaC Labs tools and patterns.",
  date: new Date("2024-12-01"),
  author: { name: "XaC Labs Team" },
  tags: ["xac", "getting-started"],
}

export default function BlogBlockPage() {
  return (
    <>
      <Header header={demoHeader} />
      <BlogArticle {...demoArticle}>
        <h2>Introduction</h2>
        <p>
          This is a demo blog article showing the BlogArticle block component.
        </p>
        <h2>Getting Started</h2>
        <p>Follow these steps to get started with XaC Labs...</p>
      </BlogArticle>
      <Footer footer={demoFooter} />
    </>
  )
}