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>