th-98: TowTruck Card (#188)

* th-98: + starRating component

* th-98: + truck images

* th-98: + towTruckCard

* th-98: * towTruckCard replaced types

Author: AlexVlaso

frontend/src/assets/css/vars.scss

@@ -8,7 +8,9 @@ $red-dark: #d51a52;
 $blue-light: #527efe;
 $blue: #507ceb;
 $blue-dark: #3563e9;
+$black-blue: #1a202c;
 $grey-extra-light: #ebf3ff;
+$grey-border: #e7eef6;
 $grey-light: #d5dce8;
 $grey: #90a3bf;
 $grey-dark: #7c8798;
@@ -23,6 +25,7 @@ $shadow-light: 0 4px 8px -2px rgb(0 85 255 / 16%);
 $shadow: 0 2px 4px -2px rgb(0 44 132 / 6%);
 $font-family: "Plus Jakarta Sans", sans-serif;
 $font-weight-regular: 400;
+$font-weight-normal: 500;
 $font-weight-semibold: 600;
 $font-weight-bold: 700;
 $font-weight-extrabold: 800;

frontend/src/assets/img/truck/type-1.svg

@@ -14,7 +14,7 @@ const paletteColors = {
 const [defaultColor] = Object.keys(paletteColors) as Color[];
 
 type Properties = {
-  children: string;
+  children: string | JSX.Element[];
   className?: string;
   color?: Color;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;

frontend/src/assets/img/truck/type-2.svg

@@ -21,6 +21,7 @@ export { Radio } from './radio/radio.js';
 export { Router } from './router/router.jsx';
 export { RouterProvider } from './router-provider/router-provider.jsx';
 export { Spinner } from './spinner/spinner.js';
+export { StarRating } from './star-rating/star-rating.jsx';
 export { Table } from './table/table.js';
 export { Toggle } from './toggle/toggle.js';
 export { Provider as StoreProvider } from 'react-redux';

frontend/src/assets/img/truck/type-3.svg

@@ -0,0 +1,45 @@
+import { IconName } from '~/libs/enums/icon-name.enum.js';
+
+import { Icon } from '../components.js';
+import styles from './styles.module.scss';
+
+type Properties = {
+  rating: number;
+};
+
+const StarRating: React.FC<Properties> = ({ rating }: Properties) => {
+  const fullFieldStars = Math.floor(rating);
+  const allStarts = Math.ceil(rating);
+
+  const createStarItem = (width: number, key: number): JSX.Element => {
+    return (
+      <div className={styles.star} key={key}>
+        <div className={styles.placeholder}>
+          <Icon iconName={IconName.STAR}></Icon>
+        </div>
+        <div className={styles.inner} style={{ width: `${width}%` }}>
+          <Icon iconName={IconName.STAR}></Icon>
+        </div>
+      </div>
+    );
+  };
+
+  const createStars = (): JSX.Element[] => {
+    const stars: JSX.Element[] = [];
+    for (let index = 1; index <= 5; index++) {
+      if (fullFieldStars >= index) {
+        stars.push(createStarItem(100, index));
+      } else if (allStarts >= index) {
+        stars.push(createStarItem((rating - fullFieldStars) * 100, index));
+      } else {
+        stars.push(createStarItem(0, index));
+      }
+    }
+
+    return stars;
+  };
+
+  return <div className={styles.container}>{createStars()}</div>;
+};
+
+export { StarRating };

frontend/src/libs/components/badge/badge.tsx

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+}
+
+.star {
+  position: relative;
+}
+
+.inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  overflow: hidden;
+  color: #ffd12d;
+  white-space: nowrap;
+}

frontend/src/libs/components/components.ts

@@ -0,0 +1,24 @@
+import { type ValueOf, TruckTowType } from 'shared/build';
+
+import img1 from '~/assets/img/truck/type-1.svg';
+import img2 from '~/assets/img/truck/type-2.svg';
+import img3 from '~/assets/img/truck/type-3.svg';
+
+const getTowTruckImage = (type: ValueOf<typeof TruckTowType>): string => {
+  switch (type) {
+    case TruckTowType.FLATBED_OR_ROLLBACK: {
+      return img3;
+    }
+    case TruckTowType.HOOK_AND_CHAIN: {
+      return img3;
+    }
+    case TruckTowType.INTEGRATED: {
+      return img1;
+    }
+    case TruckTowType.WHEEL_LIFT: {
+      return img2;
+    }
+  }
+};
+
+export { getTowTruckImage };

frontend/src/libs/components/star-rating/star-rating.tsx

@@ -0,0 +1,95 @@
+@import "../../../assets/css/styles.scss";
+
+.container {
+  width: 100%;
+  height: 212px;
+  margin-bottom: 16px;
+  padding: 7px 0;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px 0 rgba(173 164 164 / 15%);
+}
+
+.body {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 24px 4px;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 14px 24px 16px;
+  border-top: 1px solid $grey-border;
+}
+
+.description {
+  margin-top: 26px;
+}
+
+.name {
+  color: $black-blue;
+  font-weight: $font-weight-bold;
+  font-size: 20px;
+}
+
+.rating {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 9px;
+}
+
+.reviews {
+  color: $grey;
+  font-weight: $font-weight-normal;
+  font-size: 14px;
+}
+
+.capacity {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  margin-top: 13px;
+  color: $grey;
+  font-weight: $font-weight-bold;
+  font-size: 14px;
+}
+
+.aside {
+  display: flex;
+}
+
+.img {
+  width: 267px;
+  height: 127px;
+}
+
+.info {
+  display: flex;
+  align-items: center;
+  gap: 23px;
+}
+
+.price {
+  font-size: 20px;
+}
+
+.bold {
+  font-weight: $font-weight-bold;
+}
+
+.gray {
+  color: $grey;
+  font-size: 14px;
+}
+
+.badge {
+  height: 25px;
+  margin-top: 27px;
+}
+
+.km {
+  margin-left: 6px;
+}