ux improvements

2026-01-11 20:32:34 +01:00
parent f24e8fc1e9
commit e7fede576c
10 changed files with 595 additions and 115 deletions
@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+
+interface EmptyStateProps {
+  icon?: string;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function EmptyState({ icon = "📭", title, description, action }: EmptyStateProps) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center",
+        background: "var(--secondary-alt-bg)",
+        borderRadius: "16px",
+        border: "1px dashed var(--border-color)",
+        color: "var(--text-muted)"
+      }}
+    >
+      <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>{icon}</div>
+      <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>{title}</h3>
+      {description && <p style={{ margin: "0 0 1.5rem 0", fontSize: "0.95rem" }}>{description}</p>}
+      {action}
+    </div>
+  );
+}
+
+export function LoadingState({ message = "Loading..." }: { message?: string }) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center"
+      }}
+    >
+      <div
+        style={{
+          width: "40px",
+          height: "40px",
+          border: "4px solid rgba(255, 255, 255, 0.2)",
+          borderTopColor: "currentColor",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite",
+          margin: "0 auto 1rem"
+        }}
+      ></div>
+      <p style={{ color: "var(--text-muted)", margin: 0 }}>{message}</p>
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export function ErrorState({ message, onRetry }: { message: string, onRetry?: () => void }) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center",
+        background: "rgba(244, 67, 54, 0.1)",
+        borderRadius: "16px",
+        border: "1px solid rgba(244, 67, 54, 0.3)"
+      }}
+    >
+      <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>⚠️</div>
+      <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>Something went wrong</h3>
+      <p style={{ margin: "0 0 1.5rem 0", color: "var(--text-muted)", fontSize: "0.95rem" }}>{message}</p>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          style={{
+            background: "var(--accent-color)",
+            border: "none",
+            padding: "0.75rem 1.5rem",
+            borderRadius: "8px",
+            color: "white",
+            fontWeight: 600,
+            cursor: "pointer"
+          }}
+        >
+          🔄 Try Again
+        </button>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,28 @@
+export function LoadingSpinner({ size = "medium", text }: { size?: "small" | "medium" | "large", text?: string }) {
+  const sizeMap = {
+    small: "16px",
+    medium: "24px",
+    large: "32px"
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
+      <div
+        style={{
+          width: sizeMap[size],
+          height: sizeMap[size],
+          border: `${parseInt(sizeMap[size]) / 4}px solid rgba(255, 255, 255, 0.2)`,
+          borderTopColor: "currentColor",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite"
+        }}
+      ></div>
+      {text && <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{text}</span>}
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}
@@ -0,0 +1,65 @@
+export function SkeletonLoader({ width, height, count = 1 }: { width?: string | number, height?: string | number, count?: number }) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          style={{
+            width: width || "100%",
+            height: height || "60px",
+            backgroundColor: "var(--secondary-alt-bg)",
+            borderRadius: "8px",
+            animation: "shimmer 1.5s infinite",
+            marginBottom: count > 1 ? "1rem" : undefined
+          }}
+        ></div>
+      ))}
+      <style>{`
+        @keyframes shimmer {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+    </>
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--secondary-alt-bg)",
+        border: "1px solid var(--border-color)",
+        borderRadius: "5px",
+        padding: "10px",
+        minHeight: "80px"
+      }}
+    >
+      <div
+        style={{
+          width: "60%",
+          height: "20px",
+          backgroundColor: "var(--tertiary-bg)",
+          borderRadius: "4px",
+          marginBottom: "0.5rem",
+          animation: "shimmer 1.5s infinite"
+        }}
+      ></div>
+      <div
+        style={{
+          width: "40%",
+          height: "16px",
+          backgroundColor: "var(--tertiary-bg)",
+          borderRadius: "4px",
+          animation: "shimmer 1.5s infinite 0.2s"
+        }}
+      ></div>
+      <style>{`
+        @keyframes shimmer {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+    </div>
+  );
+}