---
import { getCollection } from "astro:content";
import PageLayout from "@/layouts/Base";
import PostPreview from "@/components/blog/PostPreview";
import SocialList from "@/components/SocialList";
import { sortMDByDate } from "@/utils";

const MAX_POSTS = 10;
const allPosts = await getCollection("post");
const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS);
---

<PageLayout meta={{ title: "Home" }}>
	<section>
		<h1 class="title mb-6">Hey there!</h1>
		<p class="mb-4">
			My name is Steve. I'm a developer, technical writer, and creator with a desire to help build
			the future of the web. I'm also working on <a href="https://honeythread.xyz" target="_blank" rel="noopener noreferrer" class="cactus-link">HoneyThread</a>, an NFT powered subscription service for Creators.
		</p>
		<SocialList />
		<p>Or anywhere with my handle <span class="text-accent">@stevedylandev</span></p>
	</section>
	<section aria-label="Blog post list" class="mt-16">
		<h2 class="title mb-4 text-xl">Posts</h2>
		<ul class="space-y-4 sm:space-y-2">
			{
				allPostsByDate.map((p) => (
					<li class="flex flex-col gap-x-2 sm:flex-row">
						<PostPreview post={p} />
					</li>
				))
			}
		</ul>
	</section>
	<section class="mt-16">
		<h2 class="title mb-4 text-xl">Extras</h2>
		<ul class="space-y-4 sm:space-y-2">
			<li>
				<a
					href="https://ethglobal.com/showcase/cosmic-cowboys-3q0co"
					target="_blank"
					rel="noopener noreferrer"
					class="cactus-link inline-block"
					>🥇 Cosmic Cowboys
				</a>:
        <p class="inline-block sm:mt-2">EthGlobal 2023 hackathon winning project</p>
			</li>
			<li>
				<a
					href="https://stevedylanphoto.com"
					target="_blank"
					rel="noopener noreferrer"
					class="cactus-link inline-block"
					>📷 stevedylanphoto
				</a>:
				<p class="inline-block sm:mt-2">My personal photography portfolio</p>
			</li>
			<li>
				<a
					href="https://pinata.cloud"
					target="_blank"
					rel="noopener noreferrer"
					class="cactus-link inline-block"
					>🎉 Pinata
				</a>:
				<p class="inline-block sm:mt-2">Where I'm currently working as Head of Developer Relations</p>
			</li>
			<li>
				<a
					href="https://medium.com/@stevedsimkins"
					target="_blank"
					rel="noopener noreferrer"
					class="cactus-link inline-block"
					>💻 Medium
				</a>:
				<p class="inline-block sm:mt-2">Technical blog posts I've written for Pinata</p>
			</li>
		</ul>
	</section>
</PageLayout>