78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { useContentPolicy } from '@/providers/ContentPolicyProvider'
|
|
import { Plus, X } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import SettingItem from './SettingItem'
|
|
|
|
export default function MutedWords() {
|
|
const { t } = useTranslation()
|
|
const { mutedWords, setMutedWords } = useContentPolicy()
|
|
const [newMutedWord, setNewMutedWord] = useState('')
|
|
|
|
const handleAddMutedWord = () => {
|
|
const word = newMutedWord.trim().toLowerCase()
|
|
if (word && !mutedWords.includes(word)) {
|
|
setMutedWords([...mutedWords, word])
|
|
setNewMutedWord('')
|
|
}
|
|
}
|
|
|
|
const handleRemoveMutedWord = (word: string) => {
|
|
setMutedWords(mutedWords.filter((w) => w !== word))
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault()
|
|
handleAddMutedWord()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<SettingItem className="flex-col items-start gap-2">
|
|
<Label className="text-base font-normal">{t('Muted words')}</Label>
|
|
<div className="w-full space-y-2">
|
|
<div className="flex gap-2">
|
|
<Input
|
|
placeholder={t('Add muted word')}
|
|
value={newMutedWord}
|
|
onChange={(e) => setNewMutedWord(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
className="flex-1"
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={handleAddMutedWord}
|
|
disabled={!newMutedWord.trim() || mutedWords.includes(newMutedWord.trim())}
|
|
>
|
|
<Plus />
|
|
</Button>
|
|
</div>
|
|
{mutedWords.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{mutedWords.map((word) => (
|
|
<div
|
|
key={word}
|
|
className="flex items-center gap-1 bg-muted px-2 py-1 rounded-md text-sm"
|
|
>
|
|
<span>{word}</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-4 w-4 hover:bg-transparent"
|
|
onClick={() => handleRemoveMutedWord(word)}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SettingItem>
|
|
)
|
|
}
|