@rileybathurst/paddle 1.9.45 → 1.9.47

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.45",
+  "version": "1.9.47",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",

package/src/App.tsx

@@ -1,10 +1,11 @@
 // * this is the opening vite page to test functions with
+// TODO: faker
 
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import { PaddlePricingChart } from './paddle-pricing-chart'
-import { PaddleCompare } from './paddle-compare'
+// import { PaddleCompare } from './paddle-compare'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -96,7 +97,7 @@ function App() {
         }}
       />
 
-      <PaddleCompare
+      {/* <PaddleCompare
         peek_base="123"
         strapiBranchName="south-tahoe"
         tours={[
@@ -149,7 +150,7 @@ function App() {
             peek: "101112"
           }
         ]}
-      />
+      /> */}
     </>
   )
 }

package/src/paddle-compare.tsx

@@ -12,7 +12,7 @@ type CompareDetailsTypes = {
   id: React.Key;
   name: TourType["name"];
   onTourChange: (value: TourType["name"]) => void;
-  compositionImage: TourType["compositionImage"] | null;
+  ogimage: TourType["ogimage"] | null;
   link: TourType["slug"];
   sport: TourType["sport"];
   duration?: TourType["duration"];
@@ -34,7 +34,7 @@ type CompareDetailsTypes = {
 const CompareDetails = ({
   name,
   onTourChange,
-  compositionImage,
+  ogimage,
   link,
   sport,
   duration,
@@ -60,6 +60,10 @@ const CompareDetails = ({
     timeframe: timeframe,
   });
 
+  if (sport === "sup") {
+    sport = "Paddleboard";
+  }
+
   return (
     <section>
       <select
@@ -80,13 +84,13 @@ const CompareDetails = ({
         ))}
       </select>
 
-      {compositionImage ? (
+      {ogimage ? (
         <GatsbyImage
-          image={compositionImage.localFile.childImageSharp.gatsbyImageData}
-          alt={compositionImage.alternativeText || name}
-          className="comparesheet_image"
+          image={ogimage.localFile.childImageSharp.gatsbyImageData}
+          alt={ogimage.alternativeText || name}
+          className="comparesheet_image img__wrapped"
         />
-      ) : <React.Fragment>&nbsp;</React.Fragment>}
+      ) : <div>&nbsp;</div>}
 
       <h2 className="kilimanjaro">
         <Link to={`/${breadcrumb}/${link}`}>
@@ -132,8 +136,8 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
 
   let [tour1, setTour1] = useState(tours[0].name || "Tour 1");
   let [tour2, setTour2] = useState(tours[1].name || "Tour 2");
-  let [image1, setImage1] = useState(tours[0].compositionImage || null);
-  let [image2, setImage2] = useState(tours[1].compositionImage || null);
+  let [image1, setImage1] = useState(tours[0].ogimage || null);
+  let [image2, setImage2] = useState(tours[1].ogimage || null);
   let [link1, setLink1] = useState(tours[0].slug || "not set");
   let [link2, setLink2] = useState(tours[1].slug || "not set");
   let [sport1, setSport1] = useState(tours[0].sport || "not set");
@@ -164,7 +168,7 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
     if (!selectedTour) return;
 
     setTour1(selectedTour.name);
-    setImage1(selectedTour.compositionImage || null);
+    setImage1(selectedTour.ogimage || null);
     setLink1(selectedTour.slug || "not set");
     setSport1(selectedTour.sport || "not set");
     setDuration1(selectedTour.duration || 0);
@@ -176,7 +180,7 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
     setMinimum1(selectedTour.minimum || 0);
     setPrice1(selectedTour.price || 0);
     setPeeks1(selectedTour.peek || "not set");
-    setFitness1(selectedTour.fitness || "fitness");
+    setFitness1(selectedTour.fitness || "not set");
   };
 
   const updateTour2 = (selectedName: string) => {
@@ -184,7 +188,7 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
     if (!selectedTour) return;
 
     setTour2(selectedTour.name);
-    setImage2(selectedTour.compositionImage || null);
+    setImage2(selectedTour.ogimage || null);
     setLink2(selectedTour.slug || "not set");
     setSport2(selectedTour.sport || "not set");
     setDuration2(selectedTour.duration || 0);
@@ -196,7 +200,7 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
     setMinimum2(selectedTour.minimum || 0);
     setPrice2(selectedTour.price || 0);
     setPeeks2(selectedTour.peek || "not set");
-    setFitness2(selectedTour.fitness || "fitness");
+    setFitness2(selectedTour.fitness || "not set");
   };
 
   return (
@@ -204,11 +208,11 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
       <div className='comparesheet'>
         <div className='comparesheet_names'>
           <div className="comparesheet__transparent">Compare</div>
+          <p>&nbsp;</p>
           <h3 className='kilimanjaro comparesheet_freeze'>
             Tour or<br />
             Lesson
           </h3>
-          <p>Image</p>
           <p>Sport</p>
           <p>Time</p>
           <p>Fitness</p>
@@ -222,7 +226,7 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
         <CompareDetails
           id={id1}
           name={tour1}
-          compositionImage={image1}
+          ogimage={image1}
           onTourChange={updateTour1}
           link={link1}
           sport={sport1}
@@ -246,7 +250,7 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
         <CompareDetails
           id={id2}
           name={tour2}
-          compositionImage={image2}
+          ogimage={image2}
           onTourChange={updateTour2}
           link={link2}
           sport={sport2}

package/src/styles/lists.css

@@ -84,22 +84,10 @@ ol {
   ul {
     list-style: none;
     padding-inline-start: 0;
-    display: flex;
-    flex-flow: row wrap;
-    gap: var(--vinson);
 
     li {
-      height: 2lh;
-      margin-block-end: 1lh;
-
-      @supports not (margin: 1lh) {
-        height: var(--aconcagua);
-        margin-block-end: var(--elbrus);
-      }
-    }
-
-    li:last-child {
-      border-bottom: none;
+      line-height: 1.5lh;
+      margin-block-end: 0; /* reset */
     }
   }
 }

package/src/styles/media.css

@@ -164,6 +164,12 @@ svg {
 .img__wrapped {
   border-radius: 0.25rem;
   box-shadow: var(--penumbra);
+
+  border: 1px solid white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid black;
+  }
 }
 
 .crop {

package/src/types/paddle-compare-types.tsx

@@ -5,7 +5,7 @@ export type PaddleCompareTypes = {
   tours: {
     id: React.Key;
     name: string;
-    compositionImage: PaddleGatsbyImageType;
+    ogimage: PaddleGatsbyImageType;
     slug: string;
     sport: string;
     duration?: number;