Replace react-responsive with react-use useMedia hook

package.json

@@ -19,8 +19,8 @@
     "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-responsive": "^9.0.2",
     "react-scroll": "^1.9.0",
+    "react-use": "^17.4.0",
     "styled-components": "^6.1.1"
   },
   "devDependencies": {

src/App.tsx

@@ -1,5 +1,6 @@
 import { ConfigProvider } from 'antd'
 import { NavigationBar } from './components/NavigationBar'
+import { Housing } from './pages/Housing'
 import { Place } from './pages/Place'
 import { Welcome } from './pages/Welcome'
 import { Colors } from './styles/color'
@@ -21,6 +22,7 @@ export const App = () => (
         <NavigationBar />
         <Welcome />
         <Place />
+        <Housing />
     </ConfigProvider>
 )
 

src/components/NavigationBar.tsx

@@ -2,7 +2,7 @@ import { MenuOutlined } from '@ant-design/icons'
 import { Button, Drawer, Layout } from 'antd'
 import { Header as BaseHeader } from 'antd/es/layout/layout'
 import { useState } from 'react'
-import { useMediaQuery } from 'react-responsive'
+import { useMedia } from 'react-use'
 import styled from 'styled-components'
 import { Menu } from './Menu'
 
@@ -13,7 +13,7 @@ export const NavigationBar = () => {
     const showDrawer = () => {
         setOpen(!open)
     }
-    const isTabletOrMobile = useMediaQuery({ maxWidth: 800 })
+    const isTabletOrMobile = useMedia(`screen and (max-width: 1024px)`)
 
     return (
         <Nav>

src/pages/Housing.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+export const Housing: React.FC = () => {
+    return (
+        <Wrapper id="housing">
+            <text>
+                Nous vous conseillons vivement de regarder les appartements et maisons sur Airbnb, Abritel ou Booking. Dans la région, beaucoup sont des locations saisonnières,
+                vous devriez trouver votre bonheur. Nous vous conseillons les villes de Crac’h si vous souhaitez être proche du lieu de mariage, Locmariaquer (lieu de la messe), La
+                Trinité-sur-Mer et Saint Philibert. Voici tout de même une petite sélection d’hôtels, maisons d’hôte et campings à tous les tarifs :
+            </text>
+            <div>
+                CRAC’H (proche lieu du mariage) CAMPING (💵) - Le Fort Espagnol (bungalows, emplacements pour tente): https://www.fort-espagnol.com/sejournez/ CHAMBRES D’HOTE (💵)
+                - Kerpunce : https://www.booking.com/Share-C890zgQ SAINT PHILIBERT (13 min en voiture du lieu du mariage) HOTELS (💵💵) - La villa Bel ange :
+                https://www.booking.com/Share-XSsf0c LA TRINITE SUR MER (16min en voiture du lieu du mariage) CHAMBRES D’HOTE (💵💵💵) - Les chambre du Keriolet :
+                https://www.booking.com/Share-URCH5w HOTELS (💵💵/ 💵💵💵) - Le galet hôtel & spa : https://www.booking.com/Share-3OHrTzs - Le lodge Kerisper :
+                https://www.booking.com/Share-IQmIv8 - Trinité Hotel : https://www.booking.com/Share-BLBKkYc LOCMARIAQUER (lieu de la messe - 12 min en voiture du lieu du mariage)
+                CHAMBRES D’HOTE (💵💵💵) - Rêves de bord de mer : https://www.booking.com/Share-z3UNCq
+            </div>
+        </Wrapper>
+    )
+}
+
+const Wrapper = styled.section`
+    width: 100%;
+    text-align: center;
+`