feat: add global styles and transitions for dark mode support

- Created style.css for base styles and color variables for light and dark themes. - Added tailwind.css for Tailwind CSS integration and custom theme variables. - Introduced transitions.css to manage global transitions and reduce motion preferences. - Updated tsconfig.app.json to include path aliases for easier imports. - Modified tsconfig.json to set baseUrl and paths for module resolution. - Added typed-router.d.ts for auto-generated route types. - Enhanced vite.config.ts with Vue Router plugin, Tailwind CSS integration, and server proxy settings.
2025-05-23 21:35:43 +02:00
parent 97908db3e0
commit 26e3b76b11
102 changed files with 14233 additions and 668 deletions
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+  import { Loader2 } from "lucide-vue-next";
+
+  interface Props {
+    /**
+     * Size of the loader
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Message to display below the loader
+     */
+    message?: string;
+    /**
+     * Whether the loader is centered
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Whether the loader is fullscreen
+     * @default false
+     */
+    fullScreen?: boolean;
+  }
+
+  // Default props
+  const props = withDefaults(defineProps<Props>(), {
+    size: "md",
+    centered: true,
+    message: "",
+    fullScreen: false,
+  });
+
+  // Calculate size class based on props
+  const sizeClass = computed(() => {
+    switch (props.size) {
+      case "sm":
+        return "h-4 w-4";
+      case "lg":
+        return "h-10 w-10";
+      case "md":
+      default:
+        return "h-6 w-6";
+    }
+  });
+
+  // Calculate container class based on props
+  const containerClass = computed(() => {
+    const classes = [];
+
+    if (props.centered) {
+      classes.push("flex flex-col items-center justify-center");
+    }
+
+    if (props.fullScreen) {
+      classes.push("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm");
+    } else {
+      classes.push("py-6");
+    }
+
+    return classes.join(" ");
+  });
+</script>
+
+<template>
+  <div :class="containerClass">
+    <Loader2 :class="[sizeClass, 'animate-spin text-primary']" />
+    <p v-if="message" class="mt-2 text-sm text-muted-foreground">
+      {{ message }}
+    </p>
+  </div>
+</template>