Next.js Discord

Discord Forum

Why is this working?

Unanswered
Erythrina gall wasp posted this in #help-forum
Open in Discord
Erythrina gall waspOP
Head.tsx
"use client"
import React, {useState} from 'react'
import Link from 'next/link'
const Head = () => {
    const [theme, setTheme] = useState("light");

    // Function to toggle between light and dark themes
    const toggleTheme = () => {
      if (theme === "light") {
        setTheme("dark");
        document.documentElement.classList.add("dark"); // Add dark mode class
      } else {
        setTheme("light");
        document.documentElement.classList.remove("dark"); // Remove dark mode class
      }
    };
  
  return (

<div className=''>
    <button
        className='bg-gradientButton text-smallText rounded-md p-1'
        onClick={toggleTheme}
      >
        {theme === "light" ? "Light" : "Dark"}
      </button>
       <Link href={"/signin"}>Sign In</Link>
    </div>
  )
}

export default Head

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Sidebar from "./components/Sidebar";
import Head from "./components/Head";




const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="light"  >
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-backgroundColor`}
      >
        <div className="flex gap-5">
          <div>
            <div className="bg-backgroundColor text-headerColor max-w-[310px] h-screen shadow-glow_box oberflow-y-auto md:min-w-[200px]">
              <Sidebar />
            </div>
          </div>
          <Head />
          {children}
        </div>
      </body>
    </html>
  );
}

1 Reply

Erythrina gall waspOP
why is this working