gsadmin/headplane
1
0
Fork 0
mirror of https://github.com/tale/headplane.git synced 2026-08-30 16:59:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: swap button and decompose dialog components

Browse Source
This commit is contained in:
Aarnav Tale
2026-03-14 19:22:18 -04:00
parent eda5713700
commit 27f8fa0b42
40 changed files with 604 additions and 872 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/dns/components/manage-domains.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import { GripVertical, Lock } from "lucide-react";
import { useEffect, useState } from "react";
import { Form } from "react-router";
import Button from "~/components/Button";
import Button from "~/components/button";
import Input from "~/components/Input";
import TableList from "~/components/TableList";
import cn from "~/utils/cn";
app/routes/dns/components/manage-ns.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Info } from "lucide-react";
import { Form, useSubmit } from "react-router";
import Button from "~/components/Button";
import Button from "~/components/button";
import Link from "~/components/link";
import Switch from "~/components/Switch";
import TableList from "~/components/TableList";
app/routes/dns/components/manage-records.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Form } from "react-router";
import Button from "~/components/Button";
import Button from "~/components/button";
import Code from "~/components/Code";
import Link from "~/components/link";
import TableList from "~/components/TableList";
app/routes/dns/components/rename-tailnet.tsx
+45 -42
View File
@@ -1,48 +1,51 @@
import Code from '~/components/Code';
import Dialog from '~/components/Dialog';
import Input from '~/components/Input';
import Button from "~/components/Button";
import Code from "~/components/Code";
import Dialog, { DialogPanel } from "~/components/Dialog";
import Input from "~/components/Input";
import Text from "~/components/Text";
import Title from "~/components/Title";
interface Props {
name: string;
isDisabled: boolean;
name: string;
isDisabled: boolean;
}
export default function RenameTailnet({ name, isDisabled }: Props) {
return (
<div className="flex flex-col w-full sm:w-2/3 gap-y-4">
<h1 className="text-2xl font-medium mb-2">Tailnet Name</h1>
<p>
This is the base domain name of your Tailnet. Devices are accessible at{' '}
<Code>[device].{name}</Code> when Magic DNS is enabled.
</p>
<Input
className="w-3/5 font-medium text-sm"
isReadOnly
label="Tailnet name"
labelHidden
onFocus={(event) => {
event.target.select();
}}
value={name}
/>
<Dialog>
<Dialog.Button isDisabled={isDisabled}>Rename Tailnet</Dialog.Button>
<Dialog.Panel isDisabled={isDisabled}>
<Dialog.Title>Rename Tailnet</Dialog.Title>
<Dialog.Text className="mb-8">
Keep in mind that changing this can lead to all sorts of unexpected
behavior and may break existing devices in your tailnet.
</Dialog.Text>
<input name="action_id" type="hidden" value="rename_tailnet" />
<Input
defaultValue={name}
isRequired
label="Tailnet name"
name="new_name"
placeholder="ts.net"
/>
</Dialog.Panel>
</Dialog>
</div>
);
return (
<div className="flex w-full flex-col gap-y-4 sm:w-2/3">
<h1 className="mb-2 text-2xl font-medium">Tailnet Name</h1>
<p>
This is the base domain name of your Tailnet. Devices are accessible at{" "}
<Code>[device].{name}</Code> when Magic DNS is enabled.
</p>
<Input
className="w-3/5 text-sm font-medium"
isReadOnly
label="Tailnet name"
labelHidden
onFocus={(event) => {
event.target.select();
}}
value={name}
/>
<Dialog>
<Button isDisabled={isDisabled}>Rename Tailnet</Button>
<DialogPanel isDisabled={isDisabled}>
<Title>Rename Tailnet</Title>
<Text className="mb-8">
Keep in mind that changing this can lead to all sorts of unexpected behavior and may
break existing devices in your tailnet.
</Text>
<input name="action_id" type="hidden" value="rename_tailnet" />
<Input
defaultValue={name}
isRequired
label="Tailnet name"
name="new_name"
placeholder="ts.net"
/>
</DialogPanel>
</Dialog>
</div>
);
}
app/routes/dns/components/toggle-magic.tsx
+20 -25
View File
@@ -1,31 +1,26 @@
import Dialog from '~/components/Dialog';
import Button from "~/components/Button";
import Dialog, { DialogPanel } from "~/components/Dialog";
import Text from "~/components/Text";
import Title from "~/components/Title";
interface Props {
isEnabled: boolean;
isDisabled: boolean;
isEnabled: boolean;
isDisabled: boolean;
}
export default function Modal({ isEnabled, isDisabled }: Props) {
return (
<Dialog>
<Dialog.Button isDisabled={isDisabled}>
{isEnabled ? 'Disable' : 'Enable'} Magic DNS
</Dialog.Button>
<Dialog.Panel isDisabled={isDisabled}>
<Dialog.Title>
{isEnabled ? 'Disable' : 'Enable'} Magic DNS
</Dialog.Title>
<Dialog.Text>
Devices will no longer be accessible via your tailnet domain. The
search domain will also be disabled.
</Dialog.Text>
<input type="hidden" name="action_id" value="toggle_magic" />
<input
type="hidden"
name="new_state"
value={isEnabled ? 'disabled' : 'enabled'}
/>
</Dialog.Panel>
</Dialog>
);
return (
<Dialog>
<Button isDisabled={isDisabled}>{isEnabled ? "Disable" : "Enable"} Magic DNS</Button>
<DialogPanel isDisabled={isDisabled}>
<Title>{isEnabled ? "Disable" : "Enable"} Magic DNS</Title>
<Text>
Devices will no longer be accessible via your tailnet domain. The search domain will also
be disabled.
</Text>
<input type="hidden" name="action_id" value="toggle_magic" />
<input type="hidden" name="new_state" value={isEnabled ? "disabled" : "enabled"} />
</DialogPanel>
</Dialog>
);
}