Blog Page: Diary-Style Mood Entry Posts for The Diary

import MoodEntry from "./components/MoodEntry";

export default function Blog() {
  return (
    <div className="max-w-xl mx-auto">
      <h1 className="font-pixel text-2xl text-red-500 mb-8 text-center">
        The Diary
      </h1>

      {/* Most recent post first */}
      <MoodEntry
        title="Why is CSS so hard?"
        date="Nov 14, 2023 @ 11:42 PM"
        mood="Frustrated"
        music="Linkin Park - In The End"
        content={
          <>
            <p className="mb-2">
              Spent 4 hours today trying to center a div. I thought Flexbox was
              supposed to fix this? Sometimes I miss the days when we just used
              tables for everything. It was ugly, but at least you knew where
              things were going to end up.
            </p>
            <p>
              Anyway, going to grab a Hot Pocket and try again. Wish me luck.
            </p>
          </>
        }
      />

      <MoodEntry
        title="Finally got it working!!!"
        date="Nov 12, 2023 @ 02:15 AM"
        mood="Ecstatic"
        music="Daft Punk - Harder, Better, Faster, Stronger"
        content={
          <>
            <p>
              OMG I finally fixed that weird bug in the authentication flow!
              Turns out I was mutating state directly. Rookie mistake, I know.
              But seeing that green success message pop up was the best feeling
              ever.
            </p>
          </>
        }
      />

      {/* Add a new entry ↓ */}
      {/* <MoodEntry
        title="Discovered Tailwind CSS"
        date="Jan 03, 2024 @ 09:30 AM"
        mood="Amazed"
        music="Fatboy Slim - Right Here, Right Now"
        content={<p>I can't believe I was writing raw CSS this whole time.</p>}
      /> */}
    </div>
  );
}