115 lines
2.7 KiB
TypeScript
115 lines
2.7 KiB
TypeScript
import { KebabHorizontalIcon } from '@primer/octicons-react'
|
|
import { ReactNode, useState } from 'react'
|
|
|
|
import MenuComponent from '~/components/Menu'
|
|
import { 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'
|
|
import Rename from './dialogs/rename'
|
|
import Routes from './dialogs/routes'
|
|
import Tags from './dialogs/tags'
|
|
|
|
interface MenuProps {
|
|
machine: Machine
|
|
routes: Route[]
|
|
users: User[]
|
|
magic?: string
|
|
buttonChild?: ReactNode
|
|
}
|
|
|
|
export default function Menu({ machine, routes, magic, users, buttonChild }: MenuProps) {
|
|
const renameState = useState(false)
|
|
const expireState = useState(false)
|
|
const removeState = useState(false)
|
|
const routesState = useState(false)
|
|
const moveState = useState(false)
|
|
const tagsState = useState(false)
|
|
|
|
const expired = machine.expiry === '0001-01-01 00:00:00'
|
|
|| machine.expiry === '0001-01-01T00:00:00Z'
|
|
|| machine.expiry === null
|
|
? false
|
|
: new Date(machine.expiry).getTime() < Date.now()
|
|
|
|
return (
|
|
<>
|
|
<Rename
|
|
machine={machine}
|
|
state={renameState}
|
|
magic={magic}
|
|
/>
|
|
<Delete
|
|
machine={machine}
|
|
state={removeState}
|
|
/>
|
|
{expired
|
|
? undefined
|
|
: (
|
|
<Expire
|
|
machine={machine}
|
|
state={expireState}
|
|
/>
|
|
)}
|
|
<Routes
|
|
machine={machine}
|
|
routes={routes}
|
|
state={routesState}
|
|
/>
|
|
<Tags
|
|
machine={machine}
|
|
state={tagsState}
|
|
/>
|
|
<Move
|
|
machine={machine}
|
|
state={moveState}
|
|
users={users}
|
|
magic={magic}
|
|
/>
|
|
|
|
<MenuComponent>
|
|
{buttonChild ?? (
|
|
<MenuComponent.Button
|
|
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',
|
|
)}
|
|
>
|
|
<KebabHorizontalIcon className="w-5" />
|
|
</MenuComponent.Button>
|
|
)}
|
|
<MenuComponent.Items>
|
|
<MenuComponent.ItemButton control={renameState}>
|
|
Edit machine name
|
|
</MenuComponent.ItemButton>
|
|
<MenuComponent.ItemButton control={routesState}>
|
|
Edit route settings
|
|
</MenuComponent.ItemButton>
|
|
<MenuComponent.ItemButton control={tagsState}>
|
|
Edit ACL tags
|
|
</MenuComponent.ItemButton>
|
|
<MenuComponent.ItemButton control={moveState}>
|
|
Change owner
|
|
</MenuComponent.ItemButton>
|
|
{expired
|
|
? undefined
|
|
: (
|
|
<MenuComponent.ItemButton control={expireState}>
|
|
Expire
|
|
</MenuComponent.ItemButton>
|
|
)}
|
|
<MenuComponent.ItemButton
|
|
className="text-red-500 dark:text-red-400"
|
|
control={removeState}
|
|
>
|
|
Remove
|
|
</MenuComponent.ItemButton>
|
|
</MenuComponent.Items>
|
|
</MenuComponent>
|
|
</>
|
|
)
|
|
}
|