@rileybathurst/paddle 1.9.39 → 1.9.41

package/package.json

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

package/src/paddle-compare.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link } from "gatsby";
 
 import { PaddleTime } from './paddle-time';
 import { PaddleBookNow } from './paddle-book-now';
@@ -25,6 +26,7 @@ type CompareDetailsTypes = {
   peek_base: PaddleCompareTypes["peek_base"];
   strapiBranchName: PaddleCompareTypes["strapiBranchName"];
   tours: PaddleCompareTypes["tours"];
+  breadcrumb: PaddleCompareTypes["breadcrumb"];
 };
 
 const CompareDetails = ({
@@ -44,19 +46,10 @@ const CompareDetails = ({
   peeks,
   peek_base,
   strapiBranchName,
-  tours
+  tours,
+  breadcrumb
 }: CompareDetailsTypes) => {
 
-  // TODO: testing
-  console.log("start");
-  console.log(start);
-  console.log("finish");
-  console.log(finish);
-  console.log("duration");
-  console.log(duration);
-  console.log("timeframe");
-  console.log(timeframe);
-
   const time = PaddleTime({
     start: start,
     finish: finish,
@@ -64,11 +57,6 @@ const CompareDetails = ({
     timeframe: timeframe,
   });
 
-  // TODO: testing
-  console.log("time", time);
-  console.log(time.entry);
-  console.log(time.value);
-
   return (
     <section>
       <select
@@ -90,13 +78,13 @@ const CompareDetails = ({
       </select>
 
       <h2 className="kilimanjaro">
-        <a href={link}>{name}</a>
+        <Link to={`/${breadcrumb}/${link}`}>{name}</Link>
       </h2>
 
       <h4 className="capitalize">{sport}</h4>
 
       <p>
-        {time.value}
+        {time.entry}
       </p>
 
       <p className="capitalize">
@@ -124,8 +112,7 @@ const CompareDetails = ({
   )
 }
 
-
-export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleCompareTypes) => {
+export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }: PaddleCompareTypes) => {
 
   console.log(tours);
 
@@ -233,6 +220,7 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
           peeks={peeks1}
           fitness={fitness1}
 
+          breadcrumb={breadcrumb}
           strapiBranchName={strapiBranchName}
           peek_base={peek_base}
 
@@ -255,6 +243,7 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
           peeks={peeks2}
           fitness={fitness2}
 
+          breadcrumb={breadcrumb}
           strapiBranchName={strapiBranchName}
           peek_base={peek_base}
 

package/src/paddle-time.tsx

@@ -19,21 +19,12 @@ interface TimeTypes {
 }
 export const PaddleTime = ({ start, finish, duration, timeframe, slug, allStrapiSunsetTourTime }: TimeTypes) => {
 
-// TODO: testing
-console.log("paddle time");
-  console.log(start);
-  console.log(finish);
-  console.log(duration);
-  console.log(timeframe);
-
   // TODO: sunset is a whole thing
   const currentDate = new Date();
   let sunsetStartTime = '';
   let sunsetEndTime = '';
 
   if (slug === 'sunset' && allStrapiSunsetTourTime && allStrapiSunsetTourTime.nodes) {
-  // TODO: testing
-console.log("sunset");
   
     allStrapiSunsetTourTime.nodes.map((time) => {
       const startDate = new Date(time.startDate);
@@ -50,8 +41,6 @@ console.log("sunset");
 
   // * compare gives a not set value
   if (timeframe && timeframe !== "not set") {
-  // TODO: testing
-console.log("timeframe");
 
     return {
       // key: timeframe, cant return key its a react special prop
@@ -62,10 +51,6 @@ console.log("timeframe");
   }
 
   if (duration) {
-
-// TODO: testing
-console.log("duration");
-
     if (duration > 90) {
       const hours = Math.floor(duration / 60);
       const mins = duration % 60;

package/src/styles/cards.css

@@ -17,8 +17,6 @@
     background-color: var(--neutral-700);
     border-color: var(--neutral-600);
   }
-
-
 }
 
 

package/src/styles/color.css

@@ -32,14 +32,7 @@ body:has(#storybook-root) {
   background-color: var(--sand-100);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--lake-300);
-  }
-}
-
-body.tahoe-city {
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--navy-300);
-    color: var(--neutral-100);
+    background-color: var(--lake-800);
   }
 }
 
@@ -103,8 +96,8 @@ hr {
 
 .top-bar {
   clip-path: inset(0 -100vmax);
-  background-color: var(--neutral-200);
-  box-shadow: 0 0 0 100vmax var(--neutral-200);
+    background-color: white;
+    box-shadow: 0 0 0 100vmax white;
   text-align: center;
 
   @media (prefers-color-scheme: dark) {
@@ -113,17 +106,6 @@ hr {
   }
 }
 
-@media (prefers-color-scheme: light) {
-  .tahoe-city .top-bar {
-    /* background-color: var(--neutral-100); */
-    /* box-shadow: 0 0 0 100vmax var(--neutral-100); */
-    background-color: white;
-    box-shadow: 0 0 0 100vmax white;
-  }
-
-  /* * dark back to clean theme */
-}
-
 .south-tahoe {
   .top-bar {
     background-color: var(--lake-100);
@@ -188,3 +170,19 @@ hr {
 .specs .spec__unit {
   color: grey;
 }
+
+/*------------------------------------*/
+/* #BREADCRUMBS */
+/*------------------------------------*/
+
+.react-aria-Breadcrumbs {
+  clip-path: inset(0 -100vmax);
+    background-color: white;
+    box-shadow: 0 0 0 100vmax white;
+  text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: black;
+    box-shadow: 0 0 0 100vmax black;
+  }
+}

package/src/styles/lists.css

@@ -56,6 +56,7 @@ ol {
   li {
     /* ? is this needed its a flex */
     display: inline;
+    margin: 0;
   }
 
   li:not(:last-child)::after {
@@ -83,6 +84,9 @@ ol {
   ul {
     list-style: none;
     padding-inline-start: 0;
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--vinson);
 
     li {
       height: 2lh;

package/src/styles/purchase.css

@@ -18,13 +18,11 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  border: 1px solid transparent;
   border-radius: var(--card-radius);
   /* needed to control nested elements */
   text-decoration: none;
   box-shadow: var(--penumbra);
   max-width: calc(100vw - 2rem);
-  background-color: white;
 
   .purchase-collage {
     display: grid;

package/src/styles/tables.css

@@ -10,7 +10,13 @@
     display: flex;
     flex: 1 1 10rem;
     flex-direction: column;
+
+    /* * follow the color of hr */
     border-right: 0.5px solid var(--neutral-400);
+
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--neutral-600);
+    }
   }
 
   .column:last-child {
@@ -50,3 +56,13 @@
     font-size: var(--kosciuszko);
   }
 }
+
+.tahoe-city .pricing-chart .column,
+.tahoe-city .pricing-chart .title,
+.tahoe-city .pricing-chart p {
+  border-color: var(--sand-400);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--lake-500);
+  }
+}

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

@@ -17,6 +17,7 @@ export type PaddleCompareTypes = {
     price: number;
     peek?: string;
   }[];
+  breadcrumb: string;
   strapiBranchName: string;
   peek_base: string;
 };