Add 'apps/web/' from commit '1e7174fa604b11e7c3983cd8ad01c596f6e77e96'

git-subtree-dir: apps/web git-subtree-mainline: 068a51b46b git-subtree-split: 1e7174fa60
2026-08-16 21:42:59 -04:00
parent 068a51b46b 1e7174fa60
commit 86f8987dff
350 changed files with 62192 additions and 0 deletions
@@ -0,0 +1,111 @@
+import * as React from "react";
+import { Card, CardContent } from "~/components/ui/card";
+import { cn } from "~/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+interface QuickActionCardProps {
+  title: string;
+  description?: string;
+  icon: LucideIcon;
+  variant?: "default" | "success" | "info" | "warning" | "purple";
+  className?: string;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+const variantStyles = {
+  default: {
+    icon: "text-foreground",
+    background: "bg-muted/50",
+    hoverBackground: "group-hover:bg-muted/70",
+  },
+  success: {
+    icon: "text-status-success",
+    background: "bg-status-success-muted",
+    hoverBackground: "group-hover:bg-status-success-muted/70",
+  },
+  info: {
+    icon: "text-status-info",
+    background: "bg-status-info-muted",
+    hoverBackground: "group-hover:bg-status-info-muted/70",
+  },
+  warning: {
+    icon: "text-status-warning",
+    background: "bg-status-warning-muted",
+    hoverBackground: "group-hover:bg-status-warning-muted/70",
+  },
+  purple: {
+    icon: "text-primary",
+    background: "bg-secondary",
+    hoverBackground: "group-hover:bg-secondary/80",
+  },
+};
+
+export function QuickActionCard({
+  title,
+  description,
+  icon: Icon,
+  variant = "default",
+  className,
+  onClick,
+  children,
+}: QuickActionCardProps) {
+  const styles = variantStyles[variant];
+
+  const content = (
+    <CardContent className="p-6 text-center">
+      <div
+        className={cn(
+          "mx-auto mb-3 flex h-12 w-12 items-center justify-center transition-colors",
+          styles.background,
+          styles.hoverBackground,
+        )}
+      >
+        <Icon className={cn("h-6 w-6", styles.icon)} />
+      </div>
+      <h3 className="font-semibold">{title}</h3>
+      {description && (
+        <p className="text-muted-foreground mt-1 text-sm">{description}</p>
+      )}
+    </CardContent>
+  );
+
+  if (children) {
+    return (
+      <Card
+        className={cn(
+          "group cursor-pointer border-0 shadow-md transition-all hover:scale-[1.02] hover:shadow-lg",
+          className,
+        )}
+      >
+        {children}
+      </Card>
+    );
+  }
+
+  return (
+    <Card
+      className={cn(
+        "group cursor-pointer border-0 shadow-md transition-all hover:scale-[1.02] hover:shadow-lg",
+        className,
+      )}
+      onClick={onClick}
+    >
+      {content}
+    </Card>
+  );
+}
+
+export function QuickActionCardSkeleton() {
+  return (
+    <Card className="bg-card border-border border">
+      <CardContent className="p-6">
+        <div className="animate-pulse">
+          <div className="bg-muted mx-auto mb-3 h-12 w-12"></div>
+          <div className="bg-muted mx-auto mb-2 h-4 w-2/3 rounded"></div>
+          <div className="bg-muted mx-auto h-3 w-1/2 rounded"></div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}