Layout.tsx 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import { Flex, useDisclosure, Spinner, Breadcrumb, BreadcrumbItem, useColorModeValue, Box } from '@chakra-ui/react';
  2. import Head from 'next/head';
  3. import Link from 'next/link';
  4. import React from 'react';
  5. import { FiChevronRight } from 'react-icons/fi';
  6. import Header from './Header';
  7. import Menu from './Menu';
  8. import MenuDrawer from './MenuDrawer';
  9. interface IProps {
  10. loading?: boolean;
  11. breadcrumbs?: { name: string; href: string; current?: boolean }[];
  12. children: React.ReactNode;
  13. }
  14. const Layout: React.FC<IProps> = ({ children, loading, breadcrumbs }) => {
  15. const { isOpen, onClose, onOpen } = useDisclosure();
  16. const menubg = useColorModeValue('#F1F3F4', '#202736');
  17. const bg = useColorModeValue('white', '#1a202c');
  18. const renderContent = () => {
  19. if (loading) {
  20. return (
  21. <Flex className="justify-center flex-1">
  22. <Spinner />
  23. </Flex>
  24. );
  25. }
  26. return children;
  27. };
  28. const renderBreadcrumbs = () => {
  29. return (
  30. <Breadcrumb spacing="8px" separator={<FiChevronRight color="gray.500" />}>
  31. {breadcrumbs?.map((breadcrumb, index) => {
  32. return (
  33. <BreadcrumbItem className="hover:underline" isCurrentPage={breadcrumb.current} key={index}>
  34. <Link href={breadcrumb.href}>{breadcrumb.name}</Link>
  35. </BreadcrumbItem>
  36. );
  37. })}
  38. </Breadcrumb>
  39. );
  40. };
  41. return (
  42. <>
  43. <Head>
  44. <title>Tipi</title>
  45. </Head>
  46. <Flex height="100vh" direction="column">
  47. <MenuDrawer isOpen={isOpen} onClose={onClose}>
  48. <Menu />
  49. </MenuDrawer>
  50. <Header onClickMenu={onOpen} />
  51. <Flex flex={1}>
  52. <Flex height="100vh" bg={menubg} className="sticky top-0 invisible md:visible w-0 md:w-64">
  53. <Menu />
  54. </Flex>
  55. <Box bg={bg} className="flex-1 px-4 py-4 md:px-10 md:py-8">
  56. {renderBreadcrumbs()}
  57. {renderContent()}
  58. </Box>
  59. </Flex>
  60. </Flex>
  61. </>
  62. );
  63. };
  64. export default Layout;