gsadmin/headplane
1
0
Fork 0
mirror of https://github.com/tale/headplane.git synced 2026-09-04 11:15:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: switch to new aria components

Browse Source
This commit is contained in:
Aarnav Tale
2025-01-28 16:02:47 -05:00
parent 741f9aa6b5
commit 28e40eecbf
12 changed files with 181 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/machines/components/menu.tsx
+41 -41
View File
@@ -1,9 +1,8 @@
import { KebabHorizontalIcon } from '@primer/octicons-react';
import React, { useState } from 'react';
import MenuComponent from '~/components/Menu';
import { Cog, Ellipsis } from 'lucide-react';
import { useState } from 'react';
import Menu from '~/components/Menu';
import type { Machine, Route, User } from '~/types';
import { cn } from '~/utils/cn';
import Delete from '../dialogs/delete';
import Expire from '../dialogs/expire';
import Move from '../dialogs/move';
@@ -16,17 +15,17 @@ interface MenuProps {
routes: Route[];
users: User[];
magic?: string;
buttonChild?: React.ReactNode;
isFullButton?: boolean;
}
type Modal = 'rename' | 'expire' | 'remove' | 'routes' | 'move' | 'tags' | null;
export default function Menu({
export default function MachineMenu({
machine,
routes,
magic,
users,
buttonChild,
isFullButton,
}: MenuProps) {
const [modal, setModal] = useState<Modal>(null);
@@ -97,44 +96,45 @@ export default function Menu({
/>
)}
<MenuComponent>
{buttonChild ?? (
<MenuComponent.Button
<Menu>
{isFullButton ? (
<Menu.Button className="flex items-center gap-x-2">
<Cog className="h-5" />
<p>Machine Settings</p>
</Menu.Button>
) : (
<Menu.IconButton
label="Machine Options"
className={cn(
'flex items-center justify-center',
'border border-transparent rounded-lg py-0.5 w-10',
'group-hover:border-gray-200 dark:group-hover:border-zinc-700',
'py-0.5 w-10 bg-transparent border-transparent',
'border group-hover:border-headplane-200',
'dark:group-hover:border-headplane-700',
)}
>
<KebabHorizontalIcon className="w-5" />
</MenuComponent.Button>
<Ellipsis className="h-5" />
</Menu.IconButton>
)}
<MenuComponent.Items>
<MenuComponent.ItemButton onPress={() => setModal('rename')}>
Edit machine name
</MenuComponent.ItemButton>
<MenuComponent.ItemButton onPress={() => setModal('routes')}>
Edit route settings
</MenuComponent.ItemButton>
<MenuComponent.ItemButton onPress={() => setModal('tags')}>
Edit ACL tags
</MenuComponent.ItemButton>
<MenuComponent.ItemButton onPress={() => setModal('move')}>
Change owner
</MenuComponent.ItemButton>
{expired ? undefined : (
<MenuComponent.ItemButton onPress={() => setModal('expire')}>
Expire
</MenuComponent.ItemButton>
)}
<MenuComponent.ItemButton
className="text-red-500 dark:text-red-400"
onPress={() => setModal('remove')}
>
Remove
</MenuComponent.ItemButton>
</MenuComponent.Items>
</MenuComponent>
<Menu.Panel onAction={(key) => setModal(key as Modal)}>
<Menu.Section>
<Menu.Item key="rename">Edit machine name</Menu.Item>
<Menu.Item key="routes">Edit route settings</Menu.Item>
<Menu.Item key="tags">Edit ACL tags</Menu.Item>
<Menu.Item key="move">Change owner</Menu.Item>
</Menu.Section>
<Menu.Section>
{expired ? (
<></>
) : (
<Menu.Item key="expire" textValue="Expire">
<p className="text-red-500 dark:text-red-400">Expire</p>
</Menu.Item>
)}
<Menu.Item key="remove" textValue="Remove">
<p className="text-red-500 dark:text-red-400">Remove</p>
</Menu.Item>
</Menu.Section>
</Menu.Panel>
</Menu>
</>
);
}