Refactor Delivery section on Routes page

src/components/icon/IconWithText.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react'
+
+type IconWithTextProps = {
+  icon: string
+  altText: string
+  description: string
+}
+
+const IconWithText: FC<IconWithTextProps> = ({
+  icon,
+  altText,
+  description,
+}) => {
+  return (
+    <div className="flex flex-wrap flex-col content-around w-1/2 h-40">
+      <div className="flex items-center justify-center mx-auto h-20 w-40">
+        <img className="w-20" src={icon} alt={altText} />
+      </div>
+      <p className="text-sm w-40 text-center my-2">{description}</p>
+    </div>
+  )
+}
+
+export default IconWithText

src/components/routes/Delivery.tsx

@@ -0,0 +1,81 @@
+import { MarkdownContent } from '@components/markdown/MarkdownContent'
+import { FC } from 'react'
+import heartBillIcon from '../../images/regular-routes/icons/noun_Heart_Bill_98293.svg'
+import mapIcon from '../../images/regular-routes/icons/noun_Maps_3610706.svg'
+import netIcon from '../../images/regular-routes/icons/noun_net_2428552.svg'
+import truckIcon from '../../images/regular-routes/icons/openmoji_truck.svg'
+import IconWithText from '../icon/IconWithText'
+import PhotoCredit from './PhotoCredit'
+import { RouteFrontlineGroup, RouteImages } from './RouteComponentTypes'
+import RoutesSectionImage from './RoutesSectionImage'
+import TextWithVisual from './TextWithVisual'
+
+type DeliveryProps = {
+  images: RouteImages
+  introduction: string
+  routeDestination: string
+  routeOrigin: string
+  frontlineGroups: RouteFrontlineGroup[]
+}
+
+const Delivery: FC<DeliveryProps> = ({
+  frontlineGroups,
+  images,
+  introduction,
+  routeDestination,
+  routeOrigin,
+}) => {
+  return (
+    <TextWithVisual
+      positionOfVisual="right"
+      visual={
+        <RoutesSectionImage
+          ariaLabel="Fork lift loading pallets into a truck"
+          image={images.deliverySection}
+        />
+      }
+    >
+      <header className="my-4 text-center">
+        <h1 className="flex justify-center mb-1 uppercase text-4xl">
+          Delivery
+        </h1>
+        <h2 className="text-2xl">
+          Regular Route: {routeOrigin}&rarr;
+          {routeDestination}
+        </h2>
+      </header>
+
+      <div className="mt-4">
+        <MarkdownContent content={introduction} />
+        <div className="flex flex-wrap justify-center mt-4">
+          <IconWithText
+            icon={netIcon}
+            altText="Hub Icon: Multiple nodes connected to a center hub."
+            description="UK Staging Hub in Coventry"
+          />
+          <IconWithText
+            icon={mapIcon}
+            altText="Map Icon: A destination marker on a map."
+            description={`Service to ${routeDestination}, supporting ${frontlineGroups.length} frontline groups`}
+          />
+          <IconWithText
+            icon={truckIcon}
+            altText="Truck Icon: A truck in motion."
+            description={'Regular shipments, scaled to demand'}
+          />
+          <IconWithText
+            icon={heartBillIcon}
+            altText="Money Icon: A currency bill with a heart in the middle."
+            description="Fair flat-rate pricing, all-inclusive, at-cost"
+          />
+        </div>
+      </div>
+      <PhotoCredit
+        url="https://www.facebook.com/groups/hertsforrefugees/permalink/3488608217903521/"
+        description="Mark Lampert of Herts For Refugees"
+      />
+    </TextWithVisual>
+  )
+}
+
+export default Delivery

src/components/routes/PhotoCredit.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+
+type PhotoCreditProps = {
+  url: string
+  description: string
+}
+
+const PhotoCredit: FC<PhotoCreditProps> = ({ url, description }) => {
+  return (
+    <footer>
+      <p className="text-sm italic text-center">
+        <span>Background photo credit:</span>{' '}
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          {description}
+        </a>
+      </p>
+    </footer>
+  )
+}
+
+export default PhotoCredit

src/components/routes/RouteComponentTypes.ts

