add-protected-room.tsx (2544B)
1 import { Button } from "@/components/ui/button"; 2 import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; 3 import { Input } from "@/components/ui/input"; 4 import { Label } from "@/components/ui/label"; 5 import { Plus } from "lucide-react"; 6 7 interface AddProtectedRoomProps { 8 filled?: boolean; 9 } 10 11 export default function AddProtectedRoom({ filled }: AddProtectedRoomProps) { 12 return ( 13 <Dialog> 14 <DialogTrigger asChild> 15 {filled ? ( 16 <Button size="sm" className="bg-purple-600 text-white hover:bg-purple-700"> 17 <Plus className="mr-2 h-4 w-4" /> 18 Add Room 19 </Button> 20 ) : ( 21 <Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-purple-400"> 22 <Plus className="h-3 w-3 mr-1" /> 23 Add Room 24 </Button> 25 )} 26 </DialogTrigger> 27 <DialogContent className="bg-gray-950 border-gray-800"> 28 <DialogHeader> 29 <DialogTitle>Add Protected Room</DialogTitle> 30 <DialogDescription className="text-gray-400"> 31 Add a Matrix room to be monitored by this bot 32 </DialogDescription> 33 </DialogHeader> 34 <div className="space-y-4 py-4"> 35 <div className="space-y-2"> 36 <Label htmlFor="room-id">Room ID or Alias</Label> 37 <Input 38 id="room-id" 39 placeholder="#roomname:matrix.org" 40 className="bg-gray-900 border-gray-800" 41 /> 42 <p className="text-xs text-gray-400"> 43 Enter a room ID or alias. The bot must be invited to this room. 44 </p> 45 </div> 46 </div> 47 <DialogFooter> 48 <DialogCloseButton 49 className="border-gray-700 text-gray-400 hover:bg-gray-900 hover:text-gray-300" 50 > 51 Cancel 52 </DialogCloseButton> 53 <Button className="bg-purple-600 text-white hover:bg-purple-700">Add Room</Button> 54 </DialogFooter> 55 </DialogContent> 56 </Dialog > 57 ) 58 }