systems-obscure/src/pages/home.jsx

import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"
import gruvboxComputer from "../images/gruvbox-computer.svg"
import EolasListing from "@/components/EolasListing"
import CodeStats from "../containers/CodeStats"
// import TodayILearned from "@/containers/TodayILearned"

const HomePage = () => {
	const { posts } = usePosts()
	return (
		<MainTemplate>
			<div className="container mx-auto p-4 grow">
				<div className="space-my-8">
					<section className="space-y-4">
						<div className="gap-6 flex flex-col items-center sm:flex-row">
							<div className="scanlined">
								<img src={gruvboxComputer} className="md:w-80 w-50" />
							</div>
							<div>
								<h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
									<div className="scanlined inline-block py-1 px-2">
										systems obscure
									</div>
								</h1>
								<p className="text-center sm:text-left md:text-left text-muted condensed font-medium text-lg">
									Software engineer at ITV, formerly BBC. This is my technical
									scrapbook and digital garden.
								</p>
							</div>
						</div>
					</section>
				</div>
			</div>

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

			<PostListing
				title="highlights"
				posts={posts.filter((post) => post.tags.includes("highlight"))}
			/>

			<div className="container mx-auto p-4 grow">
				<div className="space-my-8">
					<section className="container">
						<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined inline-block px-1">
							projects
						</h2>
						<ul>
							<li className="pb-2">
								<a
									className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
									href="https://eolas.systemsobscure.net"
									target="_blank"
								>
									eolas
								</a>
							</li>
							<li>
								<p className="">
									A public frontend for my local Zettelkasten created with
									NodeJS, Python and React.
								</p>
							</li>
						</ul>
					</section>
				</div>
			</div>
			<CodeStats />
			<EolasListing />
		</MainTemplate>
	)
}

export { HomePage }