- add figma developer mcp

src/api/settings.ts

@@ -0,0 +1,44 @@
+export const userInfoUpdate = async (
+  token: string,
+  username?: string,
+  linkedIn?: string,
+  isEmailPublic?: boolean,
+  isLinkedinPublic?: boolean,
+  title?: string,
+  gender?: string,
+  npsScore?: number,
+  isModalShown?: boolean,
+) => {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/user/me`;
+  const body = JSON.stringify({
+    ...(username !== undefined && { username }),
+    ...(linkedIn !== undefined && { linkedIn }),
+    ...(isEmailPublic !== undefined && { isEmailPublic }),
+    ...(isLinkedinPublic !== undefined && { isLinkedinPublic }),
+    ...(title !== undefined && { title }),
+    ...(gender !== undefined && { gender }),
+    ...(npsScore !== undefined && { npsScore }),
+    ...(isModalShown !== undefined && { isModalShown }),
+  });
+  const headers = {
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${token}`,
+  };
+
+  try {
+    const response = await fetch(url, {
+      method: 'PUT',
+      headers: headers,
+      body,
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error('Failed to update user info:', error);
+    throw error;
+  }
+};

src/api/vibesuite.ts

@@ -1,3 +1,10 @@
+export const getVibesuite = async (locale: string) => {
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/vibesuite?populate[pageSeo]=*&populate[OGTags][populate]=ogImage&locale=${locale}`;
+  return await fetch(url)
+    .then(resp => resp.json())
+    .then(json => json?.data?.attributes || null);
+};
+
 export const updateLearnedSkills = async (learnedSkills: string[]) => {
   const token: string = localStorage?.getItem('accessToken');
   if (!token) return;

src/components/Button/Button.module.scss

@@ -37,6 +37,16 @@
       border-color: #c5c5c5;
     }
   }
+  &.black {
+    background-color: #242424;
+    color: #fff;
+    border-color: #242424;
+    &:hover {
+      background-color: #242424;
+      color: #fff;
+      border-color: #242424;
+    }
+  }
 
   &.primary {
     color: #fff;

src/components/Button/Button.tsx

@@ -7,7 +7,7 @@ import Loader from '@icons/Loader';
 import styles from './Button.module.scss';
 
 type TButton = {
-  variant?: 'default' | 'primary' | 'secondary' | 'grey';
+  variant?: 'default' | 'primary' | 'secondary' | 'grey' | 'black';
   type?: 'submit' | 'button' | 'reset';
   label: string;
   disabled?: boolean;
@@ -73,6 +73,7 @@ const Button: FC<TButton> = ({
         [styles.disabled]: disabled,
         [styles.grey]: variant === 'grey',
         [styles.secondary]: variant === 'secondary',
+        [styles.black]: variant === 'black',
       })}
       onClick={handleClick}
       onMouseEnter={handleMouseEnter}

src/components/Checkbox/Checkbox.module.scss

@@ -0,0 +1,131 @@
+.visibleTxtMobile {
+  display: none;
+}
+
+.checkboxes {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .visibleTxt {
+    color: rgba(0, 0, 0, 0.45);
+    font-family: 'Lato', sans-serif;
+    font-size: 14px;
+    line-height: 1.571;
+  }
+}
+
+.txt {
+  font-family: 'Source Serif 4', 'Source-Serif-Regular', serif;
+  font-size: 14px;
+  line-height: 1.571;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.wrapper + .wrapper {
+  margin-left: 8px;
+}
+
+.container {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 20px;
+  height: 20px;
+}
+
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  box-sizing: border-box;
+}
+
+.container input:checked ~ .checkmark {
+  border: 1px solid #242424;
+}
+
+.checkmark:after {
+  content: '';
+  position: absolute;
+  display: none;
+}
+
+.container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.container .checkmark:after {
+  left: 4px;
+  top: 4px;
+  width: 10px;
+  height: 10px;
+  background: #242424;
+  border-radius: 50%;
+}
+
+// Dark mode
+:global(.darkTheme) {
+  .checkboxes .visibleTxt {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .txt {
+    color: #fff;
+  }
+
+  .checkmark {
+    background-color: #1b1e26;
+    border-color: #5b5b5b;
+  }
+
+  .container input:checked ~ .checkmark {
+    border-color: #fff;
+  }
+
+  .container .checkmark:after {
+    background: #fff;
+  }
+}
+
+@media (max-width: 750px) {
+  .visibleTxtMobile {
+    display: block;
+    color: rgba(0, 0, 0, 0.45);
+    font-family: 'Lato', sans-serif;
+    font-size: 14px;
+    line-height: 1.571;
+  }
+
+  .checkboxes .visibleTxt {
+    display: none;
+  }
+
+  :global(.darkTheme) .visibleTxtMobile {
+    color: rgba(255, 255, 255, 0.45);
+  }
+}

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,60 @@
+import { FC } from 'react';
+
+import styles from './Checkbox.module.scss';
+
+type CheckboxProps = {
+  visibleTxt: string;
+  everyone: string;
+  onlyYou: string;
+  setRadioValue: (radioValue: string) => void;
+  radioValue: string;
+};
+
+const Checkbox: FC<CheckboxProps> = ({
+  visibleTxt,
+  everyone,
+  onlyYou,
+  setRadioValue,
+  radioValue,
+}) => {
+  const handleRadioChange = event => {
+    setRadioValue(event.target.value);
+  };
+
+  return (
+    <>
+      <span className={styles.visibleTxtMobile}> {visibleTxt} </span>
+      <div className={styles.checkboxes}>
+        <span className={styles.visibleTxt}> {visibleTxt} </span>
+        <div className={styles.wrapper}>
+          <label className={styles.container}>
+            <input
+              type="radio"
+              value="everyone"
+              checked={radioValue === 'everyone'}
+              onChange={handleRadioChange}
+              className={styles.checkbox}
+            />
+            <span className={styles.checkmark}></span>
+          </label>
+          <span className={styles.txt}> {everyone}</span>
+        </div>
+        <div className={styles.wrapper}>
+          <label className={styles.container}>
+            <input
+              type="radio"
+              value="onlyMe"
+              checked={radioValue === 'onlyMe'}
+              onChange={handleRadioChange}
+              className={styles.checkbox}
+            />
+            <span className={styles.checkmark}></span>
+          </label>
+
+          <span className={styles.txt}>{onlyYou}</span>
+        </div>
+      </div>
+    </>
+  );
+};
+export default Checkbox;

src/components/Checkbox/index.ts

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