sirtimbly/bewcloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make it public!

Browse Source
This commit is contained in:
Bruno Bernardino
2024-03-16 08:40:24 +00:00
commit a5cafdddca
114 changed files with 9569 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
components/Header.tsx Normal file
View File

@@ -0,0 +1,174 @@
import { Head } from 'fresh/runtime.ts';
import { User } from '/lib/types.ts';
interface Data {
route: string;
user?: User;
}
interface MenuItem {
url: string;
label: string;
}
export default function Header({ route, user }: Data) {
const activeClass = 'bg-slate-800 text-white rounded-md px-3 py-2 text-sm font-medium';
const defaultClass = 'text-slate-300 hover:bg-slate-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium';
const mobileActiveClass = 'bg-slate-800 text-white block rounded-md px-3 py-2 text-base font-medium';
const mobileDefaultClass =
'text-slate-300 hover:bg-slate-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium';
const iconWidthAndHeightInPixels = 20;
const menuItems: MenuItem[] = [
{
url: '/dashboard',
label: 'Dashboard',
},
{
url: '/news',
label: 'News',
},
{
url: '/contacts',
label: 'Contacts',
},
{
url: '/calendar',
label: 'Calendar',
},
{
url: '/tasks',
label: 'Tasks',
},
{
url: '/files',
label: 'Files',
},
{
url: '/notes',
label: 'Notes',
},
{
url: '/photos',
label: 'Photos',
},
];
if (user) {
const activeMenu = menuItems.find((menu) => route.startsWith(menu.url));
let pageLabel = activeMenu?.label || '404 - Page not found';
if (route.startsWith('/news/feeds')) {
pageLabel = 'News feeds';
}
if (route.startsWith('/settings')) {
pageLabel = 'Settings';
}
return (
<>
<Head>
<title>{pageLabel} - bewCloud</title>
</Head>
<nav class='bg-slate-950'>
<div class='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
<div class='flex h-16 items-center justify-between'>
<div class='flex items-center'>
<div class='flex-shrink-0'>
<a href='/'>
<img class='h-12 w-12 drop-shadow-md' src='/images/logomark.svg' alt='a stylized blue cloud' />
</a>
</div>
<div class='hidden md:block'>
<div class='ml-10 flex items-center space-x-4'>
{menuItems.map((menu) => (
<a href={menu.url} class={route.startsWith(menu.url) ? activeClass : defaultClass}>
<img
src={`/images${menu.url}${'.svg'}`}
alt={menu.label}
title={menu.label}
width={iconWidthAndHeightInPixels}
height={iconWidthAndHeightInPixels}
class='white'
/>
</a>
))}
</div>
</div>
</div>
<div class='ml-4 flex items-center md:ml-6'>
<div class='ml-10 flex items-center space-x-4'>
<span class='mx-2 text-white text-sm'>{user.email}</span>
<a
href='/settings'
class={route.startsWith('/settings') ? activeClass : defaultClass}
>
<img
src='/images/settings.svg'
alt='Settings'
title='Settings'
width={iconWidthAndHeightInPixels}
height={iconWidthAndHeightInPixels}
class='white'
/>
</a>
<a
href='/logout'
class={defaultClass}
>
<img
src='/images/logout.svg'
alt='Logout'
title='Logout'
width={iconWidthAndHeightInPixels}
height={iconWidthAndHeightInPixels}
class='white'
/>
</a>
</div>
</div>
</div>
</div>
<div class='md:hidden' id='mobile-menu'>
<div class='space-y-1 px-2 pb-3 pt-2 sm:px-3'>
{menuItems.map((menu) => (
<a href={menu.url} class={route.startsWith(menu.url) ? mobileActiveClass : mobileDefaultClass}>
{menu.label}
</a>
))}
</div>
</div>
</nav>
<header class='bg-gray-900 shadow-md'>
<div class='mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8'>
<h1 class='text-3xl font-bold tracking-tight text-white'>
{pageLabel}
</h1>
</div>
</header>
</>
);
}
return (
<header class='px-4 pt-8 pb-2 max-w-screen-md mx-auto flex flex-col items-center justify-center'>
<a href='/'>
<img
class='mt-6 mb-2 drop-shadow-md'
src='/images/logo-white.svg'
width='250'
height='50'
alt='the bewCloud logo: a stylized logo'
/>
</a>
</header>
);
}