konnosDashboard
PolicySelection.tsx93 lines · main
1import { noop } from 'lodash'
2import { Edit, ExternalLink, FlaskConical, Grid } from 'lucide-react'
3import { Alert, AlertDescription, AlertTitle, Button, Modal } from 'ui'
4
5import CardButton from '@/components/ui/CardButton'
6
7interface PolicySelectionProps {
8 description: string
9 showAssistantPreview: boolean
10 onViewTemplates: () => void
11 onViewEditor: () => void
12 onToggleFeaturePreviewModal?: () => void
13}
14
15const PolicySelection = ({
16 description = '',
17 showAssistantPreview,
18 onViewTemplates = noop,
19 onViewEditor = noop,
20 onToggleFeaturePreviewModal,
21}: PolicySelectionProps) => {
22 return (
23 <Modal.Content className="space-y-4 py-4">
24 <div className="flex flex-col gap-y-2">
25 <p className="text-sm text-foreground-light">{description}</p>
26 <div className="grid grid-cols-1 gap-2 lg:grid-cols-1">
27 <CardButton
28 title="Get started quickly"
29 description="Create a policy from a template"
30 icon={
31 <div className="flex">
32 <div
33 className="
34 flex h-8 w-8 items-center
35 justify-center
36 rounded-sm bg-foreground text-background
37 "
38 >
39 <Grid size={14} strokeWidth={2} />
40 </div>
41 </div>
42 }
43 onClick={onViewTemplates}
44 />
45 <CardButton
46 title="For full customization"
47 description="Create a policy from scratch"
48 icon={
49 <div className="flex">
50 <div
51 className="
52 flex h-8 w-8 items-center
53 justify-center
54 rounded-sm bg-foreground text-background
55 "
56 >
57 <Edit size={14} strokeWidth={2} />
58 </div>
59 </div>
60 }
61 onClick={onViewEditor}
62 />
63 </div>
64 </div>
65
66 {showAssistantPreview && onToggleFeaturePreviewModal !== undefined && (
67 <Alert>
68 <FlaskConical />
69 <AlertTitle>Try the new Briven Assistant for RLS policies</AlertTitle>
70 <AlertDescription>
71 Create RLS policies for your tables with the help of AI
72 </AlertDescription>
73 <div className="flex items-center gap-x-2 mt-3">
74 <Button type="default" onClick={onToggleFeaturePreviewModal}>
75 Toggle feature preview
76 </Button>
77 <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
78 <a
79 href="https://supabase.com/blog/studio-introducing-assistant#introducing-the-supabase-assistant"
80 target="_blank"
81 rel="noreferrer"
82 >
83 Learn more
84 </a>
85 </Button>
86 </div>
87 </Alert>
88 )}
89 </Modal.Content>
90 )
91}
92
93export default PolicySelection