Add total records header to search page

aelassas · Feb 8, 2025 · c06a973 · c06a973
1 parent 33347a9
commit c06a973
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 16 deletions.
diff --git a/frontend/src/assets/css/car-list.css b/frontend/src/assets/css/car-list.css
@@ -11,8 +11,40 @@ section.car-list .empty-list {
   width: 250px;
 }
 
+section.car-list div.title {
+  text-align: left;
+  width: 100%;
+  margin-bottom: 5px;
+  font-weight: 400;
+}
+
+section.car-list div.title div.bookcars {
+  font-size: 22px;
+}
+
+section.car-list div.title div.bookcars span.title-bookcars {
+  color: #212121;
+  font-weight: 500;
+}
+
+section.car-list div.title div.car-count {
+  color: #717171;
+  font-size: 14px;
+}
+
 @media only screen and (width <=960px) {
   section.car-list .empty-list {
     width: calc(100% - 20px);
   }
+
+  section.car-list div.title {
+    max-width: 600px;
+    padding-left: 10px;
+  }
+}
+
+@media only screen and (width >=960px) {
+  section.car-list div.title {
+    min-width: 800px;
+  }
 }
diff --git a/frontend/src/components/CarList.tsx b/frontend/src/components/CarList.tsx
@@ -228,22 +228,39 @@ const CarList = ({
             </Card>
           )
           : ((from && to && pickupLocation && dropOffLocation) || hidePrice) // || (hidePrice && booking))
-          && rows.map((car) => (
-            <Car
-              key={car._id}
-              car={car}
-              booking={booking}
-              pickupLocation={pickupLocation}
-              dropOffLocation={dropOffLocation}
-              from={from as Date}
-              to={to as Date}
-              pickupLocationName={pickupLocationName}
-              distance={distance}
-              hideSupplier={hideSupplier}
-              sizeAuto={sizeAuto}
-              hidePrice={hidePrice}
-            />
-          ))}
+          && (
+            <>
+              {totalRecords > 0 && (
+                <div className="title">
+                  <div className="bookcars">
+                    <span>{strings.TITLE_1}</span>
+                    <span className="title-bookcars">{env.WEBSITE_NAME}</span>
+                    <span>{strings.TITLE_2}</span>
+                  </div>
+                  <div className="car-count">
+                    {`(${totalRecords} ${totalRecords === 1 ? strings.TITLE_CAR_AVAILABLE : strings.TITLE_CARS_AVAILABLE})`}
+                  </div>
+                </div>
+              )}
+
+              {rows.map((car) => (
+                <Car
+                  key={car._id}
+                  car={car}
+                  booking={booking}
+                  pickupLocation={pickupLocation}
+                  dropOffLocation={dropOffLocation}
+                  from={from as Date}
+                  to={to as Date}
+                  pickupLocationName={pickupLocationName}
+                  distance={distance}
+                  hideSupplier={hideSupplier}
+                  sizeAuto={sizeAuto}
+                  hidePrice={hidePrice}
+                />
+              ))}
+            </>
+          )}
         {loading && <Progress />}
       </section>
       {env.PAGINATION_MODE === Const.PAGINATION_MODE.CLASSIC && !env.isMobile && (