mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-11-19 18:11:14 +01:00
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.
This commit is contained in:
29
web/src/components/experimental-warning.tsx
Normal file
29
web/src/components/experimental-warning.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user