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 | 115x 115x 115x 115x 1x 1x 137x 20x 155x 114x 14x 129x 129x 129x 16x 129x 115x 147x 147x 114x 151x 1x 339x 115x 457x 457x 575x | import { useState } from "react";
import { Button } from "@/ahuora-design-system/ui/button";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/ahuora-design-system/ui/dialog";
import { Input } from "@/ahuora-design-system/ui/input";
import { Label } from "@/ahuora-design-system/ui/label";
export function ProfileNameDialog({
title,
triggerLabel,
initialName,
busy,
disabled,
onSubmit,
}: {
title: string;
triggerLabel: string;
initialName: string;
busy: boolean;
disabled: boolean;
onSubmit: (name: string) => Promise<void>;
}) {
const [open, setOpen] = useState(false);
const [name, setName] = useState(initialName);
const updateOpen = (nextOpen: boolean) => {
if (nextOpen) {
setName(initialName);
}
setOpen(nextOpen);
};
return (
<Dialog open={open} onOpenChange={updateOpen}>
<DialogTrigger asChild>
<Button type="button" variant="outline" disabled={disabled}>
{triggerLabel}
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
</DialogHeader>
<div className="space-y-1.5">
<Label htmlFor={`${triggerLabel.toLowerCase()}-profile-name`}>
Name
</Label>
<Input
id={`${triggerLabel.toLowerCase()}-profile-name`}
value={name}
onChange={(event) => setName(event.target.value)}
/>
</div>
<DialogFooter>
<Button
type="button"
disabled={!name.trim() || busy}
onClick={() => {
void onSubmit(name.trim()).then(() => setOpen(false));
}}
>
{busy ? "Saving" : triggerLabel}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|