index.tsx raw

   1  import {
   2    AlertDialog,
   3    AlertDialogAction,
   4    AlertDialogCancel,
   5    AlertDialogContent,
   6    AlertDialogDescription,
   7    AlertDialogFooter,
   8    AlertDialogHeader,
   9    AlertDialogTitle,
  10    AlertDialogTrigger
  11  } from '@/components/ui/alert-dialog'
  12  import { Button, buttonVariants } from '@/components/ui/button'
  13  import { useUserTrust } from '@/providers/UserTrustProvider'
  14  import { VariantProps } from 'class-variance-authority'
  15  import { Shield, ShieldCheck } from 'lucide-react'
  16  import { useTranslation } from 'react-i18next'
  17  
  18  export default function HideUntrustedContentButton({
  19    type,
  20    size = 'icon'
  21  }: {
  22    type: 'interactions' | 'notifications'
  23    size?: VariantProps<typeof buttonVariants>['size']
  24  }) {
  25    const { t } = useTranslation()
  26    const {
  27      hideUntrustedInteractions,
  28      hideUntrustedNotifications,
  29      updateHideUntrustedInteractions,
  30      updateHideUntrustedNotifications
  31    } = useUserTrust()
  32  
  33    const enabled = type === 'interactions' ? hideUntrustedInteractions : hideUntrustedNotifications
  34  
  35    const updateEnabled =
  36      type === 'interactions' ? updateHideUntrustedInteractions : updateHideUntrustedNotifications
  37  
  38    const typeText = t(type)
  39  
  40    return (
  41      <AlertDialog>
  42        <AlertDialogTrigger asChild>
  43          <Button variant="ghost" size={size}>
  44            {enabled ? (
  45              <ShieldCheck className="text-green-400" />
  46            ) : (
  47              <Shield className="text-muted-foreground" />
  48            )}
  49          </Button>
  50        </AlertDialogTrigger>
  51        <AlertDialogContent>
  52          <AlertDialogHeader>
  53            <AlertDialogTitle>
  54              {enabled
  55                ? t('Show untrusted {type}', { type: typeText })
  56                : t('Hide untrusted {type}', { type: typeText })}
  57            </AlertDialogTitle>
  58            <AlertDialogDescription>
  59              {enabled
  60                ? t('Currently hiding {type} from untrusted users.', { type: typeText })
  61                : t('Currently showing all {type}.', { type: typeText })}{' '}
  62              {t('Trusted users include people you follow and people they follow.')}{' '}
  63              {enabled
  64                ? t('Click continue to show all {type}.', { type: typeText })
  65                : t('Click continue to hide {type} from untrusted users.', { type: typeText })}
  66            </AlertDialogDescription>
  67          </AlertDialogHeader>
  68          <AlertDialogFooter>
  69            <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
  70            <AlertDialogAction onClick={() => updateEnabled(!enabled)}>
  71              {t('Continue')}
  72            </AlertDialogAction>
  73          </AlertDialogFooter>
  74        </AlertDialogContent>
  75      </AlertDialog>
  76    )
  77  }
  78