added component

htmlacademy-univer-javascript-3 · Nov 30, 2024 · 9bd7ce3 · 9bd7ce3
1 parent ef6b355
commit 9bd7ce3
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/src/Pages/main-page/main-page.tsx b/src/Pages/main-page/main-page.tsx
@@ -14,6 +14,7 @@ import {
   getCity,
   getSortedOffers,
 } from '../../store/offers/offers.selectors.ts';
+import { EmptyOffersList } from '../../components/offer/empty-offers-list.tsx';
 
 export function MainPage(): React.JSX.Element {
   const [activeOffer, setActiveOffer] = useState<Nullable<Offer>>(null);
@@ -65,22 +66,7 @@ export function MainPage(): React.JSX.Element {
               </div>
             </div>
           ) : (
-            <div className="cities">
-              <div className="cities__places-container cities__places-container--empty container">
-                <section className="cities__no-places">
-                  <div className="cities__status-wrapper tabs__content">
-                    <b className="cities__status">
-                      No places to stay available
-                    </b>
-                    <p className="cities__status-description">
-                      {`We could not find any property available at the moment in
-                        ${city.name}`}
-                    </p>
-                  </div>
-                </section>
-                <div className="cities__right-section no-offers"></div>
-              </div>
-            </div>
+            <EmptyOffersList cityName={city.name} />
           )}
         </main>
       </Layout>

diff --git a/src/components/offer/empty-offers-list.tsx b/src/components/offer/empty-offers-list.tsx
@@ -0,0 +1,24 @@
+import { City } from '../../dataTypes/city.ts';
+
+interface EmptyOffersListProps {
+  cityName: City['name'];
+}
+
+export function EmptyOffersList({ cityName }: EmptyOffersListProps) {
+  return (
+    <div className="cities">
+      <div className="cities__places-container cities__places-container--empty container">
+        <section className="cities__no-places">
+          <div className="cities__status-wrapper tabs__content">
+            <b className="cities__status">No places to stay available</b>
+            <p className="cities__status-description">
+              {`We could not find any property available at the moment in
+                        ${cityName}`}
+            </p>
+          </div>
+        </section>
+        <div className="cities__right-section no-offers"></div>
+      </div>
+    </div>
+  );
+}