last commit

Ajustement étoiles

Kasa/src/Composants/Logement/Accordionlogement.jsx

@@ -23,7 +23,11 @@ const AccordionLogement = ({ content, text }) => {
           ></img>
         </div>
       </div>
-      {isActive && <div className={`accordion-content ${rotateChevron ? "ouvert" : ""}`}>{content}</div>}
+      {isActive && (
+        <div className={`accordion-content ${rotateChevron ? "ouvert" : ""}`}>
+          {content}
+        </div>
+      )}
     </div>
   );
 };

Kasa/src/Composants/Logement/Contenulogement.jsx

@@ -1,49 +1,45 @@
 import "../../Pages/Fichelogement/Fichelogement.scss";
 import "../../index.scss";
-import etoileactive from "../../Images/étoileactive.png";
-import etoileinactive from "../../Images/étoileinactive.png";
 import useLogement from "../Logement/Datalogement";
+import { ReactComponent as Etoile } from "../../Images/etoile.svg";
+import { ReactComponent as EtoileCouleur } from "../../Images/etoileCouleur.svg";
 
 const Titrelogement = () => {
-  const logement = useLogement();
-  const rating = logement.rating;
+  const { title, location, host, tags, rating } = useLogement();
+
   const maxRating = 5;
-  const etoiles = [];
+  const etoiles =
+  Array.from({ length: maxRating }, (_, index) => (
+  <>
+  {index < rating ? <EtoileCouleur/> : <Etoile/> }
+  </>
+  ));
 
-  for (let i = 1; i <= maxRating; i++) {
-    const isEtoileActive = i <= rating;
-
-    etoiles.push(
-      <img
-        className="etoile"
-        key={i}
-        src={isEtoileActive ? etoileactive : etoileinactive}
-        alt={isEtoileActive ? "Etoile active" : "Etoile inactive"}
-      />
-    );
-  }
   return (
-    <section>
+    <>
+      <section className="detailsLog">
         <div className="titre">
-            <div className="titre_info">
-                <h1>{logement.title}</h1>
-                <p>{logement.location}</p>
-            </div>
-            <div className="titre_nom">
-                <p>{logement.host.name}</p>
-                <img className="photovendeur" src={logement.host.picture} alt={logement.host.name}></img>
-            </div>
+          <div className="titre_info">
+            <h1>{title}</h1>
+            <p>{location}</p>
+          </div>
+          <div className="infostags">
+            {tags.map((tag, index) => (
+              <p key={index}>{tag}</p>
+            ))}
+          </div>
+
         </div>
         <div className="infos">
-            <div className="infostags">
-                {logement.tags.map((tag, index)=>(
-                    <p key={index}>{tag}</p>
-                ))}
-            </div>
-            <div className="Etoiles">{etoiles}</div>
+          <div className="titre_nom">
+            <p>{host.name}</p>
+            <img className="photovendeur" src={host.picture} alt={host.name} />
+          </div>
+          <div className="etoiles">{etoiles}</div>
         </div>
-    </section>
-  )
-}
+      </section>
+    </>
+  );
+};
 
 export default Titrelogement;

Kasa/src/Composants/Logement/Datalogement.jsx

@@ -3,8 +3,20 @@ import Data from "../../annonces";
 
 const useLogement = () => {
   const { id } = useParams();
-  const logement = Data.find(item => item.id === id);
+
+  if (!Data || Data.length === 0) {
+    console.error("Aucune donnée de logement n'est disponible.");
+    return null;
+  }
+
+  const logement = Data.find((item) => item.id === id);
+
+  if (!logement) {
+    console.error(`Aucun logement trouvé avec l'ID : ${id}`);
+    return null;
+  }
+
   return logement;
 };
 
-export default useLogement;
+export default useLogement;

Kasa/src/Pages/Apropos/Apropos.jsx

