konnosDashboard
BannerTableEditorQueueOperations.tsx72 lines · main
1import { LOCAL_STORAGE_KEYS } from 'common'
2import { useParams } from 'common/hooks'
3import Link from 'next/link'
4import { Badge, Button, Card, CardContent, CardHeader } from 'ui'
5
6import { BannerCard } from '../BannerCard'
7import { useBannerStack } from '../BannerStackProvider'
8import { useIsQueueOperationsEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
9import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
10
11const DASHBOARD_SETTINGS_URL = '/account/me#dashboard'
12
13export const BannerTableEditorQueueOperations = () => {
14 const { ref } = useParams()
15 const isQueueOperationsEnabled = useIsQueueOperationsEnabled()
16
17 const { dismissBanner } = useBannerStack()
18 const [, setIsDismissed] = useLocalStorageQuery(
19 LOCAL_STORAGE_KEYS.TABLE_EDITOR_QUEUE_OPERATIONS_BANNER_DISMISSED(ref ?? ''),
20 false
21 )
22
23 return (
24 <BannerCard
25 onDismiss={() => {
26 setIsDismissed(true)
27 dismissBanner('table-editor-queue-operations-banner')
28 }}
29 >
30 <div className="flex flex-col gap-y-4">
31 <div className="flex flex-col gap-y-2 items-start">
32 <Badge variant="success" className="-ml-0.5 uppercase inline-flex items-center mb-2">
33 New
34 </Badge>
35 <Card className="text-xs w-full">
36 <CardHeader className="flex flex-row gap-2 px-2 py-2">
37 <div className="min-w-0 flex-1">
38 <div className="text-xs text-foreground ml-0.5">
39 <span>name</span>
40 <span className="text-foreground-muted mx-1.5">·</span>
41 <span>where id = 10</span>
42 </div>
43 </div>
44 </CardHeader>
45 <CardContent className="font-mono text-xs px-2 py-1">
46 <div className="flex gap-2 py-0.5">
47 <span className="text-destructive select-none font-medium">-</span>
48 <span className="text-destructive truncate max-w-full">Red</span>
49 </div>
50
51 <div className="flex gap-2 py-0.5">
52 <span className="text-brand-link select-none font-medium">+</span>
53 <span className="text-brand-link truncate max-w-full">Blue</span>
54 </div>
55 </CardContent>
56 </Card>
57 </div>
58 <div className="flex flex-col gap-y-1 mb-2">
59 <p className="text-sm font-medium">Queue row edits in Table Editor</p>
60 <p className="text-xs text-foreground-lighter text-balance">
61 Batch multiple row edits and review them before saving to your database
62 </p>
63 </div>
64 <Button asChild type="default" className="w-min">
65 <Link href={DASHBOARD_SETTINGS_URL}>
66 {isQueueOperationsEnabled ? 'View' : 'Enable in'} preferences
67 </Link>
68 </Button>
69 </div>
70 </BannerCard>
71 )
72}