index.tsx raw
1 import {
2 AlertDialog,
3 AlertDialogAction,
4 AlertDialogCancel,
5 AlertDialogContent,
6 AlertDialogDescription,
7 AlertDialogFooter,
8 AlertDialogHeader,
9 AlertDialogTitle
10 } from '@/components/ui/alert-dialog'
11 import { Button } from '@/components/ui/button'
12 import {
13 Drawer,
14 DrawerContent,
15 DrawerDescription,
16 DrawerFooter,
17 DrawerHeader,
18 DrawerTitle
19 } from '@/components/ui/drawer'
20 import { useNostr } from '@/providers/NostrProvider'
21 import { useScreenSize } from '@/providers/ScreenSizeProvider'
22 import { useTranslation } from 'react-i18next'
23
24 export default function LogoutDialog({
25 open = false,
26 setOpen
27 }: {
28 open: boolean
29 setOpen: (open: boolean) => void
30 }) {
31 const { t } = useTranslation()
32 const { isSmallScreen } = useScreenSize()
33 const { account, removeAccount } = useNostr()
34
35 if (isSmallScreen) {
36 return (
37 <Drawer defaultOpen={false} open={open} onOpenChange={setOpen}>
38 <DrawerContent>
39 <DrawerHeader>
40 <DrawerTitle>{t('Logout')}</DrawerTitle>
41 <DrawerDescription>{t('Are you sure you want to logout?')}</DrawerDescription>
42 </DrawerHeader>
43 <DrawerFooter>
44 <Button variant="outline" onClick={() => setOpen(false)} className="w-full">
45 {t('Cancel')}
46 </Button>
47 <Button
48 variant="destructive"
49 onClick={() => {
50 if (account) {
51 setOpen(false)
52 removeAccount(account)
53 }
54 }}
55 className="w-full"
56 >
57 {t('Logout')}
58 </Button>
59 </DrawerFooter>
60 </DrawerContent>
61 </Drawer>
62 )
63 }
64
65 return (
66 <AlertDialog defaultOpen={false} open={open} onOpenChange={setOpen}>
67 <AlertDialogContent>
68 <AlertDialogHeader>
69 <AlertDialogTitle>{t('Logout')}</AlertDialogTitle>
70 <AlertDialogDescription>{t('Are you sure you want to logout?')}</AlertDialogDescription>
71 </AlertDialogHeader>
72 <AlertDialogFooter>
73 <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
74 <AlertDialogAction
75 variant="destructive"
76 onClick={() => {
77 if (account) {
78 removeAccount(account)
79 }
80 }}
81 >
82 {t('Logout')}
83 </AlertDialogAction>
84 </AlertDialogFooter>
85 </AlertDialogContent>
86 </AlertDialog>
87 )
88 }
89