mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-11-18 09:37:30 +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