Medplum

// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors // SPDX-License-Identifier: Apache-2.0 import { Anchor, AppShell, Box, Burger, Button, Center, Collapse, Container, Divider, Drawer, Group, HoverCard, rem, ScrollArea, SimpleGrid, Text, ThemeIcon, UnstyledButton, useMantineTheme, } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { IconBook, IconChartPie3, IconChevronDown, IconCode, IconCoin, IconFingerprint, IconNotification, } from '@tabler/icons-react'; import type { JSX } from 'react'; import { useNavigate } from 'react-router'; import { Logo } from '../../components/Logo'; import classes from './Header.module.css'; const mockdata = [ { icon: IconCode, title: 'Open source', description: 'This Pokémon’s cry is very loud and distracting', }, { icon: IconCoin, title: 'Free for everyone', description: 'The fluid of Smeargle’s tail secretions changes', }, { icon: IconBook, title: 'Documentation', description: 'Yanma is capable of seeing 360 degrees without', }, { icon: IconFingerprint, title: 'Security', description: 'The shell’s rounded shape and the grooves on its.', }, { icon: IconChartPie3, title: 'Analytics', description: 'This Pokémon uses its flying ability to quickly chase', }, { icon: IconNotification, title: 'Notifications', description: 'Combusken battles with the intensely hot flames it spews', }, ]; export function Header(): JSX.Element { const navigate = useNavigate(); const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false); const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false); const theme = useMantineTheme(); const links = mockdata.map((item) => ( <UnstyledButton className={classes.subLink} key={item.title}> <Group wrap="nowrap" align="flex-start"> <ThemeIcon size={34} variant="default" radius="md"> <item.icon style={{ width: rem(22), height: rem(22) }} color={theme.primaryColor} /> </ThemeIcon> <div> <Text size="sm" fw={500}> {item.title} </Text> <Text size="xs" c="dimmed"> {item.description} </Text> </div> </Group> </UnstyledButton> )); return ( <> <AppShell.Header px="md"> <Container h="100%"> <Group justify="space-between" h="100%"> <UnstyledButton className={classes.logoButton} onClick={() => navigate('/')?.catch(console.error)}> <Logo width={240} /> </UnstyledButton> <Group style={{ height: '100%' }} gap={0} className={classes.hiddenMobile}> <HoverCard width={600} position="bottom" radius="md" shadow="md" withinPortal> <HoverCard.Target> <a href="#" className={classes.link}> <Center inline> <Box component="span" mr={5}> Services </Box> <IconChevronDown size={16} /> </Center> </a> </HoverCard.Target> <HoverCard.Dropdown style={{ overflow: 'hidden' }}> <Group justify="space-between" px="md"> <Text fw={500}>Services</Text> <Anchor href="#" size="xs"> View all </Anchor> </Group> <Divider my="sm" mx="-md" /> <SimpleGrid cols={2} spacing={0}> {links} </SimpleGrid> <div className={classes.dropdownFooter}> <Group justify="space-between"> <div> <Text fw={500} size="sm"> Get started </Text> <Text size="xs" color="dimmed"> Their food sources have decreased, and their numbers </Text> </div> <Button variant="default">Get started</Button> </Group> </div> </HoverCard.Dropdown> </HoverCard> <a href="#" className={classes.link}> Counseling </a> <a href="#" className={classes.link}> Physicians </a> <a href="#" className={classes.link}> More </a> </Group> <Group className={classes.hiddenMobile}> <Button variant="default" onClick={() => navigate('/signin')?.catch(console.error)}> Log in </Button> <Button onClick={() => navigate('/register')?.catch(console.error)}>Sign up</Button> </Group> <Burger opened={drawerOpened} onClick={toggleDrawer} className={classes.hiddenDesktop} /> </Group> </Container> </AppShell.Header> <Drawer opened={drawerOpened} onClose={closeDrawer} size="100%" padding="md" title="Navigation" className={classes.hiddenDesktop} zIndex={1000000} > <ScrollArea style={{ height: 'calc(100vh - 60px)' }} mx="-md"> <Divider my="sm" /> <a href="#" className={classes.link}> Home </a> <UnstyledButton className={classes.link} onClick={toggleLinks}> <Center inline> <Box component="span" mr={5}> Features </Box> <IconChevronDown size={16} /> </Center> </UnstyledButton> <Collapse in={linksOpened}>{links}</Collapse> <a href="#" className={classes.link}> Learn </a> <a href="#" className={classes.link}> Academy </a> <Divider my="sm" /> <Group justify="center" grow pb="xl" px="md"> <Button variant="default" onClick={() => navigate('/signin')?.catch(console.error)}> Log in </Button> <Button onClick={() => navigate('/register')?.catch(console.error)}>Sign up</Button> </Group> </ScrollArea> </Drawer> </> ); }