@@ -10,13 +10,7 @@ export type Route = {
   mapUrl: string
   aidRequestFormUrl: string
   population: number
-  images: {
-    deliverySection: string
-    reservationSection: string
-    groupsSection: string
-    storageSection: string
-    palletsSection: string
-  }
+  images: RouteImages
   costs: {
     currency: string
     standardPaletteCost: number
@@ -30,8 +24,18 @@ export type Route = {
     stagingEnds: string
     shipmentDeparture: string
   }
-  frontlineGroups: {
-    logo: string
-    name: string
-  }[]
+  frontlineGroups: RouteFrontlineGroup[]
+}
+
+export type RouteImages = {
+  deliverySection: string
+  reservationSection: string
+  groupsSection: string
+  storageSection: string
+  palletsSection: string
+}
+
+export type RouteFrontlineGroup = {
+  logo: string
+  name: string
 }

src/pages/routes/{DARoute.slug}.tsx

@@ -5,19 +5,16 @@ import { FC } from 'react'
 import { PageHeader } from '@components/PageHeader'
 import { Route } from '@components/routes/RouteComponentTypes'
 
-import { MarkdownContent } from '../../components/markdown/MarkdownContent'
 import RoutesSectionImage from '../../components/routes/RoutesSectionImage'
 import TextWithVisual from '../../components/routes/TextWithVisual'
 import SimpleLayout from '../../layouts/Simple'
 
-import heartBillIcon from '../../images/regular-routes/icons/noun_Heart_Bill_98293.svg'
-import mapIcon from '../../images/regular-routes/icons/noun_Maps_3610706.svg'
-import netIcon from '../../images/regular-routes/icons/noun_net_2428552.svg'
+import Delivery from '@components/routes/Delivery'
+import PhotoCredit from '@components/routes/PhotoCredit'
 import palletIcon from '../../images/regular-routes/icons/noun_Pallet_3307940.svg'
 import halfPalletIcon from '../../images/regular-routes/icons/noun_Pallet_3364535.svg'
 import sackIcon from '../../images/regular-routes/icons/openmoji_bag.svg'
 import boxIcon from '../../images/regular-routes/icons/openmoji_box.svg'
-import truckIcon from '../../images/regular-routes/icons/openmoji_truck.svg'
 import vanIcon from '../../images/regular-routes/icons/openmoji_van.svg'
 
 type TemplateProps = {
@@ -63,98 +60,13 @@ export function Head({ data: { route } }: TemplateProps) {
 
 const Routes: FC<TemplateProps> = ({ data: { route } }) => (
   <SimpleLayout>
-    <TextWithVisual
-      positionOfVisual="right"
-      visual={
-        <RoutesSectionImage
-          ariaLabel="Fork lift loading pallets into a truck"
-          image={route.images.deliverySection}
-        />
-      }
-    >
-      <header className="my-4 text-center">
-        <h1 className="section__title">Delivery</h1>
-        <h2 className="text-2xl">
-          Regular Route: {route.routeOrigin}&rarr;
-          {route.routeDestination}
-        </h2>
-      </header>
-
-      <div className="section__body space-y-4">
-        <MarkdownContent content={route.introduction} />
-        <div className="tiles tiles--grid tiles--highlight mt-4">
-          <div className="tile tile--column w-1/2">
-            <div className="tile-icon mx-auto">
-              <img
-                className="icon icon--responsive"
-                src={netIcon}
-                alt="Hub Icon: Multiple nodes connected to a center hub."
-              />
-            </div>
-            <div className="tile-content">
-              <p className="mb-1">1 UK Staging Hubs</p>
-              <p>Coventry</p>
-            </div>
-          </div>
-
-          <div className="tile tile--column w-1/2">
-            <div className="tile-icon mx-auto">
-              <img
-                className="icon icon--responsive"
-                src={mapIcon}
-                alt="Map Icon: A destination marker on a map."
-              />
-            </div>
-            <div className="tile-content">
-              <p className="mb-1">Service to {route.routeDestination}</p>
-              <p>Supporting {route.frontlineGroups.length} Frontline Groups</p>
-            </div>
-          </div>
-
-          <div className="tile tile--column w-1/2">
-            <div className="tile-icon mx-auto">
-              <img
-                className="icon icon--responsive"
-                src={truckIcon}
-                alt="Truck Icon: A truck in motion."
-              />
-            </div>
-            <div className="tile-content">
-              <p className="mb-1">Regular Shipments</p>
-              <p>Scaled To Demand</p>
-            </div>
-          </div>
-
-          <div className="tile tile--column w-1/2">
-            <div className="tile-icon mx-auto">
-              <img
-                className="icon icon--responsive"
-                src={heartBillIcon}
-                alt="Money Icon: A currency bill with a heart in the middle."
-              />
-            </div>
-            <div className="tile-content">
-              <p className="mb-1">Fair Flat-Rate Pricing</p>
-              <p>All-Inclusive, At-Cost</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <footer>
-        <p className="photo-credit text-center">
-          <span>Background Photo Credit:</span>{' '}
-          <a
-            href="https://www.facebook.com/groups/hertsforrefugees/permalink/3488608217903521/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Mark Lampert of Herts For Refugees
-          </a>
-        </p>
-      </footer>
-    </TextWithVisual>
-
+    <Delivery
+      images={route.images}
+      introduction={route.introduction}
+      routeDestination={route.routeDestination}
+      routeOrigin={route.routeOrigin}
+      frontlineGroups={route.frontlineGroups}
+    />
     <TextWithVisual
       id="reserve-your-spot"
       positionOfVisual="left"
@@ -252,20 +164,10 @@ const Routes: FC<TemplateProps> = ({ data: { route } }) => (
         </ol>
       </div>
 
-      <footer>
-        <p className="photo-credit text-center">
-          <span>Background Photo Credit:</span>{' '}
-          <a href="https://unsplash.com/@ruchindra?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
-            Ruchindra Gunasekara
-          </a>{' '}
-          <span>
-            on{' '}
-            <a href="https://unsplash.com/s/photos/warehouse?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">
-              Unsplash
-            </a>
-          </span>
-        </p>
-      </footer>
+      <PhotoCredit
+        url="https://unsplash.com/@ruchindra?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText"
+        description="Ruchindra Gunasekara on Unsplash"
+      />
     </TextWithVisual>
 
     <TextWithVisual
@@ -302,18 +204,10 @@ const Routes: FC<TemplateProps> = ({ data: { route } }) => (
         </div>
       </div>
 
-      <footer>
-        <p className="photo-credit text-center hide-sm">
-          <span>Background Photo Credit:</span>{' '}
-          <a
-            href="https://www.facebook.com/MobileRefugeeSupport/posts/1492064960999110"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Mobile Refugee Support
-          </a>
-        </p>
-      </footer>
+      <PhotoCredit
+        url="https://www.facebook.com/MobileRefugeeSupport/posts/1492064960999110"
+        description="Mobile Refugee Support"
+      />
     </TextWithVisual>
 
     <TextWithVisual
@@ -367,7 +261,7 @@ const Routes: FC<TemplateProps> = ({ data: { route } }) => (
       </div>
 
       <footer>
-        <p className="photo-credit text-center">
+        <p className="text-sm italic text-center">
           Questions? Comments? Contact us all at{' '}
           <a
             href="mailto:hubs@distributeaid.org"
@@ -504,18 +398,10 @@ const Routes: FC<TemplateProps> = ({ data: { route } }) => (
         </ul>
       </div>
 
-      <footer>
-        <p className="photo-credit text-center">
-          <span>Background Photo Credit:</span>{' '}
-          <a
-            href="https://www.instagram.com/calais_food_collective/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Calais Food Collective
-          </a>
-        </p>
-      </footer>
+      <PhotoCredit
+        url="https://www.instagram.com/calais_food_collective/"
+        description="Calais Food Collective"
+      />
     </TextWithVisual>
 
     <TextWithVisual
@@ -616,18 +502,10 @@ const Routes: FC<TemplateProps> = ({ data: { route } }) => (
         </div>
       </div>
 
-      <footer>
-        <p className="photo-credit text-center hide-sm">
-          <span>Background Photo Credit:</span>{' '}
-          <a
-            href="https://www.facebook.com/DGRefugeeAction"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Jay Rubenstien of Massive Outpouring of Love
-          </a>
-        </p>
-      </footer>
+      <PhotoCredit
+        url="https://www.facebook.com/DGRefugeeAction"
+        description="Jay Rubenstien of Massive Outpouring of Love"
+      />
     </TextWithVisual>
   </SimpleLayout>
 )