feat: tune visual of web app admin panel

2026-05-11 23:06:16 +03:00
parent a575cb057b
commit 9f338c3416
17 changed files with 1202 additions and 102 deletions
@@ -0,0 +1,22 @@
+<script>
+  import { cn } from "../../utils.js";
+
+  /** @type {'default' | 'outline' | 'destructive'} */
+  export let variant = "default";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<span
+  data-slot="badge"
+  class={cn(
+    "admin-cn-badge",
+    variant === "outline" && "admin-cn-badge-outline",
+    variant === "destructive" && "admin-cn-badge-destructive",
+    className,
+  )}
+  {...$$restProps}
+>
+  <slot />
+</span>
@@ -0,0 +1,10 @@
+<script>
+  import { cn } from "../../../utils.js";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<div data-slot="card-action" class={cn("admin-cn-card-action", className)} {...$$restProps}>
+  <slot />
+</div>
@@ -0,0 +1,10 @@
+<script>
+  import { cn } from "../../../utils.js";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<div data-slot="card-content" class={cn("admin-cn-card-content", className)} {...$$restProps}>
+  <slot />
+</div>
@@ -0,0 +1,10 @@
+<script>
+  import { cn } from "../../../utils.js";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<p data-slot="card-description" class={cn("admin-cn-card-description", className)} {...$$restProps}>
+  <slot />
+</p>
@@ -0,0 +1,10 @@
+<script>
+  import { cn } from "../../../utils.js";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<div data-slot="card-footer" class={cn("admin-cn-card-footer", className)} {...$$restProps}>
+  <slot />
+</div>
@@ -0,0 +1,10 @@
+<script>
+  import { cn } from "../../../utils.js";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<div data-slot="card-header" class={cn("admin-cn-card-header", className)} {...$$restProps}>
+  <slot />
+</div>
@@ -0,0 +1,10 @@
+<script>
+  import { cn } from "../../../utils.js";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<div data-slot="card-title" class={cn("admin-cn-card-title", className)} {...$$restProps}>
+  <slot />
+</div>
@@ -0,0 +1,10 @@
+<script>
+  import { cn } from "../../../utils.js";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<div data-slot="card" class={cn("admin-cn-card", className)} {...$$restProps}>
+  <slot />
+</div>
@@ -0,0 +1,9 @@
+import Root from "./card.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Description from "./card-description.svelte";
+import Action from "./card-action.svelte";
+import Footer from "./card-footer.svelte";
+import Content from "./card-content.svelte";
+
+export { Root, Header, Title, Description, Action, Footer, Content };