export { default } from "next-auth/middleware";

import { getSortedPostsData } from "@/utils/posts";
import { BlogTile } from "../components/BlogTile";

export default async () => {
  const allPostsData = await getSortedPostsData();
  return (
    <div className="h-full flex flex-col space-y-20">
      <div className="text-center text-5xl">All Blogs</div>
      <div className="grid grid-flow-row gap-5 decoration-0 grid-cols-4 h-full grid-rows-3">
        {allPostsData.map(({ id, date, title, about }) => (
          <BlogTile key={id} id={id} title={title} date={date} about={about} />
        ))}
      </div>
    </div>
  );
};

import { PostsMetadata } from "../../utils/posts";
import Link from "next/link";

export const BlogTile = ({ id, title, date, about }: PostsMetadata) => {
  return (
    <Link
      href={`/posts/${id}`}
      className="col-span-1 row-span-1 dark:bg-slate-600 bg-slate-300"
    >
      <div
        className="items-center h-full justify-center flex flex-col space-y-10 p-10 decoration-0"
      >
        <div className="flex flex-col items-start">
          <div className="font-bold text-lg">{title}</div>
          <div className="text-sm mt-3">Created: {date}</div>
        </div>
        <div className="font-semibold">{about}</div>
      </div>
    </Link>
  );
};

"use client";

import { signOut, useSession } from "next-auth/react";
import { redirect } from "next/navigation";

export const SignoutButton = () => {
  const { status } = useSession();

  if (status === "unauthenticated") {
    return redirect("/api/auth/signin");
  }

  return (
    <div>
      <button
        onClick={() => {
          console.log("here");
          signOut();
        }}
      >
        Signout
      </button>
    </div>
  );
};