feat: first version of the interface, integrate Tailwind CSS and update routing

- Add Tailwind CSS dependencies and configure Vite to use Tailwind - Implement routing with React Router for Landing and Dashboard pages - Remove unused App.css file and refactor App component to utilize new structure - Update global styles in index.css to incorporate Tailwind's utility classes
2026-04-23 09:49:38 +02:00
parent 4627d160e8
commit a07bd3146e
26 changed files with 1819 additions and 460 deletions
@@ -0,0 +1,104 @@
+/**
+ * Centralised collection of inline SVG icons used across the app. Keeping
+ * them here avoids pulling a full icon library for ~10 glyphs while still
+ * letting consumers style them via `className` (stroke inherits from
+ * `currentColor`).
+ */
+
+const base = {
+  width: 16,
+  height: 16,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.8,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true,
+};
+
+export function DocumentIcon({ size = 36, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} className={className}>
+      <path d="M9 12h6M9 16h6M9 8h2" />
+      <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z" />
+      <path d="M13 2v5a2 2 0 002 2h5" />
+    </svg>
+  );
+}
+
+export function LayersIcon({ size = 18, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} className={className}>
+      <path d="M12 3L2 8l10 5 10-5-10-5zM2 13l10 5 10-5M2 18l10 5 10-5" />
+    </svg>
+  );
+}
+
+export function ArrowLeftIcon({ size = 14, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} strokeWidth={2} className={className}>
+      <path d="M19 12H5M12 5l-7 7 7 7" />
+    </svg>
+  );
+}
+
+export function ClockIcon({ size = 13, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} strokeWidth={1.5} className={className}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5l3 3" />
+    </svg>
+  );
+}
+
+export function CheckIcon({ size = 15, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} strokeWidth={2} className={className}>
+      <path d="M5 13l4 4L19 7" />
+    </svg>
+  );
+}
+
+export function RefreshIcon({ size = 15, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} strokeWidth={2} className={className}>
+      <path d="M1 4v6h6M23 20v-6h-6" />
+      <path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" />
+    </svg>
+  );
+}
+
+export function DownloadIcon({ size = 15, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} className={className}>
+      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
+    </svg>
+  );
+}
+
+export function ChevronDownIcon({ size = 12, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} strokeWidth={2} className={className}>
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  );
+}
+
+export function SearchIcon({ size = 14, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} strokeWidth={2} className={className}>
+      <circle cx="11" cy="11" r="8" />
+      <path d="M21 21l-4.35-4.35" />
+    </svg>
+  );
+}
+
+export function AlertIcon({ size = 16, className = "" }) {
+  return (
+    <svg {...base} width={size} height={size} className={className}>
+      <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+      <path d="M12 9v4M12 17h.01" />
+    </svg>
+  );
+}