11. components/left-sidebar.tsxを作る

Cursor

app/layout.tsxで3カラムにしたので、left-sidebar.tsxとright-sidebar.tsxを作る

left-sidebar.tsxにはカテゴリーをリスト表示する

import Link from "next/link";

const categories = [
    { name: "Taxes", href: "/categories/taxes" },
    { name: "Insurance", href: "/categories/insurance" },
];

export function LeftSidebar() {
    return (
      <aside className="space-y-8">
        <section>
          <h2 className="mb-4 text-lg font-semibold">
            Categories
          </h2>
  
          <nav>
            <ul className="space-y-2">
              {categories.map((category) => (
                <li key={category.href}>
                  <Link
                    href={category.href}
                    className="block rounded-lg px-3 py-2 text-sm transition hover:bg-gray-100"
                  >
                    {category.name}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </section>
      </aside>
    );
}
BACK