making simple header componenet with theme toggle and github repo lin…

…k and setup react routers

src/App.jsx

@@ -1,13 +1,16 @@
-import { Button } from "@/components/ui/button"
 import { ThemeProvider } from "@/components/theme-provider"
-import { ModeToggle } from "@/components/mode-toggle"
+import { Route, Routes } from "react-router-dom"
+import Home from "@/pages/Home"
+import Header from "@/layouts/header"
 
 function App() {
 
   return(
-    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-      <Button>Hello Bro</Button>
-      <ModeToggle />
+    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+      <Header />
+      <Routes>
+        <Route path="React-Project/" element={<Home />} />
+      </Routes>
     </ThemeProvider>
   )
 }

src/components/mode-toggle.jsx

@@ -16,7 +16,7 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button className='rounded-sm' variant="ghost" size="icon">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>

src/components/ui/NavLinks.jsx

@@ -0,0 +1,22 @@
+import { Button } from "@/components/ui/button"
+import PropTypes from 'prop-types';
+
+function NavLinks(props) {
+
+  return(
+    <a target="_blank" href={props.link} rel="noopener" tabIndex="-1">
+      <Button variant="ghost"  size='icon'>
+        <img className="size-4" src={props.logo} alt={props.name} />
+        <span className="sr-only">{props.name}</span>
+      </Button>
+    </a>
+  )
+}
+
+NavLinks.propTypes = {
+  link: PropTypes.string.isRequired,
+  logo: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
+}
+
+export default NavLinks

src/index.css

@@ -1,51 +1,53 @@
+@import url('https://fonts.googleapis.com/css2?family=Micro+5&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 224 71.4% 4.1%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 224 71.4% 4.1%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 262.1 83.3% 57.8%;
     --radius: 0rem;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 263.4 70% 50.4%;
   }
 }
 
@@ -57,3 +59,8 @@
     @apply bg-background text-foreground;
   }
 }
+@layer components {
+  .focusing {
+    @apply focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+  }
+}

src/layouts/header.jsx

@@ -1,4 +1,57 @@
+// Assets
+import githubLogoDark from '../assets/svg/github-mark-white.svg';
+import githubLogoLight from '../assets/svg/github-mark.svg';
 
-export default Header() {
-
-}
+// Components
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { ModeToggle } from '@/components/mode-toggle';
+import NavLinks from '@/components/ui/NavLinks';
+import { useTheme } from '@/components/theme-provider';
+
+function Header() {
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    // Set the theme based on system preference
+    if (theme === 'system') {
+      // Use the system's color scheme preference
+      setTheme(window.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light');
+    }
+  });
+
+  return (
+    <header className="container px-6 py-3 flex justify-between items-center backdrop-blur-3xl">
+      <Logo />
+      <Navigation />
+    </header>
+  );
+}
+
+function Logo() {
+  return (
+    <div className="logo">
+      <Link className="focusing" to="React-Project/">
+        <span className="font-mono">React</span>
+        <span className="font-micro text-[24px] text-primary ps-[1px]">Project</span>
+      </Link>
+    </div>
+  );
+}
+
+function Navigation() {
+  const { theme } = useTheme();
+
+  return (
+    <nav className="flex items-center gap-6">
+      <NavLinks
+        logo={theme === 'dark' ? githubLogoDark : githubLogoLight}
+        name="Github"
+        link="https://github.com/No0ne003/React-Project"
+      />
+      <ModeToggle />
+    </nav>
+  );
+}
+
+export default Header;

src/main.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import { BrowserRouter } from 'react-router-dom'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 )

src/pages/Home.jsx

@@ -0,0 +1,11 @@
+
+
+function Home() {
+  return (
+    <>
+      <h1>Home</h1>
+    </>
+  )
+}
+
+export default Home

tailwind.config.js

@@ -71,6 +71,9 @@ export default {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      fontFamily: {
+        "micro": ['"Micro 5", sans-serif'],
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],