⚡️ UserCard: React.memo + <a> instead of <div>

website/components/FunctionCard/FunctionCard.jsx

@@ -33,20 +33,20 @@ const FunctionCard = memo(forwardRef((props, ref) => {
       }
     >
       {/* FunctionCard a une hauteur pendant chargement */}
-      <a ref={ref} style={isLoading ? { height: '360px', justifyContent: 'center' } : null} className='FunctionCard col-sm-24 col-md-10 col-xl-7'>        
-          {isLoading && <Loader width='125px' height='125px' />}
+      <a ref={ref} style={isLoading ? { height: '360px', justifyContent: 'center' } : null} className='FunctionCard col-sm-24 col-md-10 col-xl-7'>
+        {isLoading && <Loader width='125px' height='125px' />}
 
-          <div className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}>
-            <div className='FunctionCard__top'>
-              <img onLoad={handleLoad} onError={handleError} className='FunctionCard__image' alt={props.title} src={API_URL + props.image} />
-              <h2 className='FunctionCard__title'>{props.title}</h2>
-              <p className='FunctionCard__description text-center'>{props.description}</p>
-            </div>
-            <div className='FunctionCard__info'>
-              <p className='FunctionCard__category' style={{ backgroundColor: props.categorie.color }}>{props.categorie.name}</p>
-              <p className='FunctionCard__publication-date'>{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}</p>
-            </div>
+        <div className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}>
+          <div className='FunctionCard__top'>
+            <img onLoad={handleLoad} onError={handleError} className='FunctionCard__image' alt={props.title} src={API_URL + props.image} />
+            <h2 className='FunctionCard__title'>{props.title}</h2>
+            <p className='FunctionCard__description text-center'>{props.description}</p>
           </div>
+          <div className='FunctionCard__info'>
+            <p className='FunctionCard__category' style={{ backgroundColor: props.categorie.color }}>{props.categorie.name}</p>
+            <p className='FunctionCard__publication-date'>{date.format(new Date(props.createdAt), 'DD/MM/YYYY', true)}</p>
+          </div>
+        </div>
       </a>
     </Link>
   )

website/components/UserCard/UserCard.css

@@ -0,0 +1,47 @@
+.UserCard {
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex-direction: column;
+  word-wrap: break-word;
+  box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
+  border: 1px solid black;
+  border-radius: 1rem;
+  margin: 0 0 50px 0;
+  cursor: pointer;
+  transition: all 0.3s;
+  padding: 10px;
+}
+.UserCard__container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--text-color);
+  text-decoration: none !important;
+}
+.UserCard:hover {
+  transform: translateY(-7px);
+}
+/* col-md */
+@media (min-width: 768px) {
+  .UserCard {
+    margin: 0 30px 50px 30px;
+  }
+}
+/* col-xl */
+@media (min-width: 1200px) {
+  .UserCard {
+    margin: 0 20px 50px 20px;
+  }
+}
+.UserCard__logo {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.UserCard__name {
+  margin: 30px 0 10px 0;
+}

website/components/UserCard/UserCard.jsx

@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import { forwardRef, memo } from 'react'
+import { API_URL } from '../../utils/config/config'
+import './UserCard.css'
+
+const UserCard = memo(
+  forwardRef((props, ref) => {
+    return (
+      <div className='UserCard col-sm-24 col-md-10 col-xl-7' ref={ref}>
+        <Link href='/users/[name]' as={`/users/${props.name}`}>
+          <a className='UserCard__container'>
+            <img
+              className='UserCard__logo'
+              src={API_URL + props.logo}
+              alt={props.name}
+            />
+            <h2 className='UserCard__name'>{props.name}</h2>
+          </a>
+        </Link>
+      </div>
+    )
+  })
+)
+
+export default UserCard