feat: Our Projects modal

src/api/our-projects.ts

@@ -0,0 +1,12 @@
+export const getOurProjects = async (locale: string) => {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/our-project?locale=${locale}&pagination[pageSize]=100
+                &populate[aboutProject][populate]=*
+                &populate[github][populate]=*
+                &populate[api][populate]=*`;
+
+  return await fetch(url, {
+    method: 'GET',
+  })
+    .then(data => data.json())
+    .then(data => data?.data?.attributes);
+};

src/components/Modal/Modal.module.scss

@@ -178,5 +178,13 @@
     .fullSizeMobile {
       max-width: unset;
     }
+
+    .fullHeightMobile {
+      max-height: unset;
+      max-width: unset;
+      width: 100vw;
+      height: 100vh;
+      margin: unset;
+    }
   }
 }

src/components/Modal/Modal.tsx

@@ -19,6 +19,7 @@ type ModalProps = {
   bodyClassName?: string;
   wrapperClassName?: string;
   fullSizeMobile?: boolean;
+  fullHeightMobile?: boolean;
   removeBorderMobile?: boolean;
   disableBackgroundClick?: boolean;
   disableClose?: boolean;
@@ -46,6 +47,7 @@ const Modal: FC<ModalProps> = ({
   disableClose,
   grayTitle,
   dataCy,
+  fullHeightMobile,
 }) => {
   const handleClose = () => {
     onClick();
@@ -103,6 +105,7 @@ const Modal: FC<ModalProps> = ({
           [styles.bobModal]: size === 'bob-modal',
           [wrapperClassName]: wrapperClassName,
           [styles.fullSizeMobile]: fullSizeMobile,
+          [styles.fullHeightMobile]: fullHeightMobile,
         })}
       >
         {!removeHeader && (

src/components/OurProjectsModal/OurProjectsModal.module.scss

@@ -0,0 +1,59 @@
+.projectInfo {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+
+  .name {
+    font-size: 16px;
+    color: #000000d9;
+    text-decoration: underline dotted;
+    text-underline-offset: 5px;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+}
+
+.linksWrapper {
+  display: flex;
+  gap: 16px;
+  padding-bottom: 40px;
+  padding-top: 20px;
+}
+
+.buttonStyleLink {
+  background-color: unset;
+  border: 1px solid #000000;
+  width: 100%;
+  padding: 4px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: 0.2s;
+  gap: 6px;
+  color: #000000d9;
+  font-size: 16px;
+  text-decoration: none;
+
+  &:hover {
+    background-color: #000000;
+    color: #ffffff;
+
+    .darkIcon {
+      display: none;
+    }
+
+    .lightIcon {
+      display: inline-block;
+    }
+  }
+
+  .lightIcon {
+    display: none;
+  }
+}
+
+.doneBtn {
+  text-align: right;
+}

src/components/OurProjectsModal/OurProjectsModal.tsx

@@ -0,0 +1,125 @@
+import React, { FC } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import Modal from '@components/Modal';
+import Button from '@components/Button';
+
+import type { OurProjectsModalProps } from './OurProjectsModal.types';
+
+import styles from './OurProjectsModal.module.scss';
+
+const OurProjectsModal: FC<OurProjectsModalProps> = ({
+  onClose,
+  title,
+  projects,
+  github,
+  api,
+}) => {
+  return (
+    <Modal
+      onClick={onClose}
+      title={title}
+      hasBorder
+      fullHeightMobile
+      dataCy={'our-projects-modal'}
+    >
+      {projects &&
+        projects.map((project: any, index: number) => {
+          return (
+            <div key={index}>
+              <div
+                className={styles.projectInfo}
+                data-cy={'our-projects-content'}
+              >
+                <Image
+                  src={`${process.env.NEXT_PUBLIC_STRAPI}${project.image.data.attributes.url}`}
+                  width={20}
+                  height={20}
+                  alt={project.name}
+                />
+                <Link
+                  href={project.link || ''}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.name}
+                >
+                  {project.name}
+                  <Image
+                    src={'/assets/project-icons/open-link.png'}
+                    alt={''}
+                    width={16}
+                    height={16}
+                    unoptimized
+                  />
+                </Link>
+              </div>
+              <div dangerouslySetInnerHTML={{ __html: project.description }} />
+              <div />
+            </div>
+          );
+        })}
+      <hr />
+      <div className={styles.linksWrapper}>
+        <Link
+          href={github[0]?.link || ''}
+          target={'_blank'}
+          className={styles.buttonStyleLink}
+        >
+          <Image
+            src={'/assets/project-icons/github-dark.png'}
+            alt={'GitHubIcon'}
+            width={20}
+            height={20}
+            className={styles.darkIcon}
+            unoptimized
+          />
+          <Image
+            src={'/assets/project-icons/github-light.png'}
+            alt={'GitHubIcon'}
+            width={20}
+            height={20}
+            className={styles.lightIcon}
+            unoptimized
+          />
+
+          {github[0]?.linkName}
+        </Link>
+        <Link
+          href={api[0]?.link || ''}
+          className={styles.buttonStyleLink}
+          target={'_blank'}
+        >
+          <Image
+            src={'/assets/project-icons/api-dark.png'}
+            alt={'GitHubIcon'}
+            width={20}
+            height={20}
+            className={styles.darkIcon}
+            unoptimized
+          />
+          <Image
+            src={'/assets/project-icons/api-light.png'}
+            alt={'GitHubIcon'}
+            width={20}
+            height={20}
+            className={styles.lightIcon}
+            unoptimized
+          />
+          {api[0]?.linkName}
+        </Link>
+      </div>
+
+      <div className={styles.doneBtn}>
+        <Button
+          label={'Done'}
+          onClick={() => onClose()}
+          type={'primary'}
+          dataCy={'our-projects-close-button'}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+export default OurProjectsModal;

src/components/OurProjectsModal/OurProjectsModal.types.ts

@@ -0,0 +1,25 @@
+export type OurProjectsModalProps = {
+  title: string;
+  onClose: () => void;
+  projects?: {
+    name: string;
+    link: string;
+    description: string;
+    image: {
+      data: {
+        attributes: {
+          url: string;
+        };
+      };
+    };
+  }[];
+  api: {
+    link: string;
+    linkName: string;
+  };
+  github: {
+    link: string;
+    linkName: string;
+  };
+  doneTxt?: string;
+};

src/components/OurProjectsModal/index.ts

@@ -0,0 +1,3 @@
+import OurProjectsModal from './OurProjectsModal';
+
+export default OurProjectsModal;

src/components/PageSwitcher/PageSwitcher.module.scss

@@ -20,6 +20,7 @@ $active-color: #359eff;
     &:link {
       text-decoration: none;
     }
+
     .bob {
       opacity: 85%;
       width: 23px !important;
@@ -29,6 +30,7 @@ $active-color: #359eff;
         opacity: 100%;
       }
     }
+
     & svg,
     .bob {
       width: 18px;
@@ -61,8 +63,9 @@ $active-color: #359eff;
     grid-template-columns: auto auto;
     gap: 6px;
     width: 100%;
-    margin-bottom: 16px;
+    margin-bottom: 6px;
   }
+
   .GridWrapper > .Button:nth-child(5) {
     grid-column: 1 / -1;
   }

src/components/ToolHeader/ToolHeader.module.scss

@@ -348,6 +348,19 @@ $headerHeight: 46px;
 
     & .PageSwitcherContainer {
       padding: 16px 16px 0;
+      .PageSwitcherItem {
+        box-sizing: border-box;
+        width: -webkit-fill-available;
+        height: 40px;
+        border: 1px solid #c4c4c4;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        padding-left: 10px;
+        cursor: default;
+        margin-right: 5px;
+        gap: 8px;
+      }
     }
   }
 }