PostOptions.tsx raw

   1  import { Label } from '@/components/ui/label'
   2  import { Slider } from '@/components/ui/slider'
   3  import { Switch } from '@/components/ui/switch'
   4  import { StorageKey } from '@/constants'
   5  import { Dispatch, SetStateAction, useEffect } from 'react'
   6  import { useTranslation } from 'react-i18next'
   7  
   8  export default function PostOptions({
   9    posting,
  10    show,
  11    addClientTag,
  12    setAddClientTag,
  13    isNsfw,
  14    setIsNsfw,
  15    minPow,
  16    setMinPow
  17  }: {
  18    posting: boolean
  19    show: boolean
  20    addClientTag: boolean
  21    setAddClientTag: Dispatch<SetStateAction<boolean>>
  22    isNsfw: boolean
  23    setIsNsfw: Dispatch<SetStateAction<boolean>>
  24    minPow: number
  25    setMinPow: Dispatch<SetStateAction<number>>
  26  }) {
  27    const { t } = useTranslation()
  28  
  29    useEffect(() => {
  30      setAddClientTag(window.localStorage.getItem(StorageKey.ADD_CLIENT_TAG) === 'true')
  31    }, [])
  32  
  33    if (!show) return null
  34  
  35    const onAddClientTagChange = (checked: boolean) => {
  36      setAddClientTag(checked)
  37      window.localStorage.setItem(StorageKey.ADD_CLIENT_TAG, checked.toString())
  38    }
  39  
  40    const onNsfwChange = (checked: boolean) => {
  41      setIsNsfw(checked)
  42    }
  43  
  44    return (
  45      <div className="space-y-4">
  46        <div className="space-y-2">
  47          <div className="flex items-center space-x-2">
  48            <Label htmlFor="add-client-tag">{t('Add client tag')}</Label>
  49            <Switch
  50              id="add-client-tag"
  51              checked={addClientTag}
  52              onCheckedChange={onAddClientTagChange}
  53              disabled={posting}
  54            />
  55          </div>
  56          <div className="text-muted-foreground text-xs">
  57            {t('Show others this was sent via Smesh')}
  58          </div>
  59        </div>
  60  
  61        <div className="flex items-center space-x-2">
  62          <Label htmlFor="add-nsfw-tag">{t('NSFW')}</Label>
  63          <Switch
  64            id="add-nsfw-tag"
  65            checked={isNsfw}
  66            onCheckedChange={onNsfwChange}
  67            disabled={posting}
  68          />
  69        </div>
  70  
  71        <div className="grid gap-4 pb-4">
  72          <Label>{t('Proof of Work (difficulty {{minPow}})', { minPow })}</Label>
  73          <Slider
  74            defaultValue={[0]}
  75            value={[minPow]}
  76            onValueChange={([pow]) => setMinPow(pow)}
  77            max={28}
  78            step={1}
  79            disabled={posting}
  80          />
  81        </div>
  82      </div>
  83    )
  84  }
  85