ダークモードボタン、ユーザーボタンのあるヘッダーを作成する

これ作ります。

https://v0.dev/

shadcn headerと入力するとたたき台が生成されるので使ってヘッダーを作ります

前提

• Clerk
• Remix Vite
• Shadcn/ui

やり方

1. v0でshadui headerと入力する
2. ChatGPTで整える
3. コンポーネントフォルダに実装する

app\components\Header.tsx

import { Link } from "@remix-run/react";
import { SignInButton, UserButton, useAuth } from "@clerk/remix";
import { Button } from "./ui/button";
import { ModeToggle } from "./dark-mode-toggle";

export default function HeaderComponent() {
  const { userId } = useAuth();

  // ログイン状態に基づいたレンダリングコンテンツを取得する関数
  function getUserRelatedContent() {
    if (userId) {
      return <UserButton />;
    } else {
      return (
        <SignInButton>
          <Button variant="ghost">ログイン</Button>
        </SignInButton>
      );
    }
  }

  return (
    <header className="flex items-center justify-between px-4 py-3">
      <Link to="#" className="flex items-center">
        <p>Acme Inc</p>
      </Link>
      <div className="flex items-center gap-4">
        <ModeToggle />
        {getUserRelatedContent()}
      </div>
    </header>
  );
}