dahjah/headplane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

chore: add new tab links

Browse Source
This commit is contained in:
Aarnav Tale 2024-03-26 17:42:35 -04:00
parent cce30bd29c
commit 77702c1bae
No known key found for this signature in database
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/TabLink.tsx
View File

@ -13,7 +13,7 @@ export default function TabLink({ name, to, icon }: Properties) {
<NavLink <NavLink
to={to} to={to}
className={({ isActive, isPending }) => clsx( className={({ isActive, isPending }) => clsx(
'flex items-center gap-x-2 p-2 border-b-2 text-sm', 'flex items-center gap-x-2 p-2 border-b-2 text-md',
isActive ? 'border-white' : 'border-transparent' isActive ? 'border-white' : 'border-transparent'
)} )}
> >

9
app/routes/_data.tsx
View File

@ -1,4 +1,4 @@
import { CpuChipIcon, ServerStackIcon, UsersIcon } from '@heroicons/react/24/outline' import { Cog8ToothIcon, CpuChipIcon, GlobeAltIcon, LockClosedIcon, ServerStackIcon, UsersIcon } from '@heroicons/react/24/outline'
import { type LoaderFunctionArgs, redirect } from '@remix-run/node' import { type LoaderFunctionArgs, redirect } from '@remix-run/node'
import { Outlet } from '@remix-run/react' import { Outlet } from '@remix-run/react'
@ -45,8 +45,11 @@ export default function Layout() {
<h1 className='text-2xl'>Headplane</h1> <h1 className='text-2xl'>Headplane</h1>
</div> </div>
<div className='flex items-center gap-x-4'> <div className='flex items-center gap-x-4'>
<TabLink to='/machines' name='Machines' icon={<ServerStackIcon className='w-4 h-4'/>}/> <TabLink to='/machines' name='Machines' icon={<ServerStackIcon className='w-5 h-5'/>}/>
<TabLink to='/users' name='Users' icon={<UsersIcon className='w-4 h-4'/>}/> <TabLink to='/users' name='Users' icon={<UsersIcon className='w-5 h-5'/>}/>
<TabLink to='/acls' name='Access Control' icon={<LockClosedIcon className='w-5 h-5'/>}/>
<TabLink to='/dns' name='DNS' icon={<GlobeAltIcon className='w-5 h-5'/>}/>
<TabLink to='/settings' name='Settings' icon={<Cog8ToothIcon className='w-5 h-5'/>}/>
</div> </div>
</nav> </nav>
</header> </header>