From f4a59bfefb40e43b16e2278c5fcd903e5b915f69 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Fri, 14 Nov 2025 17:38:34 +0100
Subject: [PATCH] feat(components): add shared experimental warning component

Create reusable ExperimentalWarning component with customizable message
and feedback button. Component includes large warning styling (3x size)
with amber color scheme and PostHog-targetable .feedback-button class.
---
 web/src/components/experimental-warning.tsx | 29 +++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 web/src/components/experimental-warning.tsx

diff --git a/web/src/components/experimental-warning.tsx b/web/src/components/experimental-warning.tsx
new file mode 100644
index 00000000..d2448beb
--- /dev/null
+++ b/web/src/components/experimental-warning.tsx
@@ -0,0 +1,29 @@
+import { AlertTriangle } from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Button } from "@/components/ui/button"
+
+interface ExperimentalWarningProps {
+	message?: string
+}
+
+export function ExperimentalWarning({ message }: ExperimentalWarningProps) {
+	const defaultMessage =
+		message ||
+		"This icon submission system is currently in an experimentation phase. Submissions will not be reviewed or processed at this time. We're gathering feedback to improve the experience."
+
+	return (
+		<Alert variant="default" className="mb-6 border-amber-500/50 bg-amber-50 dark:bg-amber-950/20 px-8 py-6">
+			<AlertTriangle className="text-amber-600 dark:text-amber-500 size-8" />
+			<div className="col-start-2 space-y-4">
+				<AlertTitle className="text-amber-900 dark:text-amber-100 text-2xl font-bold">Experimental Feature</AlertTitle>
+				<AlertDescription className="text-amber-800 dark:text-amber-200 text-base leading-relaxed">
+					{defaultMessage}
+				</AlertDescription>
+				<Button className="feedback-button mt-4" variant="outline" size="lg">
+					Send feedback
+				</Button>
+			</div>
+		</Alert>
+	)
+}
+