chore: add in development state to projects

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

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<OurProjectsModalProps> = ({
   github,
   api,
 }) => {
+  const router = useRouter();
+  const { locale } = router as TRouter;
+  const { inDevTxt } = ourProjectsData[locale || 'en'];
   return (
     <Modal
       onClick={onClose}
@@ -24,41 +33,74 @@ const OurProjectsModal: FC<OurProjectsModalProps> = ({
       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'}
+      {projects?.map((project: any, index: number) => {
+        const isInDev = Boolean(project?.inDevelopment);
+        const tooltipId = `proj-tip-${index}`;
+
+        return (
+          <div
+            key={index}
+            {...(isInDev
+              ? {
+                  'data-tooltip-id': tooltipId,
+                  'data-tooltip-content': inDevTxt,
+                }
+              : {})}
+            className={cn(styles.projectWrapper, {
+              [styles.inDevelopment]: isInDev,
+            })}
+          >
+            <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}
+                unoptimized
+                className={styles.projectIcon}
+              />
+
+              <Link
+                href={isInDev ? '#' : project.link || ''}
+                target={isInDev ? undefined : '_blank'}
+                rel={isInDev ? undefined : 'noopener noreferrer'}
+                className={cn(styles.name, {
+                  [styles.disabledLink]: isInDev,
+                })}
+                aria-disabled={isInDev}
+                onClick={e => {
+                  if (isInDev) e.preventDefault();
+                }}
               >
+                {project.name}
                 <Image
-                  src={`${process.env.NEXT_PUBLIC_STRAPI}${project.image.data.attributes.url}`}
-                  width={20}
-                  height={20}
-                  alt={project.name}
+                  src="/assets/project-icons/open-link.png"
+                  alt=""
+                  width={16}
+                  height={16}
+                  unoptimized
+                  className={styles.openLinkIcon}
                 />
-                <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 />
+              </Link>
             </div>
-          );
-        })}
+
+            <div
+              dangerouslySetInnerHTML={{ __html: project.description }}
+              className={styles.description}
+            />
+
+            {isInDev && (
+              <ReactTooltip
+                opacity={1}
+                id={tooltipId}
+                place="top"
+                className={styles.tooltip}
+              />
+            )}
+          </div>
+        );
+      })}
+
       <hr />
       <div className={styles.linksWrapper}>
         <Link

src/data/ourProjects/en.ts

@@ -0,0 +1,5 @@
+const en = {
+  idDevTxt: 'ID Development',
+};
+
+export default en;

src/data/ourProjects/index.ts

@@ -0,0 +1,12 @@
+import en from './en';
+import ru from './ru';
+
+const locales = {
+  en,
+  ru,
+} as const satisfies {
+  en: typeof en;
+  ru: typeof ru;
+};
+
+export default locales;

src/data/ourProjects/ru.ts

@@ -0,0 +1,5 @@
+const ru = {
+  inDevTxt: 'В разработке',
+};
+
+export default ru;