Merge pull request #37 from gone-bike/fix/bikes-section

add: add BikesList component, show match score only when showMatch is…

astro/src/components/bikes/BikesList.astro

@@ -0,0 +1,41 @@
+---
+import BikesCard, {
+ type BikesCardProps,
+} from "@components/cards/BikesCard.astro";
+
+export interface BikesListProps {
+ items: BikesCardProps[];
+ showMatch?: boolean;
+ class?: string;
+}
+
+const {
+ items = [],
+ showMatch = false,
+ class: classes,
+} = Astro.props as BikesListProps;
+---
+
+<ul
+ class:list={[
+ "my-4 md:my-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+ {},
+ classes,
+ ]}
+>
+ {
+ items?.length > 0 &&
+ items.map((item) => (
+ <BikesCard
+ dateStr={item.dateStr}
+ showMatch={showMatch}
+ matchScore={item.matchScore}
+ brand={item.brand}
+ model={item.model}
+ location={item.location}
+ lang={item.lang}
+ imgs={item.imgs}
+ />
+ ))
+ }
+</ul>

astro/src/components/cards/BikesCard.astro

@@ -9,7 +9,7 @@ import {
  relativeDateTimeFormatter,
 } from "@utils/formatters";
 
-export interface BikesCardProps {
+export interface BikesCardData {
  lang: string;
  matchScore: number;
  brand: string;
@@ -19,8 +19,20 @@ export interface BikesCardProps {
  imgs: CarouselItemProps[];
 }
 
-const { lang, matchScore, brand, model, dateStr, location, imgs } =
- Astro.props as BikesCardProps;
+export interface BikesCardProps extends BikesCardData {
+ showMatch?: boolean;
+}
+
+const {
+ lang,
+ matchScore,
+ brand,
+ model,
+ dateStr,
+ location,
+ imgs,
+ showMatch = false,
+} = Astro.props as BikesCardProps;
 
 changeLanguage(lang);
 
@@ -45,18 +57,21 @@ const formattedRelativeDate = relativeDateTimeFormatter({
 >
  <CarouselVue client:only items={imgs} />
 
- <div class="mt-6">
- <span class="block text-center text-gray-800 text-sm"
- >Match Score: {matchScore}%</span
- >
- <div class="w-full bg-gray-200 rounded-full h-1.5">
- <div
- class="bg-gradient-to-r from-red-gradient-clr to-teal-gradient-clr h-full rounded-full"
- style={{ width: `${matchScore}%` }}
- >
+ {
+ showMatch && (
+ <div class="mt-6">
+ <span class="block text-center text-gray-800 text-sm">
+ Match Score: {matchScore}%
+ </span>
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
+ <div
+ class="bg-gradient-to-r from-red-gradient-clr to-teal-gradient-clr h-full rounded-full"
+ style={{ width: `${matchScore}%` }}
+ />
+ </div>
  </div>
- </div>
- </div>
+ )
+ }
  <div class="pb-2.5 border-b borde-gray-200">
  <h3 class="text-xl font-bold mt-2.5">{brand}</h3>
  <h4 class="text-gray-500 mt-1">{model}</h4>

astro/src/components/sections/BikesSection.astro

@@ -2,8 +2,8 @@
 import { t } from "i18next";
 import SearchBikes from "@components/bikes/SearchBikes.astro";
 import BaseContainer from "@components/base/BaseContainer.astro";
-import BikesCard from "@components/cards/BikesCard.astro";
 import BasePagination from "@components/base/BasePagination.astro";
+import BikesList from "@components/bikes/BikesList.astro";
 
 const imgArr = [
  {
@@ -19,6 +19,81 @@ const imgArr = [
  alt: "...3",
  },
 ];
+
+const bikesList = [
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+];
 ---
 
 <section class="mt-10 pt-6 md:pt-8 pb-8 md:pb-10">
@@ -38,23 +113,7 @@ const imgArr = [
 
  <SearchBikes lang="en" />
 
- <div
- class="my-4 md:my-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
- >
- {
- Array.from(Array(10).keys()).map(() => (
- <BikesCard
- dateStr="2022-05-28"
- matchScore={75}
- brand="Forme"
- model="Hooklow 2"
- location="Milano, Italy"
- lang="en"
- imgs={imgArr}
- />
- ))
- }
- </div>
+ <BikesList items={bikesList} />
 
  <BasePagination />
  </BaseContainer>