add-ban.tsx (5463B)
1 import { Button } from "@/components/ui/button"; 2 import { Checkbox } from "@/components/ui/checkbox"; 3 import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; 4 import { Input } from "@/components/ui/input"; 5 import { Label } from "@/components/ui/label"; 6 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; 7 import { Textarea } from "@/components/ui/textarea"; 8 import { Ban, Plus } from "lucide-react"; 9 import { PolicyList } from "../../app/dashboard/mockData"; 10 11 interface AddBanProps { 12 policyLists: PolicyList[]; 13 filled?: boolean; 14 header?: boolean; 15 buttonClasses?: string; 16 } 17 18 export default function AddBan({ filled, policyLists, header, buttonClasses }: AddBanProps) { 19 return ( 20 <Dialog> 21 <DialogTrigger asChild> 22 {header ? ( 23 <Button 24 variant="outline" 25 size="sm" 26 className={`${buttonClasses} border-red-500 text-red-400 hover:bg-red-950 hover:text-red-300`} 27 > 28 <Ban className="mr-2 h-4 w-4" /> 29 Add Ban 30 </Button> 31 ) : ( 32 filled ? ( 33 <Button size="sm" className={`${buttonClasses} bg-purple-600 text-white hover:bg-purple-700`}> 34 <Ban className="mr-2 h-4 w-4" /> 35 Add Ban 36 </Button> 37 ) : ( 38 <Button variant="ghost" size="sm" className={`${buttonClasses} h-7 px-2 text-xs text-purple-400`}> 39 <Plus className="h-3 w-3 mr-1" /> 40 Add Ban 41 </Button> 42 ) 43 )} 44 45 </DialogTrigger> 46 <DialogContent className="bg-gray-950 border-gray-800"> 47 <DialogHeader> 48 <DialogTitle>Add New Ban</DialogTitle> 49 <DialogDescription className="text-gray-400"> 50 Ban a user or server from your Matrix rooms 51 </DialogDescription> 52 </DialogHeader> 53 <div className="space-y-4 py-4"> 54 <div className="space-y-2"> 55 <Label htmlFor="ban-type">Ban Type</Label> 56 <Select defaultValue="user"> 57 <SelectTrigger className="bg-gray-900 border-gray-800"> 58 <SelectValue placeholder="Select ban type" /> 59 </SelectTrigger> 60 <SelectContent className="bg-gray-900 border-gray-800"> 61 <SelectItem value="user">User</SelectItem> 62 <SelectItem value="server">Server</SelectItem> 63 <SelectItem value="room">Room</SelectItem> 64 </SelectContent> 65 </Select> 66 </div> 67 <div className="space-y-2"> 68 <Label htmlFor="ban-target">Target</Label> 69 <Input 70 id="ban-target" 71 placeholder="@user:matrix.org" 72 className="bg-gray-900 border-gray-800" 73 /> 74 </div> 75 <div className="space-y-2"> 76 <Label htmlFor="ban-reason">Reason</Label> 77 <Textarea 78 id="ban-reason" 79 placeholder="Reason for the ban" 80 className="bg-gray-900 border-gray-800" 81 /> 82 </div> 83 <div className="space-y-2"> 84 <Label>Policy Lists</Label> 85 <div className="space-y-2 mt-1"> 86 {policyLists 87 .filter((list) => !list.readOnly) 88 .map((list) => ( 89 <div key={list.id} className="flex items-center space-x-2"> 90 <Checkbox id={`list-${list.id}`} /> 91 <Label htmlFor={`list-${list.id}`} className="font-normal"> 92 {list.name} 93 </Label> 94 </div> 95 ))} 96 </div> 97 </div> 98 <div className="space-y-2"> 99 <p className="text-xs text-gray-400"> 100 Bans are applied to all protected rooms monitored by this bot. 101 </p> 102 </div> 103 </div> 104 <DialogFooter> 105 <DialogCloseButton 106 className="border-gray-700 text-gray-400 hover:bg-gray-900 hover:text-gray-300" 107 > 108 Cancel 109 </DialogCloseButton> 110 <Button className="bg-red-600 text-white hover:bg-red-700">Add Ban</Button> 111 </DialogFooter> 112 </DialogContent> 113 </Dialog > 114 ) 115 }