46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../components/ui/dialog";
|
|
import { Button } from "../components/ui/button";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
initial: string;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSubmit: (name: string) => void;
|
|
}
|
|
|
|
export function RenameDialog({ open, initial, onOpenChange, onSubmit }: Props) {
|
|
const [name, setName] = useState(initial);
|
|
useEffect(() => { if (open) setName(initial); }, [open, initial]);
|
|
|
|
function submit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
onSubmit(name.trim());
|
|
onOpenChange(false);
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader><DialogTitle>Rinomina sessione</DialogTitle></DialogHeader>
|
|
<form onSubmit={submit} className="flex flex-col gap-3">
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="rename-name">Name</label>
|
|
<input
|
|
id="rename-name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
|
|
placeholder="Session name…"
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" size="sm" onClick={() => onOpenChange(false)}>Cancel</Button>
|
|
<Button type="submit" size="sm">Save</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|