😽

【Drizzle ORM】NextJs14 と Drizzle ORM【#２１ Navbar2】

2024/09/10に公開

Next.js

【#２１ Navbar2】

YouTube: https://youtu.be/K-Bg8WZs-mQ
https://youtu.be/K-Bg8WZs-mQ

今回はナビゲーションのリンクを実装します。

components/navbar/index.tsx

import Link from "next/link";
import { Loader2 } from "lucide-react";
import {
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton,
  ClerkLoading,
  ClerkLoaded,
} from "@clerk/nextjs";

import { Button } from "@/components/ui/button";

import { NavList } from "./nav-list";

const navItem = [
  { href: "/", label: "Home" },
  { href: "/profile", label: "Profile" },
];

export const Navbar = () => {
  return (
    <div className="w-full py-3 px-6">
      <div className="w-full max-w-screen-2xl mx-auto flex items-center justify-between">
        <Link href="/">
          <h1 className="text-2xl font-bold">My App</h1>
          <p className="text-sm font-semibold text-muted-foreground">
            Nextjs Hono Drizzle
          </p>
        </Link>
        <nav className="flex items-center gap-x-3">
          <div>
            <NavList navItem={navItem} />
          </div>
          <ClerkLoading>
            <div className="flex items-center justify-center">
              <Loader2 className="size-7 animate-spin" />
            </div>
          </ClerkLoading>
          <ClerkLoaded>
            <SignedOut>
              <Button asChild>
                <SignInButton />
              </Button>
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </ClerkLoaded>
        </nav>
      </div>
    </div>
  );
};

components/navbar/nav-list.tsx

import { NavListItem } from "./nav-list-item";

type Props = {
  navItem: {
    href: string;
    label: string;
  }[];
};

export const NavList = ({ navItem }: Props) => {
  return (
    <ul className="flex items-center gap-x-4">
      {navItem.map((item) => (
        <NavListItem key={item.label} href={item.href} label={item.label} />
      ))}
    </ul>
  );
};

components/navbar/nav-list-item.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

import { cn } from "@/lib/utils";

type Props = {
  href: string;
  label: string;
};

export const NavListItem = ({ href, label }: Props) => {
  const pathname = usePathname();
  const isActive = pathname === href;
  return (
    <li>
      <Link
        href={href}
        className={cn(
          "text-slate-500 hover:text-slate-800",
          isActive && "text-slate-900"
        )}
      >
        {label}
      </Link>
    </li>
  );
};

【#２１ Navbar2】

Discussion