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;
+ }
  }
  }
 }

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;
+ }
  }
  }
 }

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;
+ }
  }
  }
 }

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;
+ }
  }
  }
 }

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;
+ }
  }
  }
 }

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;
+ }
  }
  }
 }

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;
+ }
  }
  }
 }

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;
+ }
  }
  }
 }