@@ -1,31 +1,31 @@
-import React from 'react';
-import Accordion from './Accordion';
+import React from "react";
+import Accordion from "./Accordion";
 import Banner from "../../Composants/Banners/Banner";
 import img from "../../Images/Bannerpropos.png";
 
 const Apropos = () => {
   const accordionData = [
     {
-      title: 'Fiabilité',
-      content: `Les annonces postées sur Kasa garantissent une fiabilité totale. Les photos sont conformes aux logements, et toutes les informations sont régulièrement vérifiées par nos équipes.`
+      title: "Fiabilité",
+      content: `Les annonces postées sur Kasa garantissent une fiabilité totale. Les photos sont conformes aux logements, et toutes les informations sont régulièrement vérifiées par nos équipes.`,
     },
     {
-      title: 'Respect',
-      content: `La bienveillance fait partie des valeurs fondratices de Kasa. Tout comportement discriminatoire ou de perturbation du voisinage entraînera une exclusion de notre plateforme.`
+      title: "Respect",
+      content: `La bienveillance fait partie des valeurs fondratices de Kasa. Tout comportement discriminatoire ou de perturbation du voisinage entraînera une exclusion de notre plateforme.`,
     },
     {
-      title: 'Service',
-      content: `La bienveillance fait partie des valeurs fondatrices de Kasa. Tout comportement discriminatoire ou de pertubation du voisinage entraînera une exclusion de notre plateforme.`
+      title: "Service",
+      content: `La bienveillance fait partie des valeurs fondatrices de Kasa. Tout comportement discriminatoire ou de pertubation du voisinage entraînera une exclusion de notre plateforme.`,
     },
     {
-      title: 'Sécurité',
-      content: `La sécurité est la priorité de Kasa. Aussi bien nos hôtes que pour les voyageurs, chaque logement correspond aux critères de sécurité établis par nos services. En laissant une note aussi bien à l'hôte qu'au locataire, cela permet à nos équipes de vérifier que les standards sont bien respectés. Nous organisons également des ateliers sur la sécurité domestique pour nos hôtes.`
-    }
+      title: "Sécurité",
+      content: `La sécurité est la priorité de Kasa. Aussi bien nos hôtes que pour les voyageurs, chaque logement correspond aux critères de sécurité établis par nos services. En laissant une note aussi bien à l'hôte qu'au locataire, cela permet à nos équipes de vérifier que les standards sont bien respectés. Nous organisons également des ateliers sur la sécurité domestique pour nos hôtes.`,
+    },
   ];
 
   return (
     <div>
-      <Banner image={img}/>
+      <Banner image={img} />
       <div className="accordion">
         {accordionData.map(({ title, content }) => (
           <Accordion key={title} title={title} content={content} />

Kasa/src/Pages/Fichelogement/Fichelogement.scss

@@ -8,6 +8,9 @@
 .carrousel {
   margin: 50px 50px;
   position: relative;
+  @include s.mobile-only {
+    margin: 50px 20px;
+  }
 
   & .carrousel_img {
     width: 100%;
@@ -43,93 +46,93 @@
   }
 }
 ///
-.titre {
-  display: flex;
+.detailsLog{
+  display:flex;
+  flex-direction: row;
   justify-content: space-between;
-  width: 100%;
-
-  & .titre_info {
-    margin: 0px 50px;
+  margin: 0px 50px;
+  @include s.mobile-only {
+    flex-direction: column;
+    margin: 0px 20px;
   }
-
-  & .titre_nom {
+  .titre {
     display: flex;
-    flex-direction: row;
-    margin: 0 50px;
-    @include s.mobile-only {
-      margin: 0 25px;
-      position: absolute;
-      bottom: 10px;
-      right: 0px;
+    flex-direction: column;
+    gap:20px;
+    .titre_info {
+
+      color: #ff6060;
+      h1 {
+        font-size: 51px;
+        font-weight: 300;
+        line-height: 50px;
+        color: #ff6060;
+        @include s.mobile-only {
+          font-size: 35px;
+        }
+      }
+      p {
+        color: #ff6060;
+      }
     }
-
-    & .photovendeur {
-      border-radius: 50px;
+    .infostags {
+      display: flex;
+      flex-direction: row;
+      gap: 20px;
+      align-items: center;
+      p {
+        color: white;
+        background-color: #ff6060;
+        border-radius: 10px;
+        padding: 0px 10px;
+        font-size: 14px;
+        white-space: nowrap;
+        oveflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
-  & h1 {
-    font-size: 51px;
-    font-weight: 300;
-    line-height: 50px;
-    color: #ff6060;
+  .infos{
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    gap:20px;
     @include s.mobile-only {
-      font-size: 35px;
+      flex-direction: row-reverse;
+      justify-content : space-between;
+      align-items : end;
     }
-  }
-  & p {
-    color: #ff6060;
-  }
-  & img {
-    object-fit: cover;
-    width: 64px;
-  }
-  &_nom {
-    align-items: center;
-    justify-content: space-around;
-    color: red;
-  }
-  &_nom p {
-    text-align: end;
-    width: 90px;
-    color: #ff6060;
-  }
-}
-
-///
-.infos {
-  display: flex;
-  justify-content: space-between;
-  margin: 15px 50px;
-  @include s.mobile-only {
-    flex-direction: column;
-    gap: 20px;
-    position: relative;
-  }
-  & .infostags {
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
-    align-items: center;
-  }
-  & p {
-    color: white;
-    background-color: #ff6060;
-    border-radius: 25px;
-    padding: 0px 30px;
-    display: block;
-    font-size: 14px;
-    font-weight: 500;
-  }
-  & .Etoiles {
-    display: flex;
-    gap: 10px;
-    & .etoile {
-      height: 30px;
-      width: 30px;
+    .etoiles {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      gap: 5px;
     }
-  }
+
+    .titre_nom {
+      display: flex;
+      flex-direction: row;
+      gap: 20px;
+      @include s.mobile-only {
+        align-items : end;
+      }
+      p {
+        color: #ff6060;
+        font-size: 20px;
+        font-weight: 500;
+      }
+
+      .photovendeur {
+        border-radius: 50px;
+        object-fit: cover;
+        width: 64px;
+      }
+
+  }  
+}
 }
 
+
 .Accordionlog {
   display: flex;
   flex-direction: row;
@@ -150,8 +153,9 @@
     }
 
     @include s.mobile-only {
-      width: 90%;
-      margin: 25px 50px;
+      width : auto;
+      flex:1;
+      margin: 25px 20px;
     }
   }
 

Kasa/src/Pages/Home/Home.jsx

@@ -5,10 +5,17 @@ import Banner from "../../Composants/Banners/Banner";
 import img from "../../Images/Banneraccueil.png";
 
 function Home() {
-  const Cards = Data.map((Element) => <Card key={Element.id} id={Element.id} picture={Element.cover} title={Element.title}/>);
+  const Cards = Data.map((Element) => (
+    <Card
+      key={Element.id}
+      id={Element.id}
+      picture={Element.cover}
+      title={Element.title}
+    />
+  ));
   return (
     <div>
-      <Banner image={img} text="Chez vous, partout et ailleurs" page="Home"/>
+      <Banner image={img} text="Chez vous, partout et ailleurs" page="Home" />
       <div className="Cardcontainer">{Cards}</div>
     </div>
   );