Skip to content

Commit

Permalink
adding rating
Browse files Browse the repository at this point in the history
  • Loading branch information
@CalcagnoLoic
CalcagnoLoic committed Jul 16, 2024
1 parent d7de400 commit b078391
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 128 deletions.
2 changes: 1 addition & 1 deletion app/breed/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 15 additions & 1 deletion app/lib/data.ts
View file
Original file line number Diff line number Diff line change
@@ -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" },
Expand Down Expand Up @@ -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 },
];
11 changes: 9 additions & 2 deletions app/lib/definitions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export interface Cat {
reference_image_id: string;
value: string;
label: string;
[key: string]: any;
}

export interface Weight {
Expand Down Expand Up @@ -94,5 +95,11 @@ export type reasons = {

export type mostResearchedBreed = {
breed: Cat;
index: number
};
index: number;
};

export type caracteristics = {
name: string;
data: string;
rating: boolean;
};
151 changes: 27 additions & 124 deletions app/ui/components/Breed/Slug/CatCaracteristics.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const config: Config = {
westar: "#E3E1DC",
cioccolato: "#4D270C",
calico: "#DEC68B",
alto: "#E0E0E0",
},
keyframes: {
shimmer: {
Expand Down

0 comments on commit b078391

Please sign in to comment.