@rileybathurst/paddle 1.5.2 → 1.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.5.2",
+  "version": "1.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/paddle-pricing-chart.tsx

@@ -3,14 +3,34 @@ import { Link } from "gatsby"
 import type { paddlePricingChartTypes } from "./types/paddle-pricing-chart-types";
 
 const LineBreaker = ({ text }: { text: string; }) => {
-  // Split the text by hyphens and spaces, keeping the delimiters
-  const parts = text.split(/([- ])/g);
+  const splitIndex = (() => {
+    const spaceIndexes = [];
+    for (let i = 0; i < text.length; i++) {
+      if (text[i] === " ") spaceIndexes.push(i);
+    }
+    if (spaceIndexes.length === 0) return -1;
+    let minDiff = Infinity;
+    let bestIndex = spaceIndexes[0];
+    for (const idx of spaceIndexes) {
+      const left = text.slice(0, idx).length;
+      const right = text.slice(idx + 1).length;
+      const diff = Math.abs(left - right);
+      if (diff < minDiff) {
+        minDiff = diff;
+        bestIndex = idx;
+      }
+    }
+    return bestIndex;
+  })();
+
+  const firstPart = text.slice(0, splitIndex);
+  const secondPart = text.slice(splitIndex + 1);
 
   return (
     <h4 className="title">
-      {parts.map((part) =>
-        part === '-' || part === ' ' ? <br key={part} /> : part
-      )}
+      {firstPart}
+      <br />
+      {secondPart}
     </h4>
   );
 }
@@ -30,11 +50,18 @@ export const PaddlePricingChart = ({ rentalRates }: paddlePricingChartTypes) =>
 
       {rentalRates.nodes.map((rate) => (
         <div key={rate.id} className="column">
-          <LineBreaker text={rate.item} />
-          <p>${rate.oneHour}</p>
-          <p>${rate.threeHour}</p>
-          <p>${rate.fullDay}</p>
-          <p>{rate.pedalAdd ? `+ $${rate.pedalAdd}` : null}</p>
+          {rate.retail ? (
+            <Link to={`/retail/${rate.retail.sport.slug}/${rate.retail.brand.slug}/${rate.retail.slug}`}>
+              <LineBreaker text={rate.item} />
+            </Link>
+          )
+            : (
+              <LineBreaker text={rate.item} />
+            )}
+          <p>{rate.oneHour ? `$${rate.oneHour}` : '&nbsp;'}</p>
+          <p>{rate.threeHour ? `$${rate.threeHour}` : '&nbsp;'}</p>
+          <p>{rate.fullDay ? `$${rate.fullDay}` : '&nbsp;'}</p>
+          <p>{rate.pedalAdd ? `+ $${rate.pedalAdd}` : '&nbsp;'}</p>
         </div>
       ))}
     </div>

package/src/styles/color.css

@@ -39,6 +39,18 @@ body .south-tahoe {
   }
 }
 
+/*------------------------------------*/
+/* #HR */
+/*------------------------------------*/
+
+hr {
+  border-color: var(--neutral-300);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--neutral-600);
+  }
+}
+
 /*------------------------------------*/
 /* #TOP-BAR */
 /*------------------------------------*/
@@ -97,11 +109,3 @@ body .south-tahoe {
 .specs .spec__unit {
   color: grey;
 }
-
-.menu__large hr {
-  border-color: var(--neutral-300);
-
-  @media (prefers-color-scheme: dark) {
-    border-color: var(--neutral-600);
-  }
-}

package/src/styles/lists.css

@@ -6,24 +6,18 @@
 /* #DEFAULTS */
 /*------------------*/
 
-ul {
-  padding-inline-start: var(--kosciuszko);
+ul,
+ol {
   margin: 0; /* reset */
   list-style: none; /* reset */
+  padding-inline-start: 0;
+  margin-block-end: var(--vinson);
 
   li {
     display: block;
     margin-block-end: var(--baseline);
-  }
-}
-
-ol {
-  list-style: none; /* reset */
-  margin-block-start: 0;
-
-  li {
-    display: inline flow-root list-item;
-    margin-block-end: var(--baseline);
+    padding-inline-start: 0;
+    line-height: var(--kilimanjaro);
   }
 }
 

package/src/types/paddle-pricing-chart-types.ts

@@ -9,6 +9,16 @@ export type paddlePricingChartTypes = {
       threeHour: number;
       fullDay: number;
       pedalAdd?: number;
+
+      retail?: {
+        slug: string;
+        sport: {
+          slug: string;
+        };
+        brand: {
+          slug: string;
+        };
+      };
     }[];
   };
 };