Update <Team> codestyle

ekaterinburgdev · Dec 20, 2023 · 165f81e · 165f81e · ekbdev · Dec 20, 2023
1 parent 7652937
commit 165f81e
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 72 deletions.
diff --git a/components/AboutProjectModal/AboutProjectModal.jsx b/components/AboutProjectModal/AboutProjectModal.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Modal } from './Modal/Modal'
-import { TeamGrid } from './Team/TeamGrid'
+import { Team } from './Team/Team'
 import { Logo } from '../Logo/Logo'
 import { Button } from '../Button/Button'
 
@@ -64,7 +64,7 @@ export function AboutProjectModal({ open, onClose: handleClose }) {
                 к&nbsp;нам!
             </p>
 
-            <TeamGrid />
+            <Team />
 
             <footer>
                 <center>

diff --git a/...nents/AboutProjectModal/Team/TeamGrid.jsx → components/AboutProjectModal/Team/Team.jsx b/...nents/AboutProjectModal/Team/TeamGrid.jsx → components/AboutProjectModal/Team/Team.jsx
@@ -1,16 +1,14 @@
 import React from 'react'
-import classNames from 'classnames/bind'
-import team from './team.json'
+import cn from 'classnames'
 import TeamPerson from './TeamPerson'
-import styles from './TeamGrid.module.css'
-
-const cx = classNames.bind(styles)
+import team from './team.json'
+import styles from './Team.module.css'
 
-export function TeamGrid() {
+export function Team() {
     return (
-        <ul className={cx('team-grid')}>
+        <ul className={cn(styles.Team)}>
             {team.map((person) => (
-                <li className={cx('team-grid__item')} key={person.name}>
+                <li className={cn(styles.Team__item)} key={person.name}>
                     <TeamPerson {...person} />
                 </li>
             ))}

diff --git a/...boutProjectModal/Team/TeamGrid.module.css → ...ts/AboutProjectModal/Team/Team.module.css b/...boutProjectModal/Team/TeamGrid.module.css → ...ts/AboutProjectModal/Team/Team.module.css
@@ -1,4 +1,4 @@
-.team-grid {
+.Team {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-content: space-between;
@@ -9,82 +9,82 @@
     column-gap: 5%;
 }
 
-.team-grid__item {
+.Team__item {
     position: relative;
     margin: 0;
     padding-bottom: 40px;
 }
 
-.team-grid__item:nth-child(3n-1) {
+.Team__item:nth-child(3n-1) {
     transform: translate(0, 50%);
 }
 
-.team-grid__item:nth-child(3n-1):nth-last-child(-n+3) {
+.Team__item:nth-child(3n-1):nth-last-child(-n+3) {
     /* Add bottom margin to latest */
     margin-bottom: 100px;
 }
 
-.team-grid__link {
+.Team__link {
     text-decoration: none;
 }
 
 @media screen and (width >=560px) {
-    .team-grid {
+    .Team {
         grid-template-columns: repeat(3, 1fr);
     }
 }
 
 @media screen and (width >=768px) {
-    .team-grid {
+    .Team {
         grid-template-columns: repeat(4, 1fr);
     }
 
-    .team-grid__item {
+    .Team__item {
         padding-bottom: 30%;
     }
 
-        .team-grid__item:nth-child(n) {
+        .Team__item:nth-child(n) {
             margin: 0;
             transform: none;
         }
 
-        .team-grid__item:nth-child(2n) {
+        .Team__item:nth-child(2n) {
             transform: translate(0, 50%);
         }
 }
 
 @media screen and (width >=991px) {
-    .team-grid__item {
+    .Team__item {
         padding-bottom: 30%;
     }
 }
 
 @media screen and (width >=1200px) {
-    .team-grid {
+    .Team {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         justify-content: space-between;
         align-items: start;
     }
 
-    .team-grid__item {
+    .Team__item {
         position: relative;
         margin: 0;
         padding-bottom: 60%;
         transform: none;
     }
 
-        .team-grid__item:nth-child(n) {
+        .Team__item:nth-child(n) {
             transform: none;
         }
 
-        .team-grid__item:nth-child(2n) {
+        .Team__item:nth-child(2n) {
             transform: translate(0, 50%);
         }
 }
 
 @media screen and (width >=1440px) {
-    .team-grid__item {
+    .Team__item {
         padding-bottom: 40%;
     }
 }
diff --git a/components/AboutProjectModal/Team/TeamPerson.jsx b/components/AboutProjectModal/Team/TeamPerson.jsx
@@ -1,20 +1,39 @@
 import React from 'react'
-import classNames from 'classnames/bind'
+import cn from 'classnames'
+import Image from 'next/image'
 import styles from './TeamPerson.module.css'
 
-const cx = classNames.bind(styles)
+export default function TeamPerson(person) {
+    const { link } = person
+    if (link) {
+        return link ? (
+            <a
+                className={cx('TeamPerson', 'TeamPerson_link')}
+                href={link}
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+            >
+                <TeamPersonInner {...person} />
+            </a>
+        ) : (
+            <div className={cx('TeamPerson')}>
+                <TeamPersonInner {...person} />
+            </div>
+        )
+    }
+}
 
-function Person({ name, role, photo }) {
+function TeamPersonInner({ name, role, photo }) {
     return (
-        <figure className={cx('team-person__inner')}>
+        <figure className={cx(styles.TeamPerson__inner)}>
             {photo.length > 0 && (
-                <div className={cx('team-person__photo')}>
-                    <img src={photo} width={300} height={300} alt="" loading="lazy" />
+                <div className={cn(styles.TeamPerson__photo)}>
+                    <Image src={photo} width={300} height={300} loading="lazy" alt="" />
                 </div>
             )}
-            <figcaption className={cx('team-person__caption')}>
+            <figcaption className={cx(styles.TeamPerson__caption)}>
                 {name && (
-                    <div className={cx('team-person__name')}>
+                    <div className={cx(styles.TeamPerson__name)}>
                         {/* eslint-disable-next-line react/no-danger */}
                         <span dangerouslySetInnerHTML={{ __html: name }} />
                     </div>
@@ -23,32 +42,10 @@ function Person({ name, role, photo }) {
                 {role && (
                     <div
                         dangerouslySetInnerHTML={{ __html: role }}
-                        className={cx('team-person__role')}
+                        className={cx(styles.TeamPerson__role)}
                     />
                 )}
             </figcaption>
         </figure>
     )
 }
-
-export default function TeamPerson(person) {
-    const { link } = person
-    if (link) {
-        return (
-            <a
-                className={cx('team-person', 'team-person_link')}
-                href={link}
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-            >
-                <Person {...person} />
-            </a>
-        )
-    }
-
-    return (
-        <div className={cx('team-person')}>
-            <Person {...person} />
-        </div>
-    )
-}
diff --git a/components/AboutProjectModal/Team/TeamPerson.module.css b/components/AboutProjectModal/Team/TeamPerson.module.css
@@ -1,57 +1,57 @@
-.team-person {
+.TeamPerson {
     margin: 0;
     padding: 0;
 }
 
-.team-person {
+.TeamPerson {
     text-decoration: none;
 }
 
-.team-person_link .team-person__name span {
+.TeamPerson_link .TeamPerson__name span {
     text-decoration: underline;
     text-underline-offset: 3px;
     text-decoration-color: var(--color-underline);
     transition: .15s ease box-shadow;
 }
 
 
-.team-person_link:hover .team-person__name span {
+.TeamPerson_link:hover .TeamPerson__name span {
     display: inline;
     text-decoration-color: var(--color-underline-hover);
 }
 
-.team-person_link .team-person__name {
+.TeamPerson_link .TeamPerson__name {
     margin-bottom: 0.45em;
 }
 
-.team-person__inner {
+.TeamPerson__inner {
     margin: 0;
     padding: 0;
     transition: .15s ease transform;
     transform: scale(1) translateZ(0);
 }
 
-.team-person:hover .team-person__inner {
+.TeamPerson:hover .TeamPerson__inner {
     transform: scale(1.11) translateZ(0);
     transform-origin: center;
 }
 
-.team-person__photo {
+.TeamPerson__photo {
     position: relative;
     width: 100%;
     border-radius: 50%;
     box-shadow: 0 0 0 2px #414141;
 }
 
-.team-person__photo::after {
+.TeamPerson__photo::after {
     content: "";
     display: block;
     width: 100%;
     height: 0;
     padding-bottom: 100%;
 }
 
-.team-person__photo img {
+.TeamPerson__photo img {
     position: absolute;
     object-fit: cover;
     object-position: center top;
@@ -61,23 +61,23 @@
     pointer-events: none;
 }
 
-.team-person__name,
-.team-person__caption {
+.TeamPerson__name,
+.TeamPerson__caption {
     font-size: clamp(14px, 1vw, 16px);
     line-height: 1.2;
 }
 
-.team-person__name {
+.TeamPerson__name {
     margin-top: .4em;
     margin-bottom: .2em;
     transition: .15s ease color;
 }
 
-.team-person__role {
+.TeamPerson__role {
     color: #757575;
     line-height: 1.2;
 }
 
-.team-person__role::first-letter {
+.TeamPerson__role::first-letter {
     text-transform: lowercase;
 }