WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Changes

Browse Source
This commit is contained in:
Clintchiz
2025-08-22 21:33:32 +05:30
parent a932ecef90
commit b5881fb785
6 changed files with 204 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FieldRow.astro
+1 -1
View File
@@ -50,7 +50,7 @@ const lgCols = Math.max(1, Number(cols || 0));
connected ? "wr:lg:gap-0" : "wr:lg:gap-4",
// Equal widths on lg
equal && layout === "flex" && "wr:lg:[&>*]:wr:flex-1",
equal && layout === "flex" && "wr:lg:[&>*]:flex-1",
className
)}
style={
src/layouts/ComponentLayout.astro
+3
View File
@@ -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>
src/layouts/Layout.astro
+172
View File
@@ -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>
src/pages/dashboard.astro
+12
View File
@@ -0,0 +1,12 @@
---
// pages/dashboard.astro
import Base from "../layouts/Base.astro";
const breadcrumbItems = [
{ label: "Dashboard", href: "/dashboard" },
{ label: "Analytics", href: "/dashboard/analytics" },
{ label: "Overview" },
];
---
<Base />
src/pages/drawer.astro
+7 -9
View File
@@ -56,7 +56,7 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
<button
type="button"
id="cancle-button"
class="wr:px-4 wr:py-2 wr:text-muted-foreground wr:rounded-lg hover:wr:bg-muted"
class="wr:px-4 wr:py-2 wr:text-muted-foreground wr:rounded-lg wr:hover:bg-muted"
>Cancel</button
>
<button
@@ -68,7 +68,7 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
<Drawer position="left" size="280px" id="nav-drawer">
<div slot="trigger">
<button class="wr:p-2 wr:rounded-lg wr:hover:wr:bg-muted">
<button class="wr:p-2 wr:rounded-lg wr:hover:bg-muted">
<svg
class="wr:w-6 wr:h-6"
viewBox="0 0 24 24"
@@ -89,7 +89,7 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
<nav class="wr:space-y-1">
<a
href="/"
class="wr:flex wr:items-center wr:gap-3 wr:px-3 wr:py-2 wr:rounded-lg wr:hover:wr:bg-muted"
class="wr:flex wr:items-center wr:gap-3 wr:px-3 wr:py-2 wr:rounded-lg wr:hover:bg-muted"
>
<svg
class="wr:w-5 wr:h-5"
@@ -104,7 +104,7 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
</a>
<a
href="/about"
class="wr:flex wr:items-center wr:gap-3 wr:px-3 wr:py-2 wr:rounded-lg wr:hover:wr:bg-muted"
class="wr:flex wr:items-center wr:gap-3 wr:px-3 wr:py-2 wr:rounded-lg wr:hover:bg-muted"
>
<svg
class="wr:w-5 wr:h-5"
@@ -119,7 +119,7 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
</a>
<a
href="/contact"
class="wr:flex wr:items-center wr:gap-3 wr:px-3 wr:py-2 wr:rounded-lg wr:hover:wr:bg-muted"
class="wr:flex wr:items-center wr:gap-3 wr:px-3 wr:py-2 wr:rounded-lg wr:hover:bg-muted"
>
<svg
class="wr:w-5 wr:h-5"
@@ -145,9 +145,7 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
blurBackground={true}
>
<div slot="trigger">
<button
class="wr:relative wr:p-2 wr:rounded-lg wr:hover:wr:bg-muted"
>
<button class="wr:relative wr:p-2 wr:rounded-lg wr:hover:bg-muted">
<svg
class="wr:w-6 wr:h-6"
viewBox="0 0 24 24"
@@ -267,7 +265,7 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
class="wr:p-4 wr:border-t wr:border-border wr:flex wr:gap-3 wr:justify-end"
>
<button
class="wr:px-4 wr:py-2 wr:text-muted-foreground wr:rounded-lg wr:border wr:border-border hover:wr:bg-muted"
class="wr:px-4 wr:py-2 wr:text-muted-foreground wr:rounded-lg wr:border wr:border-border wr:hover:bg-muted"
>
Reset
</button>
src/pages/tooltip.astro
+9 -9
View File
@@ -32,7 +32,7 @@ import { Icon } from "astro-icon/components";
>
<button
slot="trigger"
class="wr:inline-flex wr:items-center wr:gap-2 wr:h-9 wr:px-3 wr:rounded-full wr:bg-background/70 wr:backdrop-blur-sm wr:ring-1 wr:ring-border/60 hover:wr:ring-border wr:text-sm"
class="wr:inline-flex wr:items-center wr:gap-2 wr:h-9 wr:px-3 wr:rounded-full wr:bg-background/70 wr:backdrop-blur-sm wr:ring-1 wr:ring-border/60 wr:hover:ring-border wr:text-sm"
>
<Icon name="mdi:eye" class="wr:size-4" />
Quick preview
@@ -54,11 +54,11 @@ import { Icon } from "astro-icon/components";
</p>
<div class="wr:flex wr:gap-2">
<button
class="wr:h-8 wr:px-3 wr:text-xs wr:rounded-md wr:bg-primary wr:text-primary-foreground hover:wr:bg-primary/90"
class="wr:h-8 wr:px-3 wr:text-xs wr:rounded-md wr:bg-primary wr:text-primary-foreground wr:hover:bg-primary/90"
>Use</button
>
<button
class="wr:h-8 wr:px-3 wr:text-xs wr:rounded-md wr:border wr:border-border hover:wr:bg-muted/60"
class="wr:h-8 wr:px-3 wr:text-xs wr:rounded-md wr:border wr:border-border wr:hover:bg-muted/60"
>Details</button
>
</div>
@@ -80,7 +80,7 @@ import { Icon } from "astro-icon/components";
<button
slot="trigger"
type="button"
class="wr:align-middle wr:ml-1 wr:inline-flex wr:items-center wr:justify-center wr:size-5 wr:rounded-full wr:ring-1 wr:ring-border/60 hover:wr:ring-border"
class="wr:align-middle wr:ml-1 wr:inline-flex wr:items-center wr:justify-center wr:size-5 wr:rounded-full wr:ring-1 wr:ring-border/60 wr:hover:ring-border"
aria-label="Password rules"
>
<Icon
@@ -137,20 +137,20 @@ import { Icon } from "astro-icon/components";
<div class="wr:w-52 wr:py-1">
<button
data-dd-item
class="wr:w-full wr:flex wr:items-center wr:gap-2 wr:px-3 wr:py-2 wr:text-sm wr:rounded-md hover:wr:bg-muted/60"
class="wr:w-full wr:flex wr:items-center wr:gap-2 wr:px-3 wr:py-2 wr:text-sm wr:rounded-md wr:hover:bg-muted/60"
>
<Icon name="mdi:download" class="wr:size-4" /> Download
</button>
<button
data-dd-item
class="wr:w-full wr:flex wr:items-center wr:gap-2 wr:px-3 wr:py-2 wr:text-sm wr:rounded-md hover:wr:bg-muted/60"
class="wr:w-full wr:flex wr:items-center wr:gap-2 wr:px-3 wr:py-2 wr:text-sm wr:rounded-md wr:hover:bg-muted/60"
>
<Icon name="mdi:pencil" class="wr:size-4" /> Rename
</button>
<div class="wr:h-px wr:bg-border/60 wr:my-1"></div>
<button
data-dd-item
class="wr:w-full wr:flex wr:items-center wr:gap-2 wr:px-3 wr:py-2 wr:text-sm wr:text-danger wr:rounded-md hover:wr:bg-danger/10"
class="wr:w-full wr:flex wr:items-center wr:gap-2 wr:px-3 wr:py-2 wr:text-sm wr:text-danger wr:rounded-md wr:hover:bg-danger/10"
>
<Icon name="mdi:trash-can" class="wr:size-4" /> Delete
</button>
@@ -194,11 +194,11 @@ import { Icon } from "astro-icon/components";
</p>
<div class="wr:flex wr:justify-end wr:gap-2">
<button
class="wr:h-8 wr:px-3 wr:text-xs wr:rounded-md wr:border wr:border-border hover:wr:bg-muted/60"
class="wr:h-8 wr:px-3 wr:text-xs wr:rounded-md wr:border wr:border-border wr:hover:bg-muted/60"
>Skip</button
>
<button
class="wr:h-8 wr:px-3 wr:text-xs wr:rounded-md wr:bg-primary wr:text-primary-foreground hover:wr:bg-primary/90"
class="wr:h-8 wr:px-3 wr:text-xs wr:rounded-md wr:bg-primary wr:text-primary-foreground wr:hover:bg-primary/90"
>Next</button
>
</div>