Fix

package.json

@@ -13,6 +13,7 @@
     "@reduxjs/toolkit": "1.9.5",
     "axios": "0.27.2",
     "classnames": "2.3.2",
+    "clsx": "^2.1.1",
     "history": "5.3.0",
     "http-status-codes": "2.2.0",
     "leaflet": "1.7.1",

src/components/card/card.tsx

@@ -1,24 +1,17 @@
-/* eslint-disable arrow-body-style */
+import { SingleCard } from '../../lib/types.ts/card';
+import clsx from 'clsx';
 
-type Props = {
-  isPremium: boolean;
-  imgPath: string;
-  price: number;
-  inBookmarks: boolean;
-  rating: 1 | 2 | 3 | 4 | 5;
-  placeName: string;
-  placeType: string;
-};
+const Card = (card: SingleCard) => {
+  const {
+    isPremium,
+    imgPath,
+    price,
+    inBookmarks,
+    rating,
+    placeName,
+    placeType,
+  } = card;
 
-const Card = ({
-  isPremium,
-  imgPath,
-  price,
-  inBookmarks,
-  rating,
-  placeName,
-  placeType,
-}: Props) => {
   return (
     <article className="cities__card place-card">
       {isPremium ? (
@@ -46,9 +39,11 @@ const Card = ({
             <span className="place-card__price-text">&#47;&nbsp;night</span>
           </div>
           <button
-            className={`place-card__bookmark-button  button ${
-              inBookmarks ? 'place-card__bookmark-button--active' : ''
-            }`}
+            className={clsx(
+              'place-card__bookmark-button',
+              'button',
+              inBookmarks && 'place-card__bookmark-button--active'
+            )}
             type="button"
           >
             <svg className="place-card__bookmark-icon" width="18" height="19">

src/components/main/main.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable arrow-body-style */
 
-import { cards } from '../../data/cardsData';
+import { CARDS } from '../../data/cardsData';
 import Card from '../card/card';
 
 const Main = () => {
@@ -114,9 +114,10 @@ const Main = () => {
                 </ul>
               </form>
               <div className="cities__places-list places__list tabs__content">
-                {cards.map((card) => (
+                {CARDS.map((card) => (
                   <Card
-                    key={crypto.randomUUID()}
+                    key={card.id}
+                    id={card.id}
                     isPremium={card.isPremium}
                     imgPath={card.imgPath}
                     price={card.price}

src/data/cardsData.ts

@@ -1,7 +1,8 @@
-import { SingleCard } from '../types';
+import { SingleCard } from '../lib/types.ts/card';
 
-export const cards: SingleCard[] = [
+export const CARDS: SingleCard[] = [
   {
+    id: 1,
     isPremium: true,
     imgPath: 'img/apartment-01.jpg',
     price: 120,
@@ -11,6 +12,7 @@ export const cards: SingleCard[] = [
     placeType: 'Apartment',
   },
   {
+    id: 2,
     isPremium: false,
     imgPath: 'img/room.jpg',
     price: 80,
@@ -20,6 +22,7 @@ export const cards: SingleCard[] = [
     placeType: 'Private room',
   },
   {
+    id: 3,
     isPremium: false,
     imgPath: 'img/apartment-02.jpg',
     price: 132,
@@ -29,6 +32,7 @@ export const cards: SingleCard[] = [
     placeType: 'Apartment',
   },
   {
+    id: 4,
     isPremium: true,
     imgPath: 'img/apartment-03.jpg',
     price: 180,
@@ -38,6 +42,7 @@ export const cards: SingleCard[] = [
     placeType: 'Apartment',
   },
   {
+    id: 5,
     isPremium: false,
     imgPath: 'img/room.jpg',
     price: 80,

src/types.ts → src/lib/types.ts/card.ts

@@ -1,9 +1,12 @@
+type Rating = 1 | 2 | 3 | 4 | 5;
+
 export type SingleCard = {
+  id: number;
   isPremium: boolean;
   imgPath: string;
   price: number;
   inBookmarks: boolean;
-  rating: 1 | 2 | 3 | 4 | 5;
+  rating: Rating;
   placeName: string;
   placeType: string;
 };