text: import Head from "next/head";
  import Link from "next/link";
  
  import { getSortedPostsData } from "../lib/posts";
  
  import { Button, Date, Layout } from "../components";
  
  import {
    headingMd,
    headingLg,
    padding1px,
    list,
    listItem,
    lightText,
  } from "../styles/utils.module.css";
  
  export async function getStaticProps() {
    const allPostsData = getSortedPostsData();
    return {
      props: { allPostsData },
    };
  }
  
  export default function Home({ allPostsData }) {
    return (
      <Layout home>
        <Head>
          <title>librari</title>
        </Head>
        <section className={headingLg}>
          <p>😷 hey bitches. it me.</p>
        </section>
        <section className="w-full">
          <h2 className={headingLg}>Where to start?</h2>
          <div className="grid grid-cols-2">
            <Button name="Search" href="/search" />
            <Button name="Profile" href="/profile" />
          </div>
        </section>
        <div className="w-full my-10 border-2 rounded border-gray-300 border-opacity-10"></div>
        <section className={`w-full ${headingMd} ${padding1px}`}>
          <h2 className={headingLg}>About</h2>
          <ul className={list}>
            {allPostsData.map(({ id, date, title }) => (
              <li className={listItem} key={id}>
                <Link href={`/posts/${id}`}>
                  <a>{title}</a>
                </Link>
                <br />
                <small className={lightText}>
                  <Date dateString={date} />
                </small>
              </li>
            ))}
          </ul>
        </section>
      </Layout>
    );
  }
  