systems-obscure/src/pages/home.tsx

import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"
import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Link } from "react-router"

const HomePage = () => {
  const { posts } = usePosts()
  return (
    <MainTemplate>
      <div className="mb-7 border border-foreground py-7 px-6 dark:bg-sidebar">
        <h1 className="scroll-m-20 text-left text-2xl font-semibold">
          Another software engineer with a blog
        </h1>
        <p className="leading-[1.7] [&:not(:first-child)]:mt-5">
          I'm a self-taught software engineer currently working at ITV,
          previously at the BBC. This blog is a technical scrapbook and digital
          garden.
        </p>
      </div>
      {/*
		 <Card className="mb-8 rounded-none">
        <CardHeader>
          <h1 className="scroll-m-20 text-left text-2xl font-semibold">
            Another software engineer with a blog!
          </h1>
        </CardHeader>
        <CardContent>
          <p className="leading-[1.7] [&:not(:first-child)]:mt-7">
            I'm a self-taught software engineer currently working at ITV,
            previously at the BBC. This blog is a technical scrapbook and
            digital garden.
          </p>
        </CardContent>
        <CardFooter>
          <Button asChild>
            <Link to="/about">About</Link>
          </Button>
        </CardFooter>
      </Card>
  <Button asChild>
        <Link to="/about">About</Link>
      </Button>



		*/}

      <PostListing
        title="Recent posts"
        posts={posts.slice(0, 5)}
        showAllButton
      />
    </MainTemplate>
  )
}

export { HomePage }