FeaturePreviewBadge.tsx33 lines · main

1	import { FlaskConical } from 'lucide-react'
2	import { Badge, cn } from 'ui'
3
4	import { useFeaturePreviewModal } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
5
6	interface FeaturePreviewBadgeProps {
7	featureKey: string
8	className?: string
9	}
10
11	export const FeaturePreviewBadge = ({ featureKey, className }: FeaturePreviewBadgeProps) => {
12	const { selectFeaturePreview } = useFeaturePreviewModal()
13
14	return (
15	<button
16	type="button"
17	onClick={() => selectFeaturePreview(featureKey)}
18	className="group flex items-center"
19	title="Feature preview — click to manage"
20	>
21	<Badge
22	variant="default"
23	className={cn(
24	'cursor-pointer group-hover:border-foreground-light group-hover:text-foreground transition-colors',
25	className
26	)}
27	>
28	<FlaskConical size={8} strokeWidth={1.5} />
29	Preview
30	</Badge>
31	</button>
32	)
33	}