从零搭建基于 AI 问答平台(3) 编写Navbar/暗黑模式

2025-03-10

Word count: 455 | Reading time≈ 2 min

我们需要导航栏里添加Logo/暗黑模式/用户按钮，按下面步骤：

添加文件 ``:

import { UserButton } from '@clerk/nextjs';
import Link from 'next/link';
import React from 'react'
import { ThemeToggle } from './ThemeToggle';

type Props = {}

function Navbar({}: Props) {
  return (
    <div className="fixed inset-x-0 top-0 bg-white dark:bg-gray-950 z-[10] h-fit border-b border-zinc-300  py-2 ">
      <div className="flex items-center justify-between h-full gap-2 px-8 mx-auto max-w-7xl">
        {/* Logo */}
        <Link href={"/"} className="flex items-center gap-2">
          <p className="rounded-lg border-2 border-b-4 border-r-4 border-black px-2 py-1 text-xl font-bold transition-all hover:-translate-y-[2px] md:block dark:border-white">
            SmartQuiz
          </p>
        </Link>
        <div className="flex items-center">
          <ThemeToggle className='mr-4' />
          <UserButton />
        </div>
      </div>
    </div>
  );
}

export default Navbar

修改 src/app/layout.tsx:

return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={cn("antialiased min-h-screen pt-10")}
      >
        <Providers>
          <Navbar />
          {children}
        </Providers>
      </body>
    </html>
  );

添加 Theme 支持

安装包：

1 2	bunx --bun shadcn@latest add dropdown-menu bun add next-themes

修改 src/components/Providers.tsx

"use client";

import React from "react";
import { ClerkProvider } from "@clerk/nextjs";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes";

const Providers = ({ children }: ThemeProviderProps) => {
  return (
    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
      <ClerkProvider>
        {children}
      </ClerkProvider>
    </NextThemesProvider>
  );
};

export default Providers;