nextjs-tailwindcss-headlessUI-project/app/components/page.tsx

import Link from "next/link";
import fs from "fs";
import path from "path";
import { ArrowDownIcon } from "@heroicons/react/24/outline";

async function getData() {
  let dirs: string[] = [];
  try {
    fs.readdirSync(__dirname).filter((item) => {
      const p = path.resolve(__dirname, item);
      const stat = fs.statSync(p);
      if (stat.isDirectory()) dirs.push(item);
    });
  } catch (e) {
    console.error(e);
  }

  return dirs;
}

export default async function Page() {
  const list = await getData();
  return (
    <div className="flex-1 flex flex-col justify-center items-start">
      <div className="flex justify-center items-center gap-2">
        <span>Components List</span>
        <ArrowDownIcon width={18} height={18} />
      </div>
      <div className="flex flex-col justify-start">
        {list.map((i) => {
          return (
            <li key={i}>
              <Link href={`/components/${i}`}>{i}</Link>
            </li>
          );
        })}
      </div>
    </div>
  );
}