rsp2k/headplane
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: redesign buttons and share them in dialogs

Browse source
This commit is contained in:
Aarnav Tale 2025-01-19 17:31:46 +00:00
parent b9a708b2e9
commit af248df648
No known key found for this signature in database
10 changed files with 104 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/routes/machines/components/machine.tsx
View file

@ -111,9 +111,12 @@ export default function MachineRow({ machine, routes, magic, users, stats }: Pro
<div className="flex items-center gap-x-1">
{machine.ipAddresses[0]}
<Menu>
<Menu.Button>
<Menu.IconButton
className="bg-transparent"
label="IP Addresses"
>
<ChevronDownIcon className="w-4 h-4" />
</Menu.Button>
</Menu.IconButton>
<Menu.Items>
{machine.ipAddresses.map((ip) => (
<Menu.ItemButton

28
app/routes/machines/machine.tsx
View file

@ -64,7 +64,7 @@ export async function action({ request }: ActionFunctionArgs) {
export default function Page() {
const { machine, magic, routes, users } = useLoaderData<typeof loader>();
const routesState = useState(false);
const [showRouting, setShowRouting] = useState(false);
useLiveData({ interval: 1000 });
const expired =
@ -201,7 +201,11 @@ export default function Page() {
</div>
</div>
<h2 className="text-xl font-medium mb-4 mt-8">Subnets & Routing</h2>
<Routes machine={machine} routes={routes} state={routesState} />
<Routes
machine={machine}
routes={routes}
state={[showRouting, setShowRouting]}
/>
<div className="flex items-center justify-between mb-4">
<p>
Subnets let you expose physical network routes onto Tailscale.{' '}
@ -212,7 +216,7 @@ export default function Page() {
Learn More
</Link>
</p>
<Button variant="light" control={routesState}>
<Button onPress={() => setShowRouting(true)}>
Review
</Button>
</div>
@ -247,13 +251,11 @@ export default function Page() {
)}
</div>
<Button
onPress={() => setShowRouting(true)}
className={cn(
'p-0 rounded-sm bg-transparent mt-1',
'px-1.5 py-0.5 rounded-md mt-1.5',
'text-blue-500 dark:text-blue-400',
'hover:bg-transparent',
'hover:text-blue-600 dark:hover:text-blue-500',
)}
control={routesState}
>
Edit
</Button>
@ -283,13 +285,11 @@ export default function Page() {
)}
</div>
<Button
onPress={() => setShowRouting(true)}
className={cn(
'p-0 rounded-sm bg-transparent mt-1',
'px-1.5 py-0.5 rounded-md mt-1.5',
'text-blue-500 dark:text-blue-400',
'hover:bg-transparent',
'hover:text-blue-600 dark:hover:text-blue-500',
)}
control={routesState}
>
Edit
</Button>
@ -322,13 +322,11 @@ export default function Page() {
)}
</div>
<Button
onPress={() => setShowRouting(true)}
className={cn(
'p-0 rounded-sm bg-transparent mt-1',
'px-1.5 py-0.5 rounded-md mt-1.5',
'text-blue-500 dark:text-blue-400',
'hover:bg-transparent',
'hover:text-blue-600 dark:hover:text-blue-500',
)}
control={routesState}
>
Edit
</Button>

21
app/routes/users/dialogs/remove.tsx
View file

@ -1,8 +1,8 @@
import { XIcon } from '@primer/octicons-react';
import { X } from 'lucide-react';
import { Form, useSubmit } from 'react-router';
import { useState } from 'react';
import Button from '~/components/Button';
import IconButton from '~/components/IconButton';
import Code from '~/components/Code';
import Dialog from '~/components/Dialog';
@ -12,19 +12,18 @@ interface Props {
export default function Remove({ username }: Props) {
const submit = useSubmit();
const dialogState = useState(false);
const [dialog, setDialog] = useState(false);
return (
<>
<Button
variant="light"
control={dialogState}
className="rounded-full p-0 w-8 h-8 flex items-center justify-center"
<IconButton
label={`Delete ${username}`}
onPress={() => setDialog(true)}
>
<XIcon className="w-4 h-4" />
</Button>
<Dialog control={dialogState}>
<Dialog.Panel control={dialogState}>
<X className="p-0.5" />
</IconButton>
<Dialog control={[dialog, setDialog]}>
<Dialog.Panel control={[dialog, setDialog]}>
{(close) => (
<>
<Dialog.Title>Delete {username}?</Dialog.Title>

21
app/routes/users/dialogs/rename.tsx
View file

@ -1,8 +1,8 @@
import { PencilIcon } from '@primer/octicons-react';
import { Pencil } from 'lucide-react';
import { Form, useSubmit } from 'react-router';
import { useState } from 'react';
import Button from '~/components/Button';
import IconButton from '~/components/IconButton';
import Dialog from '~/components/Dialog';
import TextField from '~/components/TextField';
@ -13,20 +13,19 @@ interface Props {
export default function Rename({ username, magic }: Props) {
const submit = useSubmit();
const dialogState = useState(false);
const [dialog, setDialog] = useState(false);
const [newName, setNewName] = useState(username);
return (
<>
<Button
variant="light"
control={dialogState}
className="rounded-full p-0 w-8 h-8 flex items-center justify-center"
<IconButton
label={`Rename ${username}`}
onPress={() => setDialog(true)}
>
<PencilIcon className="w-4 h-4" />
</Button>
<Dialog control={dialogState}>
<Dialog.Panel control={dialogState}>
<Pencil className="p-1" />
</IconButton>
<Dialog control={[dialog, setDialog]}>
<Dialog.Panel control={[dialog, setDialog]}>
{(close) => (
<>
<Dialog.Title>Rename {username}?</Dialog.Title>