fixes

Menzorg · Feb 1, 2024 · ccc73fa · ccc73fa
1 parent 1f8510a
commit ccc73fa
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/src/app/education/education-card.tsx b/src/app/education/education-card.tsx
@@ -1,28 +1,38 @@
 
 import { Flex, VStack, HStack, Box, Text, useMediaQuery } from '@chakra-ui/react';
 import { HoveredStyledLink } from '../footer-link';
+import { PiPlayFill } from "react-icons/pi";
+import { IconProvider } from "../icon-provider";
+import { useRouter } from 'next/navigation'
 
-export default function EducationCard({tags, title, level, profession, document, key}: {tags: {href: string; text: string}[], title: string; level: string; profession: string; document?: string; key: any;}) {
+export default function EducationCard({tags, title, level, profession, document, link='#', key}: {tags: {href: string; text: string}[], title: string; level: string; profession: string; document?: string; key: any; link: string;}) {
   const [isMax959] = useMediaQuery('(max-width: 959px)');
   const [isMax628] = useMediaQuery('(max-width: 628px)');
+  const router = useRouter()
     return (
-    <Box borderWidth='2px' borderRadius='lg' p="1rem 1rem" w="100%">
-      <Flex direction={isMax628 ? "column" : "row"} justifyContent="space-between" bg="#F9F9F9">
+    <Box key={key} borderWidth='2px' borderRadius='lg' p="1rem 1rem" w="100%">
+      <Flex direction={isMax628 ? "column" : "row"} justifyContent="space-between"  borderRadius='lg' bg="#F9F9F9">
         <Flex direction="column">
           { tags?.length ?
             <HStack mb="1rem" p="1rem 1rem" spacing="1rem"  sx={{flexWrap: 'wrap'}}>
               { tags.map((tag)=> <HoveredStyledLink key={tag.text} href={tag.href} text={tag.text} />) }
             </HStack>
             : null
           }
-          <Text p="0rem 1rem" textStyle="h4">Курс: {title}</Text>
+          <Text p="0rem 1rem" textStyle="h4" color="secondary">Курс: {title}</Text>
           <VStack align="left" p="1.5rem">
             <Text>Уровень: {level}</Text>
             <Text>Профессия: {profession}</Text>
             <Text>Документ: {document}</Text>
           </VStack>
         </Flex>
-          <Flex direction="column"> <Box as="button" w={isMax628 ? "100%" : "6rem"} h={isMax628 ? "6rem" : "100%"} bg="#d9d9d9"/></Flex> 
+        <Flex direction="column">
+          <Box borderRadius={isMax628 ? 'lg' : '0% 0.5rem 0.5rem 0%'} as="button" w={isMax628 ? "100%" : "6rem"} h={isMax628 ? "6rem" : "100%"} bg='secondary' onClick={() => router.push(link)}>
+            <Flex direction="row" justify="center">
+              <IconProvider color="white" size='2rem' icon={<PiPlayFill />} />
+            </Flex> 
+          </Box>
+        </Flex> 
       </Flex>  
     </Box>);
   }
diff --git a/src/app/education/page.tsx b/src/app/education/page.tsx
@@ -32,7 +32,8 @@ const courses = [
     title: 'Консультант по стилю (2 месяца)',
     level: 'Имидж и стиль, 1 ступень',
     profession: 'консультант по имиджу и стилю, шопер',
-    document: 'удостоверение о повышении квалификации гос.ВУЗа'
+    document: 'удостоверение о повышении квалификации гос.ВУЗа',
+    link: 'education/style-consultant'
   },
   {
     tags: [
@@ -90,7 +91,7 @@ export default function Home() {
   const [isMax959] = useMediaQuery('(max-width: 959px)')
   return (
   <Flex direction="column">
-    <Header page="Коммерческое образование"/>
+    <Header breadcrumbs={[{text: 'Коммерческое образование'}]}/>
     <VStack align="center" p={isMax959 ? 0 : "3rem 6rem"} spacing="2rem">
       { courses.map((course, i)=> <EducationCard key={i} {...course} /> ) }
     </VStack>

diff --git a/src/app/header.tsx b/src/app/header.tsx
@@ -3,14 +3,28 @@
 import React from 'react';
 import { HamburgerIcon, LockIcon } from '@chakra-ui/icons'
 import { useMediaQuery, Flex, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, DrawerHeader, DrawerBody, IconButton, Box, useDisclosure } from '@chakra-ui/react'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+} from '@chakra-ui/react'
 
 export default function Header(props: any) {
   const [isMax959] = useMediaQuery('(max-width: 959px)')
   const { isOpen, onOpen, onClose } = useDisclosure()
   return (
       <Flex direction="row" align="center" height="35" bg="#F9F9F9" color="black" p={isMax959 ? 0 : "2rem 6rem"}>
         <IconButton aria-label='menu' icon={<HamburgerIcon />} onClick={onOpen}></IconButton>
-        <Box m="0 auto"><a href="/">ВШСДТ</a>{props?.page ? ' • ' + props?.page : ''}</Box>
+        <Box color="secondary" m="0 auto">
+          <Breadcrumb>
+            <BreadcrumbItem>
+              <BreadcrumbLink href='/'>ВШСДТ</BreadcrumbLink>
+            </BreadcrumbItem>
+            {props?.breadcrumbs ? props?.breadcrumbs.map((crumb, i) => <BreadcrumbItem key={i} isCurrentPage={props?.breadcrumbs.length === i+1}><BreadcrumbLink href={crumb.link}>{crumb.text}</BreadcrumbLink></BreadcrumbItem>)
+            : ''}
+          </Breadcrumb>
+        </Box>
         <LockIcon w={10} h={10} p="0.5rem"/>
         <Drawer placement="left" onClose={onClose} isOpen={isOpen} size="md">
           <DrawerOverlay />