feat: add pros and cons on trips

src/fixtures/trips/22-lav/index.ts

@@ -17,6 +17,17 @@ export const lav22Trip: TTrip = {
   to: 'Nantes',
   description:
     "Pour notre premier voyage nous avons choisi d'emprunter la Loire à vélo depuis Tours jusqu'à Nantes. Elle propose un itinéraire idéal pour débuter. Le tracé est relativement plat et traverse de nombreuses villes où il est possible de s'arrêter manger ou dormir. Nous avions le cargo électrique et notre fille qui n'avait pas encore un an, il ne fallait donc pas de trop grosses étapes. Nous n'avons pas été déçus par le côté sauvage et la Faune qu'offre la Loire, ainsi que par les nombreux châteaux que nous avons pû admirer tout le long du chemin.",
+  pros: [
+    "L'itinéraire est bien fléché.",
+    'La Loire est un fleuve magnifique à suivre.',
+    'Les nombreux châteaux et beaux villages que nous avons pû traverser.',
+    "Il y a beaucoup d'endroits où s'arrêter manger et dormir.",
+  ],
+  cons: [
+    'Beaucoup de sections sont partagées avec les voitures.',
+    "Des détours dénués d'intérêt montant sur les cotaux, les variantes sont des fois mieux que l'itinéraire principal.",
+    "Le fait que le train Loire à Vélo ne circule pas toute l'année et que seulement 2 trains circulent par jour.",
+  ],
   steps: [
     {
       from: 'Tours',
@@ -105,7 +116,7 @@ export const lav22Trip: TTrip = {
       cons: [
         'La sortie de ville de Saumur',
         'Les longues lignes droites sans ombre au milieu des champs',
-        "Le fait qu'il s'est pas possible de mettre un vélo cargo dans le bac quand le niveau de l'eau est bas",
+        "Le fait qu'il n'est pas possible de mettre un vélo cargo dans le bac quand le niveau de l'eau est bas",
         "L'entrée de ville d'Angers par le nord de la Loire",
       ],
       photos: [

src/fixtures/trips/23-velo-francette/index.ts

@@ -17,6 +17,15 @@ export const veloFrancette23Trip: TTrip = {
   to: 'La Rochelle',
   description:
     "Pour rejoindre La Rochelle depuis Tours il est possible d'emprunter la Vélo Francette. L'itinéraire est moins bien balisé, plus vallonné et traverse moins de villes que celui de la Loire à Vélo, mais il offre des paysages plus variés. Nous avons particulièrement apprécié la ville de Parthenay et la traversée du Marais Poitevin !",
+  pros: [
+    "L'itinéraire est moins emprunté que la Loire à Vélo par exemple. On retrouve les mêmes personnes d'un jour à l'autre sur le trajet, ça permet de discuter un peu !",
+    'Le calme du Marais Poitevin et sa faune',
+  ],
+  cons: [
+    "Il est normalement interdit d'embarquer dans un train régional avec une charette non pliée. C'est très problématique quand on voyage avec des enfants en bas âge !",
+    "L'itinéraire n'est pas aussi bien fléché que celui de la Loire à Vélo par exemple",
+    "La difficulté pour trouver un endroit où s'arrêter pique-niquer, peu de villes pour s'arrêter domir si on veut faire de plus petites étapes.",
+  ],
   steps: [
     {
       date: new Date('2023-05-20'),
@@ -25,12 +34,7 @@ export const veloFrancette23Trip: TTrip = {
       from: 'Chinon',
       to: 'Thouars',
       pros: ['La traversée des vignes de Chinon'],
-      cons: [
-        "Il est normalement interdit d'embarquer dans un train régional avec une charette non pliée. C'est très problématique quand on voyage avec des enfants en bas âge !",
-        "L'itinéraire n'est pas aussi bien fléché que celui de la Loire à Vélo par exemple",
-        "La difficulté de trouver un endroit pour s'arrêter pique-niquer",
-        'La ville de Thouars est un peu désertique',
-      ],
+      cons: ['La ville de Thouars est un peu désertique'],
       photos: [
         {
           path: 'trips/23-velo-francette/step-1/PXL_20230520_072055163.jpg',
@@ -64,11 +68,7 @@ export const veloFrancette23Trip: TTrip = {
       geometry: step2,
       from: 'Thouars',
       to: 'Parthenay',
-      pros: [
-        'Le fait de retrouver les mêmes personnes que la veille sur le trajet',
-        'Les voies vertes loin des routes',
-        'La ville de Parthenay',
-      ],
+      pros: ['Les voies vertes loin des routes', 'La ville de Parthenay'],
       cons: [],
       photos: [
         {

src/fixtures/trips/23-velodyssee/index.ts

@@ -17,6 +17,14 @@ export const velodyssee23Trip: TTrip = {
   to: 'Saint Nazaire',
   description:
     "Lorsque nous partons en Vendée, nos balades à vélo empruntent souvent une portion de la Vélodyssée. C'est donc tout naturellement que nous avons eu envie de faire un voyage en la suivant plus longuement. Nous somme partis de La Rochelle et avons roulé jusqu'à Saint Nazaire, en passant par l'île de Noirmoutier et son fameux passage du Gois. L'itinéraire quitte de temps à autre le littoral pour traverser des forêts ou les marais salants.",
+  pros: [
+    "Le fait de longer l'océan, pas aussi monotone que l'on pourrait croire, avec la traversée de forêts, de marais, de dunes, de ports.",
+    'La traversée du passage du Gois',
+  ],
+  cons: [
+    'Les villes balnéaires au littoral peu attrayant comme Saint-Jean-de-Monts',
+    'La traversée du pont de Saint-Nazaire, à proscrire.',
+  ],
   steps: [
     {
       date: new Date('2023-05-26'),

src/fixtures/trips/trip.ts

@@ -22,14 +22,16 @@ type TTripStep = {
 
 export type TTrip = {
   color: string;
+  cons?: string[];
   coverImage: string;
   coverImageDescription: string;
   description: string;
   from: string;
   key: string;
-  title: string;
+  pros?: string[];
   steps: TTripStep[];
   themes: TTripTheme[];
+  title: string;
 } & ({ to: string } | { isLoop: boolean });
 
 export class TripStep {
@@ -74,12 +76,14 @@ export class TripStep {
 export class Trip {
   public readonly bounds: LngLatBounds;
   public readonly color: string;
+  public readonly cons: string[];
   public readonly coverImage: string;
   public readonly coverImageDescription: string;
   public readonly description: string;
   public readonly from: string;
   public readonly isLoop: boolean;
   public readonly key: string;
+  public readonly pros: string[];
   public readonly title: string;
   public readonly to: string;
   public readonly simplifiedGeometry: GeoJSON.MultiLineString;
@@ -88,14 +92,16 @@ export class Trip {
 
   constructor({
     color,
+    cons,
     coverImage,
     coverImageDescription,
     description,
     from,
     key,
-    title,
+    pros,
     steps,
     themes,
+    title,
     ...props
   }: TTrip) {
     this.color = color;
@@ -109,6 +115,8 @@ export class Trip {
     this.to = 'to' in props ? props.to : this.from;
     this.steps = steps.map((props) => new TripStep(props));
     this.themes = themes;
+    this.pros = pros || [];
+    this.cons = cons || [];
 
     this.simplifiedGeometry = {
       type: 'MultiLineString',

src/templates/trip/cons.tsx

@@ -0,0 +1,32 @@
+import { Box, Heading, Icon, ListItem, UnorderedList } from '@chakra-ui/react';
+import React from 'react';
+import { IoThumbsDown } from 'react-icons/io5';
+
+function Cons({ items }: { items: string[] }): JSX.Element {
+  if (items.length === 0) return <></>;
+
+  return (
+    <Box
+      bgColor="red.50"
+      borderRadius={16}
+      display="flex"
+      flexDirection="column"
+      gap={3}
+      padding={6}
+    >
+      <Box alignItems="center" display="flex" gap={2}>
+        <Icon as={IoThumbsDown} boxSize={4} color="red.500" />
+        <Heading as="h4" color="red.500" fontSize="1rem" fontWeight={700}>
+          Ce qu'on a moins aimé
+        </Heading>
+      </Box>
+      <UnorderedList>
+        {items.map((item, index) => (
+          <ListItem key={index}>{item}</ListItem>
+        ))}
+      </UnorderedList>
+    </Box>
+  );
+}
+
+export default Cons;

src/templates/trip/index.tsx

@@ -7,7 +7,9 @@ import { TripThemes } from '../../components';
 import { trips } from '../../fixtures';
 import PageBreadcrumb from '../../layout/breadcrumb';
 
+import Cons from './cons';
 import TripMap from './map';
+import Pros from './pros';
 import Step from './step';
 
 type TTripPageContext = { tripIndex: number };
@@ -31,6 +33,8 @@ function TripPage({
     themes,
     description,
     steps,
+    pros,
+    cons,
   } = trip;
 
   return (
@@ -79,6 +83,8 @@ function TripPage({
             <Box maxWidth="80ch">
               <Text>{description}</Text>
             </Box>
+            <Pros items={pros} />
+            <Cons items={cons} />
           </Box>
         </Box>
         <Box display="flex" flexDirection="column" gap={8}>

src/templates/trip/pros.tsx

@@ -0,0 +1,32 @@
+import { Box, Heading, Icon, ListItem, UnorderedList } from '@chakra-ui/react';
+import React from 'react';
+import { IoThumbsUp } from 'react-icons/io5';
+
+function Pros({ items }: { items: string[] }): JSX.Element {
+  if (items.length === 0) return <></>;
+
+  return (
+    <Box
+      bgColor="green.50"
+      borderRadius={16}
+      display="flex"
+      flexDirection="column"
+      gap={3}
+      padding={6}
+    >
+      <Box alignItems="center" display="flex" gap={2}>
+        <Icon as={IoThumbsUp} boxSize={4} color="green.500" />
+        <Heading as="h4" color="green.500" fontSize="1rem" fontWeight={700}>
+          Ce qu'on a aimé
+        </Heading>
+      </Box>
+      <UnorderedList>
+        {items.map((item, index) => (
+          <ListItem key={index}>{item}</ListItem>
+        ))}
+      </UnorderedList>
+    </Box>
+  );
+}
+
+export default Pros;

src/templates/trip/step.tsx

@@ -1,10 +1,12 @@
-import { Avatar, Box, Heading, Icon, ListItem, Text, UnorderedList } from '@chakra-ui/react';
+import { Avatar, Box, Heading, Text } from '@chakra-ui/react';
 import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image';
 import React, { useState } from 'react';
-import { IoThumbsDown, IoThumbsUp } from 'react-icons/io5';
 
 import { TripStep } from '../../fixtures';
 
+import Cons from './cons';
+import Pros from './pros';
+
 function Step({
   stepIndex,
   step: { title, distance, photos, pros, cons },
@@ -74,50 +76,8 @@ function Step({
             </Box>
           </Box>
         )}
-        {pros.length > 0 && (
-          <Box
-            bgColor="green.50"
-            borderRadius={16}
-            display="flex"
-            flexDirection="column"
-            gap={3}
-            padding={6}
-          >
-            <Box alignItems="center" display="flex" gap={2}>
-              <Icon as={IoThumbsUp} boxSize={4} color="green.500" />
-              <Heading as="h4" color="green.500" fontSize="1rem" fontWeight={700}>
-                Ce qu'on a aimé
-              </Heading>
-            </Box>
-            <UnorderedList>
-              {pros.map((item, index) => (
-                <ListItem key={index}>{item}</ListItem>
-              ))}
-            </UnorderedList>
-          </Box>
-        )}
-        {cons.length > 0 && (
-          <Box
-            bgColor="red.50"
-            borderRadius={16}
-            display="flex"
-            flexDirection="column"
-            gap={3}
-            padding={6}
-          >
-            <Box alignItems="center" display="flex" gap={2}>
-              <Icon as={IoThumbsDown} boxSize={4} color="red.500" />
-              <Heading as="h4" color="red.500" fontSize="1rem" fontWeight={700}>
-                Ce qu'on a moins aimé
-              </Heading>
-            </Box>
-            <UnorderedList>
-              {cons.map((item, index) => (
-                <ListItem key={index}>{item}</ListItem>
-              ))}
-            </UnorderedList>
-          </Box>
-        )}
+        <Pros items={pros} />
+        <Cons items={cons} />
       </Box>
     </Box>
   );