forked from cerc-io/snowballtools-base
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { Logo } from 'components/Logo';
|
|
import { Button } from 'components/shared/Button';
|
|
import {
|
|
MenuIcon,
|
|
NotificationBellIcon,
|
|
SearchIcon,
|
|
} from 'components/shared/CustomIcon';
|
|
import { Sidebar } from 'components/shared/Sidebar';
|
|
import { OctokitProvider } from 'context/OctokitContext';
|
|
import React, { ComponentPropsWithoutRef } from 'react';
|
|
import { Outlet, useParams } from 'react-router-dom';
|
|
import { cn } from 'utils/classnames';
|
|
|
|
export interface DashboardLayoutProps
|
|
extends ComponentPropsWithoutRef<'section'> {}
|
|
|
|
export const DashboardLayout = ({
|
|
className,
|
|
children,
|
|
...props
|
|
}: DashboardLayoutProps) => {
|
|
const { orgSlug } = useParams();
|
|
|
|
return (
|
|
<section
|
|
{...props}
|
|
className={cn(
|
|
'flex flex-col lg:flex-row h-screen bg-snowball-50',
|
|
className,
|
|
)}
|
|
>
|
|
<Sidebar />
|
|
{/* Header on mobile */}
|
|
<div className="flex lg:hidden items-center px-4 py-4 justify-between">
|
|
<Logo orgSlug={orgSlug} />
|
|
<div className="flex items-center gap-0.5">
|
|
<Button iconOnly variant="ghost">
|
|
<NotificationBellIcon size={18} />
|
|
</Button>
|
|
<Button iconOnly variant="ghost">
|
|
<SearchIcon size={18} />
|
|
</Button>
|
|
<Button iconOnly variant="ghost">
|
|
<MenuIcon size={18} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 w-full h-full px-1 py-1 md:px-3 md:py-3 overflow-y-hidden">
|
|
<div className="rounded-3xl bg-base-bg h-full shadow-card overflow-y-auto relative">
|
|
<OctokitProvider>
|
|
<Outlet />
|
|
</OctokitProvider>
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</section>
|
|
);
|
|
};
|