内部装饰网站

1. 安装

npx create-next-app@14 interior # 使用14版本react18版本
pnpm add @headlessui/react  
pnpm add @heroicons/react
pnpm add @radix-ui/react-dialog
pnpm add @radix-ui/react-icons 
pnpm add @radix-ui/react-slot
pnpm add framer-motion clsx   
pnpm add lucide-react 
pnpm add react-countup
pnpm add swiper    
pnpm add tailwindcss-animatecss
pnpm add tailwind-merge
pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add input
pnpm dlx shadcn@latest add sheet
pnpm dlx shadcn@latest add textarea
pnpm add react-icons   

 pnpm add swiper

2. 安装dark模式

pnpm add next-themes

component/theme-provider.jsx

"use client";

import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({ children, ...props }) {
 return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

components/ThemeToggle.jsx

"use client";

import { useTheme } from "next-themes";
import { Button } from "./ui/button";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";

const ThemeToggler = () => {
 const { theme, setTheme } = useTheme();
 return (
  <div>
   <Button>
    <SunIcon />
    <MoonIcon />
   </Button>
  </div>
 );
};

export default ThemeToggler;

layout.js

// Theme Provider
import { ThemeProvider } from "@/components/theme-provider";
export default function RootLayout({ children }) {
 return (
    <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
     <Header />
     {children}
     <Footer />
    </ThemeProvider>
     );
}