Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 21x 21x 20x 1x 60x 1x | import { X } from "lucide-react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import type { Room, RoomType } from "../../lib/api";
import { useDialogAccessibility } from "../../hooks";
type RoomFormModalProps = {
isOpen: boolean;
editingRoom: Room | null;
newRoomType: string;
newRoomName: string;
roomTypes: RoomType[];
isSubmitting: boolean;
onClose: () => void;
onSubmit: () => void;
onRoomTypeChange: (value: string) => void;
onRoomNameChange: (value: string) => void;
};
export function RoomFormModal({
isOpen,
editingRoom,
newRoomType,
newRoomName,
roomTypes,
isSubmitting,
onClose,
onSubmit,
onRoomTypeChange,
onRoomNameChange,
}: RoomFormModalProps) {
const { dialogRef, handleFocusTrap } = useDialogAccessibility(onClose);
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" tabIndex={-1}>
<div
ref={dialogRef}
role="dialog"
aria-modal="true"
aria-labelledby="room-form-dialog-title"
onKeyDown={handleFocusTrap}
className="bg-background-elevated rounded-lg shadow-lg w-full max-w-md"
>
<div className="flex items-center justify-between p-4 border-b border-border-default">
<h3 id="room-form-dialog-title" className="font-semibold">
{editingRoom ? "Edit Room" : "Add New Room"}
</h3>
<button
type="button"
onClick={onClose}
aria-label="Close"
className="p-1 text-foreground-subtle hover:text-foreground-muted"
>
<X className="h-5 w-5" />
</button>
</div>
<div className="p-4 space-y-4">
<div>
<label
htmlFor="room-type-select"
className="block text-sm font-medium text-foreground-default mb-1"
>
Room Type *
</label>
<select
id="room-type-select"
value={newRoomType}
onChange={(e) => onRoomTypeChange(e.target.value)}
className="w-full px-3 py-2 border border-border-default rounded-md bg-background-elevated text-foreground-default focus:outline-none focus:ring-2 focus:ring-primary-500/40 focus:border-primary-500"
>
<option value="">Select room type...</option>
{roomTypes.map((rt) => (
<option key={rt.code} value={rt.code}>
{rt.icon} {rt.displayName}
</option>
))}
</select>
</div>
<div>
<label
htmlFor="room-custom-name"
className="block text-sm font-medium text-foreground-default mb-1"
>
Custom Name (Optional)
</label>
<Input
id="room-custom-name"
value={newRoomName}
onChange={(e) => onRoomNameChange(e.target.value)}
placeholder="e.g., Master Bedroom, Kid's Room"
/>
<p className="mt-1 text-xs text-foreground-muted">
Use a custom name to distinguish multiple rooms of the same type
</p>
</div>
</div>
<div className="flex justify-end gap-2 p-4 border-t border-border-default bg-background-muted">
<Button variant="outline" onClick={onClose}>
Cancel
</Button>
<Button onClick={onSubmit} disabled={isSubmitting || !newRoomType}>
{isSubmitting ? "Saving..." : editingRoom ? "Update" : "Add Room"}
</Button>
</div>
</div>
</div>
);
}
|