New Changes

2025-08-22 21:33:32 +05:30
parent a932ecef90
commit b5881fb785
6 changed files with 204 additions and 19 deletions
@@ -59,6 +59,9 @@ import Base from "./Base.astro";
                <li class="list-item">
                    <a href="/tooltip">Tooltip</a>
                </li>
+                <li class="list-item">
+                    <a href="/dashboard">Dashboard</a>
+                </li>
            </ul>
        </div>

@@ -0,0 +1,172 @@
+---
+// Layout.astro - Main Layout Wrapper
+export interface Props {
+    title?: string;
+    description?: string;
+    class?: string;
+    theme?: "light" | "dark" | "system";
+    lang?: string;
+    viewport?: string;
+    charset?: string;
+}
+
+const {
+    title = "Dashboard",
+    description = "Modern dashboard application",
+    class: className = "",
+    theme = "system",
+    lang = "en",
+    viewport = "width=device-width, initial-scale=1.0",
+    charset = "UTF-8",
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang={lang} data-theme={theme}>
+    <head>
+        <meta charset={charset} />
+        <meta name="viewport" content={viewport} />
+        <meta name="description" content={description} />
+        <title>{title}</title>
+
+        <!-- Favicon -->
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
+
+        <!-- Theme Script -->
+        <script is:inline>
+            // Theme initialization
+            function getThemePreference() {
+                if (
+                    typeof localStorage !== "undefined" &&
+                    localStorage.getItem("theme")
+                ) {
+                    return localStorage.getItem("theme");
+                }
+                return window.matchMedia("(prefers-color-scheme: dark)").matches
+                    ? "dark"
+                    : "light";
+            }
+
+            function setTheme(theme) {
+                document.documentElement.dataset.theme = theme;
+                if (typeof localStorage !== "undefined") {
+                    localStorage.setItem("theme", theme);
+                }
+            }
+
+            // Set initial theme
+            const theme = getThemePreference();
+            setTheme(theme);
+
+            // Listen for theme changes
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                .addEventListener("change", (e) => {
+                    if (!localStorage.getItem("theme")) {
+                        setTheme(e.matches ? "dark" : "light");
+                    }
+                });
+        </script>
+    </head>
+
+    <body
+        class={`wr:min-h-screen wr:bg-background wr:font-sans wr:antialiased ${className}`}
+    >
+        <div class="wr:min-h-screen wr:flex wr:flex-col">
+            <slot />
+        </div>
+
+        <!-- Global Scripts -->
+        <script is:inline>
+            // Global utilities
+            window.dashboardUtils = {
+                toggleTheme() {
+                    const current = document.documentElement.dataset.theme;
+                    const next = current === "dark" ? "light" : "dark";
+                    document.documentElement.dataset.theme = next;
+                    localStorage.setItem("theme", next);
+                },
+
+                setTheme(theme) {
+                    document.documentElement.dataset.theme = theme;
+                    localStorage.setItem("theme", theme);
+                },
+            };
+        </script>
+    </body>
+</html>
+
+<style is:global>
+    html {
+        font-family: "Inter", system-ui, sans-serif;
+        scroll-behavior: smooth;
+    }
+
+    /* Theme CSS Variables */
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+        --primary: 221.2 83.2% 53.3%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 210 40% 96%;
+        --secondary-foreground: 222.2 84% 4.9%;
+        --muted: 210 40% 96%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --accent: 210 40% 96%;
+        --accent-foreground: 222.2 84% 4.9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 221.2 83.2% 53.3%;
+        --success: 142.1 76.2% 36.3%;
+        --warning: 47.9 95.8% 53.1%;
+        --danger: 0 84.2% 60.2%;
+    }
+
+    [data-theme="dark"] {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+        --primary: 217.2 91.2% 59.8%;
+        --primary-foreground: 222.2 84% 4.9%;
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 224.3 76.3% 94.1%;
+        --success: 142.1 70.6% 45.3%;
+        --warning: 47.9 95.8% 53.1%;
+        --danger: 0 62.8% 30.6%;
+    }
+
+    * {
+        border-color: hsl(var(--border));
+    }
+
+    body {
+        background-color: hsl(var(--background));
+        color: hsl(var(--foreground));
+    }
+</style>