Add Pages enum and title associated

GregdTd · Dec 10, 2023 · 5c99ac7 · 5c99ac7
1 parent c0efae1
commit 5c99ac7
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 38 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,8 +2,8 @@ import { ConfigProvider, Layout } from 'antd'
 import { Footer as BaseFooter, Content } from 'antd/es/layout/layout'
 import styled from 'styled-components'
 import { NavigationBar } from './components/NavigationBar'
-import { Housing } from './pages/Housing'
-import { Place } from './pages/Place'
+import { Housing } from './pages/Accomodation'
+import { Place } from './pages/Location'
 import { Program } from './pages/Program'
 import { Welcome } from './pages/Welcome'
 import { Colors } from './styles/Colors'

diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -5,31 +5,32 @@ import React from 'react'
 import { scroller } from 'react-scroll'
 import styled from 'styled-components'
 import { Colors } from '../styles/Colors'
+import { Pages, PagesTitles } from '../utils/types'
 
 const items: MenuProps['items'] = [
     {
-        label: 'Programme',
-        key: 'program',
+        label: PagesTitles[Pages.PROGRAM],
+        key: Pages.PROGRAM,
         icon: <CalendarFilled />,
     },
     {
-        label: 'Accès',
-        key: 'place',
+        label: PagesTitles[Pages.LOCATION],
+        key: Pages.LOCATION,
         icon: <CompassFilled />,
     },
     {
-        label: 'Logements',
-        key: 'housing',
+        label: PagesTitles[Pages.ACCOMODATION],
+        key: Pages.ACCOMODATION,
         icon: <HomeFilled />,
     },
     {
-        label: 'Activités',
-        key: 'activity',
+        label: PagesTitles[Pages.ACTIVITIES],
+        key: Pages.ACTIVITIES,
         icon: <RocketFilled />,
     },
     {
-        label: 'Liste de mariage',
-        key: 'list',
+        label: PagesTitles[Pages.LIST],
+        key: Pages.LIST,
         icon: <GiftFilled />,
     },
 ]

diff --git a/src/pages/Accomodation.tsx b/src/pages/Accomodation.tsx
@@ -0,0 +1,38 @@
+import { SectionWrapper } from '../styles/Layout'
+import { Pages } from '../utils/types'
+
+export const Accomodation: React.FC = () => {
+    return (
+        <SectionWrapper id={Pages.ACCOMODATION}>
+            <div>
+                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 :
+            </div>
+            <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>
+            <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>
+            <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>
+        </SectionWrapper>
+    )
+}
diff --git a/src/pages/Housing.tsx b/src/pages/Housing.tsx
diff --git a/src/pages/Place.tsx → src/pages/Location.tsx b/src/pages/Place.tsx → src/pages/Location.tsx
@@ -1,8 +1,9 @@
 import { SectionWrapper } from '../styles/Layout'
+import { Pages } from '../utils/types'
 
 export const Place: React.FC = () => {
     return (
-        <SectionWrapper id="place" title="Accès">
+        <SectionWrapper id={Pages.LOCATION}>
             <span>Chateau de K</span>
         </SectionWrapper>
     )

diff --git a/src/pages/Program.tsx b/src/pages/Program.tsx
@@ -4,10 +4,11 @@ import styled from 'styled-components'
 import { Colors } from '../styles/Colors'
 import { SectionWrapper } from '../styles/Layout'
 import { mobile } from '../styles/media-queries'
+import { Pages } from '../utils/types'
 
 export const Program: React.FC = () => {
     return (
-        <SectionWrapper id="program" title="Programme">
+        <SectionWrapper id={Pages.PROGRAM}>
             <ColumnWrapper>
                 <Column>
                     <Card title="Vendredi 14 juin" bordered={true}>

diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
@@ -5,10 +5,11 @@ import BaseJulieGregPhoto from '../assets/jugreg.svg?react'
 import { Arrow } from '../components/Arrow'
 import { SectionWrapper as BaseSectionWrapper } from '../styles/Layout'
 import { mobile } from '../styles/media-queries'
+import { Pages } from '../utils/types'
 
 export const Welcome: React.FC = () => {
     return (
-        <SectionWrapper id="welcome">
+        <SectionWrapper id={Pages.WELCOME}>
             <Title>
                 Bienvenue sur le site du mariage de<Surname>Julie et Grégoire</Surname>
             </Title>

diff --git a/src/styles/Layout.tsx b/src/styles/Layout.tsx
@@ -1,11 +1,12 @@
 import styled from 'styled-components'
+import { Pages, PagesTitles } from '../utils/types'
 import { Colors } from './Colors'
 
-export const SectionWrapper: React.FC<{ title?: string; id: string; children?: React.ReactNode; className?: string }> = ({ title, id, children, className }) => {
+export const SectionWrapper: React.FC<{ id: Pages; children?: React.ReactNode; className?: string }> = ({ title, id, children, className }) => {
     return (
         <Wrapper>
             <Section id={id} className={className}>
-                {title && <Title>{title}</Title>}
+                {PagesTitles[id] && <Title>{PagesTitles[id]}</Title>}
                 {children}
             </Section>
         </Wrapper>

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -0,0 +1,17 @@
+export enum Pages {
+    WELCOME = 'welcome',
+    PROGRAM = 'program',
+    LOCATION = 'place',
+    ACCOMODATION = 'housing',
+    ACTIVITIES = 'activities',
+    LIST = 'list',
+}
+
+export const PagesTitles: Record<Pages, string | null> = {
+    [Pages.WELCOME]: null,
+    [Pages.PROGRAM]: 'Programme',
+    [Pages.LOCATION]: 'Accès',
+    [Pages.ACCOMODATION]: 'Logements',
+    [Pages.ACTIVITIES]: 'Activités',
+    [Pages.LIST]: 'Liste de mariage',
+}