79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@unsend/ui/src/button";
|
|
import { Input } from "@unsend/ui/src/input";
|
|
import { Label } from "@unsend/ui/src/label";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@unsend/ui/src/dialog";
|
|
|
|
import { api } from "~/trpc/react";
|
|
import { useState } from "react";
|
|
|
|
export default function AddDomain() {
|
|
const [open, setOpen] = useState(false);
|
|
const [domainName, setDomainName] = useState("");
|
|
const addDomainMutation = api.domain.createDomain.useMutation();
|
|
|
|
const utils = api.useUtils();
|
|
|
|
function handleSave() {
|
|
addDomainMutation.mutate(
|
|
{
|
|
name: domainName,
|
|
},
|
|
{
|
|
onSuccess: () => {
|
|
utils.domain.domains.invalidate();
|
|
setOpen(false);
|
|
},
|
|
}
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onOpenChange={(_open) => (_open !== open ? setOpen(_open) : null)}
|
|
>
|
|
<DialogTrigger asChild>
|
|
<Button>Add domain</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Add a new domain</DialogTitle>
|
|
<DialogDescription>This creates a new domain</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="py-2">
|
|
<Label htmlFor="name" className="text-right">
|
|
Domain Name
|
|
</Label>
|
|
<Input
|
|
id="name"
|
|
placeholder="subdomain.example.com"
|
|
defaultValue=""
|
|
className="col-span-3"
|
|
onChange={(e) => setDomainName(e.target.value)}
|
|
value={domainName}
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
type="submit"
|
|
onClick={handleSave}
|
|
disabled={addDomainMutation.isPending}
|
|
>
|
|
Save changes
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|