From b078391204162709628cea03a1013db345086592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Calcagno=20Lo=C3=AFc?=
 <98493858+CalcagnoLoic@users.noreply.github.com>
Date: Tue, 16 Jul 2024 13:21:36 +0200
Subject: [PATCH] adding rating

---
 app/breed/[slug]/page.tsx                     |   2 +-
 app/lib/data.ts                               |  16 +-
 app/lib/definitions.ts                        |  11 +-
 .../Breed/Slug/CatCaracteristics.tsx          | 151 ++++--------------
 tailwind.config.ts                            |   1 +
 5 files changed, 53 insertions(+), 128 deletions(-)

diff --git a/app/breed/[slug]/page.tsx b/app/breed/[slug]/page.tsx
index 3e2fa1a..7fb88ab 100644
--- a/app/breed/[slug]/page.tsx
+++ b/app/breed/[slug]/page.tsx
@@ -68,7 +68,7 @@ const Page: React.FC<BreedPage> = ({ params }) => {
             <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
               {otherImageSrc.map((catImage) => (
                 <div
-                  key={breed.id}
+                  key={breed.reference_image_id}
                   className="relative left-1/2 mt-5 h-[278px] w-[278px] -translate-x-1/2 xl:left-0 xl:translate-x-0"
                 >
                   <Image
diff --git a/app/lib/data.ts b/app/lib/data.ts
index cd760e0..e06036a 100644
--- a/app/lib/data.ts
+++ b/app/lib/data.ts
@@ -1,4 +1,4 @@
-import { catsHero, reasons } from "./definitions";
+import { caracteristics, catsHero, reasons } from "./definitions";
 
 export const cats: catsHero[] = [
   { id: "IGedC!Vaqh", src: "/img/bengal.webp", breed: "Bengal" },
@@ -70,3 +70,17 @@ export const mostPopularCats: string[] = [
   "sfol",
   "abys",
 ];
+
+export const catCaracteristics: caracteristics[] = [
+  { name: "Temperament", data: "temperament", rating: false },
+  { name: "Origin", data: "origin", rating: false },
+  { name: "Life Span", data: "life_span", rating: false },
+  { name: "Adaptability", data: "adaptability", rating: true },
+  { name: "Affection Level", data: "affection_level", rating: true },
+  { name: "Child Friendly", data: "child_friendly", rating: true },
+  { name: "Grooming", data: "grooming", rating: true },
+  { name: "Intelligence", data: "intelligence", rating: true },
+  { name: "Health issues", data: "health_issues", rating: true },
+  { name: "Social needs", data: "social_needs", rating: true },
+  { name: "Stranger friendly", data: "stranger_friendly", rating: true },
+];
diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts
index 250f32e..3b6056b 100644
--- a/app/lib/definitions.ts
+++ b/app/lib/definitions.ts
@@ -55,6 +55,7 @@ export interface Cat {
   reference_image_id: string;
   value: string;
   label: string;
+  [key: string]: any;
 }
 
 export interface Weight {
@@ -94,5 +95,11 @@ export type reasons = {
 
 export type mostResearchedBreed = {
   breed: Cat;
-  index: number
-};
\ No newline at end of file
+  index: number;
+};
+
+export type caracteristics = {
+  name: string;
+  data: string;
+  rating: boolean;
+};
diff --git a/app/ui/components/Breed/Slug/CatCaracteristics.tsx b/app/ui/components/Breed/Slug/CatCaracteristics.tsx
index 897b541..312b0eb 100644
--- a/app/ui/components/Breed/Slug/CatCaracteristics.tsx
+++ b/app/ui/components/Breed/Slug/CatCaracteristics.tsx
@@ -1,128 +1,31 @@
 import { Cat } from "@/app/lib/definitions";
-import Paragraph from "../../Paragraph";
+import { catCaracteristics } from "@/app/lib/data";
+import { Icons } from "@/app/ui/icons";
 
-const CatCaracteristics = ({ breed }: { breed: Cat }) => (
-  <>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Temperament: </strong> {breed.temperament}
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Origin: </strong>
-            {breed.origin}
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Life Span: </strong> {breed.life_span} years
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Adaptability: </strong>
-            {breed.adaptability}
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Affection Level: </strong>
-            {breed.affection_level}
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Child Friendly: </strong>
-            {breed.child_friendly}
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Grooming: </strong>
-            {breed.grooming}
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Intelligence: </strong>
-            {breed.intelligence}
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Health issues: </strong>
-            {breed.health_issues}
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Social needs: </strong>
-            {breed.social_needs}
-          </>
-        }
-      />
-    </div>
-    <div className="mt-8">
-      <Paragraph
-        kind="p"
-        content={
-          <>
-            <strong>Stranger friendly: </strong>
-            {breed.stranger_friendly}
-          </>
-        }
-      />
-    </div>
-  </>
-);
+const CatCaracteristics = ({ breed }: { breed: Cat }) => {
+  const stars = Array(5).fill(0);
+
+  return (
+    <>
+      {catCaracteristics.map((caracteristic) => (
+        <div className="mt-8" key={caracteristic.name}>
+          <div className="flex">
+            <strong className="mr-2">{caracteristic.name}: </strong>
+            {caracteristic.rating === false && breed[caracteristic.data]}
+            {caracteristic.rating === true &&
+              stars.map((_, index) => (
+                <div key={index} className="self-center md:ml-5">
+                  <div
+                    className={`h-[12px] w-[60px] rounded-2xl ${breed[caracteristic.data] > index ? "bg-cioccolato" : "bg-alto"}`}
+                  ></div>
+                </div>
+              ))}
+            {caracteristic.name === "Life Span" && " years"}
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
 
 export default CatCaracteristics;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index dabf306..f703992 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,6 +17,7 @@ const config: Config = {
         westar: "#E3E1DC",
         cioccolato: "#4D270C",
         calico: "#DEC68B",
+        alto: "#E0E0E0",
       },
       keyframes: {
         shimmer: {