1
0
Fork 0
panel/components/pages/shield/EmailClassificationRow.tsx

68 lines
2.2 KiB
TypeScript

"use client"
import { Button } from "@/components/ui/button";
import { Command, CommandItem } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { TableCell, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { Check } from "lucide-react";
import { useState } from "react";
const CLASSIFICATIONS = [
"DISPOSABLE",
"GAYSEX",
"HOMOSEXUAL",
"FDGIUHDIFUIOFZH",
];
export default function EmailClassificationRow({ domain, ...props }: { domain: string, classification: string }) {
const [selectClassification, setSelectClassification] = useState(false);
const [classification, setClassification] = useState(props.classification);
const [deleted, setDeleted] = useState(false);
return deleted ? null : (
<TableRow>
<TableCell>{domain}</TableCell>
<TableCell>
<Popover open={selectClassification} onOpenChange={setSelectClassification}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={selectClassification}
>{classification}</Button>
</PopoverTrigger>
<PopoverContent>
<Command>
{CLASSIFICATIONS.map((c) => (
<CommandItem
key={c}
onSelect={() => {
setSelectClassification(false);
setClassification(c);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
c == classification
? "opacity-100"
: "opacity-0"
)}
/>
{c}
</CommandItem>
))}
</Command>
</PopoverContent>
</Popover>
</TableCell>
<TableCell>
<Button
variant="destructive"
onClick={() => setDeleted(true)}
>Remove</Button>
</TableCell>
</TableRow>
);
}