[dyad] Changed header theme color to #ffc905 - wrote 4 file(s)

src/components/Header.tsx

@@ -1,45 +1,45 @@
 import { useState } from 'react';
-import { Search, Menu, Box } from 'lucide-react';
-import { Input } from '@/components/ui/input';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
-import { Button } from './ui/button';
+import { Button } from '@/components/ui/button';
+import { Menu } from 'lucide-react';
 import { SidebarNav } from './SidebarNav';
+import { MadeWithDyad } from './made-with-dyad';
 
-const Header = () => {
+export const Header = () => {
   const [isSheetOpen, setSheetOpen] = useState(false);
 
+  const handleLinkClick = () => {
+    setSheetOpen(false);
+  };
+
   return (
-    <header className="bg-primary-dark p-4 flex justify-between items-center text-white">
+    <header className="bg-dyadYellow p-4 flex justify-between items-center text-white">
       <div className="flex items-center">
         <Sheet open={isSheetOpen} onOpenChange={setSheetOpen}>
           <SheetTrigger asChild>
-            <Button variant="ghost" size="icon" className="md:hidden mr-2 hover:bg-slate-blue">
+            <Button variant="ghost" size="icon" className="md:hidden text-white">
               <Menu className="h-6 w-6" />
+              <span className="sr-only">Toggle navigation</span>
             </Button>
           </SheetTrigger>
-          <SheetContent side="left" className="w-64 p-4">
+          <SheetContent side="left" className="p-0 w-64">
-            <div className="flex items-center mb-8">
+            <div className="flex h-full flex-col bg-gray-100">
-              <Box className="h-8 w-8 text-slate-700 mr-2" />
+              <div className="p-4 border-b">
-              <h1 className="text-xl font-bold text-gray-800">JEI Stock Take</h1>
+                <h2 className="text-xl font-semibold text-gray-800">Navigation</h2>
+              </div>
+              <div className="flex-1 overflow-y-auto p-4">
+                <SidebarNav onLinkClick={handleLinkClick} />
+              </div>
+              <MadeWithDyad />
             </div>
-            <SidebarNav onLinkClick={() => setSheetOpen(false)} />
           </SheetContent>
         </Sheet>
-        <h2 className="text-lg font-semibold uppercase hidden md:block text-white">Dashboard</h2>
+        <h1 className="text-xl font-semibold ml-4 md:ml-0">Stock Management</h1>
       </div>
-      <div className="flex items-center space-x-4 w-full md:w-auto justify-end">
+      {/* You can add user profile or other header elements here */}
-        <div className="relative w-full max-w-xs">
+      <div>
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+        {/* Example: <Avatar>...</Avatar> */}
-          <Input
-            type="search"
-            placeholder="Search..."
-            className="pl-10 bg-slate-blue border-none placeholder-gray-200 text-white focus:bg-slate-blue"
-          />
-        </div>
-        <img src="/jei-logo.svg" alt="JEI Logo" className="h-8 w-8" />
       </div>
     </header>
   );
-};
+};
-
-export default Header;

src/components/Layout.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
+import Sidebar from './Sidebar'; // Corrected import
-import Sidebar from './Sidebar';
+import { Header } from './Header';
-import Header from './Header';
 
-const Layout = ({ children }: { children: React.ReactNode }) => {
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
-    <div className="flex h-screen bg-gray-100">
+    <div className="flex min-h-screen bg-gray-50">
       <Sidebar />
-      <div className="flex-1 flex flex-col overflow-hidden">
+      <div className="flex-1 flex flex-col">
         <Header />
-        <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 p-4 md:p-8">
+        <main className="flex-1 p-6 overflow-auto">
           {children}
         </main>
       </div>

tailwind.config.js

@@ -0,0 +1,79 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+          dark: "#1a202c", // Existing primary-dark
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(----secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        dyadYellow: "#ffc905", // New custom color
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}