Files
cadhub/app/web/src/components/NavPlusButton/NavPlusButton.tsx
2021-09-08 17:44:31 +10:00

47 lines
1.4 KiB
TypeScript

import { Link, routes } from '@redwoodjs/router'
import Svg from 'src/components/Svg/Svg'
import { Popover } from '@headlessui/react'
import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
const menuOptions: {
name: string
sub: string
ideType: CadPackageType
}[] = [
{
name: 'OpenSCAD',
sub: 'beta',
ideType: 'openscad',
},
{ name: 'CadQuery', sub: 'beta', ideType: 'cadquery' },
// { name: 'JSCAD', sub: 'alpha', ideType: 'jscad' }, // TODO #422, add jscad to db schema when were ready to enable saving of jscad projects
]
const NavPlusButton: React.FC = () => {
return (
<Popover className="relative outline-none w-full h-full">
<Popover.Button className="h-full w-full outline-none">
<Svg name="plus" className="text-gray-200" />
</Popover.Button>
<Popover.Panel className="absolute z-10 right-0">
<ul className="bg-gray-200 mt-4 rounded shadow-md overflow-hidden">
{menuOptions.map(({ name, sub, ideType }) => (
<li
key={name}
className="px-4 py-2 hover:bg-gray-400 text-gray-800"
>
<Link to={routes.draftProject({ cadPackage: ideType })}>
<div>{name}</div>
<div className="text-xs text-gray-600 font-light">{sub}</div>
</Link>
</li>
))}
</ul>
</Popover.Panel>
</Popover>
)
}
export default NavPlusButton