generated from TBD54566975/tbd-project-template
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
<img width="1582" alt="Screenshot 2023-09-12 at 12 06 23 PM" src="https://github.com/TBD54566975/ftl/assets/51647/3d0dd9f4-6331-429f-9bc1-308027174145"> <img width="1582" alt="Screenshot 2023-09-12 at 12 06 28 PM" src="https://github.com/TBD54566975/ftl/assets/51647/1005c14f-1cdb-4c8d-80f7-551959778237"> <img width="1582" alt="Screenshot 2023-09-12 at 12 17 26 PM" src="https://github.com/TBD54566975/ftl/assets/51647/01abc76a-8e97-4880-bcf7-d317850f6229">
- Loading branch information
1 parent
c87d03a
commit 79a1025
Showing
12 changed files
with
113 additions
and
299 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { Outlet } from 'react-router-dom' | ||
| import { Navigation } from './Navigation' | ||
| import { Notification } from './Notification' | ||
| import { SidePanel } from './SidePanel' | ||
|
|
||
| export const Layout = () => { | ||
| return ( | ||
| <div className='flex h-screen'> | ||
| <Navigation /> | ||
|
|
||
| <main className='overflow-hidden'> | ||
| <section className='overflow-y-auto h-full'> | ||
| <Outlet /> | ||
| </section> | ||
| </main> | ||
|
|
||
| <SidePanel /> | ||
| <Notification /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,82 @@ | ||
| import { NavLink } from 'react-router-dom' | ||
| import { Schema, Timeline, ViewModuleSharp } from '@mui/icons-material' | ||
| import { useContext } from 'react' | ||
| import { Link, NavLink } from 'react-router-dom' | ||
| import { DarkModeSwitch } from '../components/DarkModeSwitch' | ||
| import { classNames } from '../utils/react.utils' | ||
| import { navColor } from '../utils/style.utils' | ||
| import { modulesContext } from '../providers/modules-provider' | ||
| import { classNames } from '../utils' | ||
|
|
||
| const navigation = [ | ||
| { name: 'Events', href: '/events', icon: Timeline }, | ||
| { name: 'Modules', href: '/modules', icon: ViewModuleSharp }, | ||
| { name: 'Graph', href: '/graph', icon: Schema }, | ||
| ] | ||
|
|
||
| export const Navigation = () => { | ||
| const modules = useContext(modulesContext) | ||
|
|
||
| return ( | ||
| <div className={`px-4 py-2 flex items-center justify-between ${navColor} text-white shadow-md`}> | ||
| <div className='flex items-center space-x-2'> | ||
| <NavLink to='/'> | ||
| <div className='pb-1'> | ||
| <span className='text-xl font-medium'>FTL</span> | ||
| <span className='px-2 text-pink-400 text-2xl font-medium'>∞</span> | ||
| </div> | ||
| </NavLink> | ||
| <div className='hidden md:block'> | ||
| <div className='ml-2 flex items-baseline space-x-4'> | ||
| <NavLink | ||
| to='/graph' | ||
| key='graph' | ||
| className={({ isActive }) => | ||
| classNames( | ||
| isActive ? 'bg-indigo-700 text-white' : 'text-white hover:bg-indigo-500 hover:bg-opacity-75', | ||
| 'rounded-md px-3 py-2 text-sm font-medium', | ||
| ) | ||
| } | ||
| > | ||
| Graph | ||
| </NavLink> | ||
| <div className='bg-gray-800 flex-shrink-0 w-52 h-full'> | ||
| <aside className={`flex flex-col h-full`}> | ||
| <div className='flex flex-col h-full overflow-y-auto bg-indigo-600'> | ||
| <div className='flex grow flex-col overflow-y-auto bg-indigo-600 px-4'> | ||
| <Link to='/events'> | ||
| <div className='-mx-2 space-y-1'> | ||
| <div className='flex shrink-0 items-center p-2 rounded-md hover:bg-indigo-700'> | ||
| <span className='text-2xl font-medium text-white'>FTL</span> | ||
| <span className='px-2 text-pink-400 text-2xl font-medium'>∞</span> | ||
| </div> | ||
| </div> | ||
| </Link> | ||
| <nav className='flex flex-1 flex-col pt-4'> | ||
| <ul role='list' className='flex flex-1 flex-col gap-y-7'> | ||
| <li> | ||
| <ul role='list' className='-mx-2 space-y-1'> | ||
| {navigation.map((item) => ( | ||
| <li key={item.name}> | ||
| <NavLink | ||
| to={item.href} | ||
| className={({ isActive }) => | ||
| classNames( | ||
| isActive | ||
| ? 'bg-indigo-700 text-white' | ||
| : 'text-indigo-200 hover:text-white hover:bg-indigo-700', | ||
| 'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold', | ||
| ) | ||
| } | ||
| > | ||
| {({ isActive }) => ( | ||
| <> | ||
| <item.icon | ||
| className={classNames( | ||
| isActive ? 'text-white' : 'text-indigo-200 group-hover:text-white', | ||
| 'h-6 w-6 shrink-0', | ||
| )} | ||
| aria-hidden='true' | ||
| /> | ||
| {item.name} | ||
| {item.href === '/modules' && ( | ||
| <span | ||
| className='ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-white ring-1 ring-inset ring-indigo-500' | ||
| aria-hidden='true' | ||
| > | ||
| {modules.modules.length} | ||
| </span> | ||
| )} | ||
| </> | ||
| )} | ||
| </NavLink> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </li> | ||
| <li className='pb-2 mt-auto'> | ||
| <DarkModeSwitch /> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <DarkModeSwitch /> | ||
| </aside> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.