85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { AppShell, Flex, Button, Box, Container } from '@pikku/mantine/core';
|
|
import '@/styles/datatable.css';
|
|
import Link from '@/framework/link';
|
|
import { usePathname, useRouter, useParams } from '@/framework/navigation';
|
|
import { IconArrowLeft } from '@tabler/icons-react';
|
|
import LanguageSelector from '@/components/ui/LanguageSelector';
|
|
import Logo from '@/components/ui/Logo';
|
|
import { useI18n } from '@/context/i18n-provider';
|
|
import { asI18n } from '@pikku/react';
|
|
|
|
interface BackOfficeLayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function BackOfficeLayout({ children }: BackOfficeLayoutProps) {
|
|
const t = useI18n();
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const lang = params.lang as string;
|
|
const isDetailPage = pathname.includes('/backoffice/candidate/');
|
|
|
|
// Don't apply AppShell to auth pages
|
|
if (pathname.includes('/backoffice/auth')) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
return (
|
|
<AppShell
|
|
padding="md"
|
|
header={{ height: 80 }}
|
|
styles={{
|
|
main: {
|
|
backgroundColor: 'var(--mantine-color-gray-0)',
|
|
}
|
|
}}
|
|
>
|
|
<AppShell.Header>
|
|
{isDetailPage ? (
|
|
<Box style={{ borderBottom: '1px solid var(--mantine-color-gray-2)', height: '100%' }}>
|
|
<Container size="xl" h="100%">
|
|
<Flex align="center" justify="space-between" h="100%">
|
|
<Button
|
|
variant="default"
|
|
leftSection={<IconArrowLeft size={16} />}
|
|
onClick={() => router.push(`/${lang}/backoffice/candidates`)}
|
|
>
|
|
{t('backoffice.navigation.backtocandidates')}
|
|
</Button>
|
|
<LanguageSelector />
|
|
</Flex>
|
|
</Container>
|
|
</Box>
|
|
) : (
|
|
<Flex align="center" justify="space-between" h="100%" px="md">
|
|
<Logo size="sm" type={t('backoffice.navigation.adminbadge')} />
|
|
|
|
<Flex gap="sm" align="center">
|
|
<Button
|
|
component={Link}
|
|
href={`/${lang}/backoffice/candidates`}
|
|
variant={pathname.includes('/backoffice/candidates') ? 'filled' : 'default'}
|
|
>
|
|
{asI18n('Candidates')}
|
|
</Button>
|
|
<Button
|
|
component={Link}
|
|
href={`/${lang}/backoffice/translations`}
|
|
variant={pathname.includes('/backoffice/translations') ? 'filled' : 'default'}
|
|
>
|
|
{asI18n('Translations')}
|
|
</Button>
|
|
<LanguageSelector />
|
|
</Flex>
|
|
</Flex>
|
|
)}
|
|
</AppShell.Header>
|
|
|
|
<AppShell.Main>{children}</AppShell.Main>
|
|
</AppShell>
|
|
);
|
|
}
|