diff --git a/src/components/OurProjectsModal/OurProjectsModal.module.scss b/src/components/OurProjectsModal/OurProjectsModal.module.scss index 8941583..e700c0f 100644 --- a/src/components/OurProjectsModal/OurProjectsModal.module.scss +++ b/src/components/OurProjectsModal/OurProjectsModal.module.scss @@ -1,3 +1,30 @@ +@import '@styles/_variables.scss'; + +.inDevelopment { + .projectInfo { + .name { + opacity: 0.6; + filter: grayscale(70%); + cursor: default; + + .openLinkIcon { + opacity: 0.6; + filter: grayscale(70%); + } + } + + .projectIcon { + opacity: 0.6; + filter: grayscale(70%); + } + } + + .description > p { + opacity: 0.6; + filter: grayscale(70%); + } +} + .projectInfo { display: flex; gap: 6px; @@ -57,3 +84,9 @@ .doneBtn { text-align: right; } + +.tooltip { + @extend .defaultTooltip; + background: #fff !important; + color: #0b0921 !important; +} diff --git a/src/components/OurProjectsModal/OurProjectsModal.tsx b/src/components/OurProjectsModal/OurProjectsModal.tsx index 8c18c60..b7d7ac0 100644 --- a/src/components/OurProjectsModal/OurProjectsModal.tsx +++ b/src/components/OurProjectsModal/OurProjectsModal.tsx @@ -1,10 +1,16 @@ import React, { FC } from 'react'; import Image from 'next/image'; import Link from 'next/link'; +import cn from 'classnames'; +import { Tooltip as ReactTooltip } from 'react-tooltip'; +import { useRouter } from 'next/router'; import Modal from '@components/Modal'; import Button from '@components/Button'; +import ourProjectsData from '@data/ourProjects'; + +import { TRouter } from '@local-types/global'; import type { OurProjectsModalProps } from './OurProjectsModal.types'; import styles from './OurProjectsModal.module.scss'; @@ -16,6 +22,9 @@ const OurProjectsModal: FC = ({ github, api, }) => { + const router = useRouter(); + const { locale } = router as TRouter; + const { inDevTxt } = ourProjectsData[locale || 'en']; return ( = ({ fullHeightMobile dataCy={'our-projects-modal'} > - {projects && - projects.map((project: any, index: number) => { - return ( -
-
{ + const isInDev = Boolean(project?.inDevelopment); + const tooltipId = `proj-tip-${index}`; + + return ( +
+
+ {project.name} + + { + if (isInDev) e.preventDefault(); + }} > + {project.name} {project.name} - - {project.name} - {''} - -
-
-
+
- ); - })} + +
+ + {isInDev && ( + + )} +
+ ); + })} +