konnosDashboard
index.tsx70 lines · main
1'use client'
2
3import { useBreakpoint } from 'common'
4import { noop } from 'lodash'
5import { Button } from 'ui'
6
7import { PrivacySettings } from '../PrivacySettings'
8
9interface ConsentToastProps {
10 onAccept: () => void
11 onOptOut: () => void
12}
13
14export const ConsentToast = ({ onAccept = noop, onOptOut = noop }: ConsentToastProps) => {
15 const isMobile = useBreakpoint(639)
16
17 return (
18 <div className="py-1 flex flex-col gap-y-3 w-full">
19 <div>
20 <p className="text-sm text-foreground">
21 We use cookies to collect data and improve our services.{' '}
22 <a
23 target="_blank"
24 rel="noreferrer noopener"
25 href="https://supabase.com/privacy#8-cookies-and-similar-technologies-used-on-our-european-services"
26 className="hidden sm:inline underline underline-offset-2 decoration-foreground-lighter hover:decoration-foreground-light transition-all"
27 >
28 Learn more
29 </a>{' '}
30 </p>
31 <div className="flex items-center justify-start gap-x-2 sm:hidden">
32 <a
33 target="_blank"
34 rel="noreferrer noopener"
35 href="https://supabase.com/privacy#8-cookies-and-similar-technologies-used-on-our-european-services"
36 className="underline underline-offset-2 text-foreground-light hover:decoration-foreground-light transition-all"
37 >
38 Learn more
39 </a>
40 <span className="text-foreground-lighter text-xs">•</span>
41 <PrivacySettings className="underline underline-offset-2 inline text-light">
42 Privacy settings
43 </PrivacySettings>
44 </div>
45 </div>
46
47 <div className="flex items-center space-x-2">
48 <Button
49 type="default"
50 onClick={onAccept}
51 size={isMobile ? 'small' : 'tiny'}
52 block={isMobile}
53 >
54 Accept
55 </Button>
56 <Button
57 type={isMobile ? 'outline' : 'text'}
58 onClick={onOptOut}
59 size={isMobile ? 'small' : 'tiny'}
60 block={isMobile}
61 >
62 Opt out
63 </Button>
64 <Button asChild type="text" className="hidden sm:block text-light hover:text-foreground">
65 <PrivacySettings>Privacy settings</PrivacySettings>
66 </Button>
67 </div>
68 </div>
69 )
70}