@rileybathurst/paddle 1.9.30 → 1.9.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.30",
+  "version": "1.9.32",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",
@@ -10,6 +10,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "tsc --noEmit && stay-gold && storybook dev -p 6006",
+    "storybook-dirty": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "release": "npm version patch && npm login && npm publish",
     "stay-gold": "stay-gold"

package/src/index.tsx

@@ -19,6 +19,7 @@ export * from "./paddle-testimonial";
 export * from "./paddle-purchase";
 export * from "./paddle-pricing-chart";
 export * from "./paddle-texture-backgrounds";
+export * from "./paddle-compare";
 
 // Organisms
 export * from "./paddle-location-deck";
@@ -42,4 +43,5 @@ export * from "./types/paddle-purchase-types";
 export * from "./types/paddle-purchase-image-types";
 export * from "./types/paddle-brand-list-types";
 export * from "./types/paddle-book-now-types";
-export * from "./types/paddle-testimonial-types";
+export * from "./types/paddle-testimonial-types";
+export * from "./types/paddle-compare-types";

package/src/paddle-compare.tsx

@@ -1,10 +1,10 @@
-// TODO: this is not ready dont use it
-// Vite runs so I feel like I can pull this into it for testing itll be abit of a thing that might not be used but I think easier than storybook
+// ! this is the next fix
 
 import React from 'react';
 
 // import { PaddleTime } from './paddle-time';
 import { PaddleBookNow } from './paddle-book-now';
+import type { PaddleCompareTypes } from './types/paddle-compare-types';
 
 type CompareDetailsProps = {
   title: string;
@@ -22,9 +22,26 @@ type CompareDetailsProps = {
   peeks?: string;
   peek_base: string;
   strapiBranchName: string;
+
+  // ? this can maybe loop from itself?
+  tours: {
+    id: React.Key;
+    name: string;
+    slug: string;
+    sport: string;
+    duration?: string;
+    timeframe?: string;
+    start?: string;
+    finish?: string;
+    excerpt?: string;
+    minimum?: number;
+    price?: number;
+    peek?: string;
+    fitness?: string;
+  }[];
 };
 
-const CompareDetails = ({ 
+const CompareDetails = ({
   title,
   link,
   sport,
@@ -39,30 +56,33 @@ const CompareDetails = ({
   price,
   peeks,
   peek_base,
-  strapiBranchName }: CompareDetailsProps) => {
+  strapiBranchName,
+  tours
+}: CompareDetailsProps) => {
   return (
     <section>
-      {/* <select
+      <select
         name="tour1"
         id={title}
         className="comparesheet_select"
         aria-label="Select first tour or lesson"
       >
-        {Array.from({ length: faker.number.int({ min: 1, max: 10 }) }).map(() => (
+        {tours.map((tour) => (
           <option
-            key={faker.string.uuid()}
-            value={faker.food.dish()}
+            key={tour.id}
+            value={tour.name}
           >
-            {faker.food.dish()}
+            {tour.name}
           </option>
         ))}
-      </select> */}
+      </select>
       <h2 className="kilimanjaro">
         <a href={link}>{title}</a>
       </h2>
 
       <h4 className="capitalize">{sport}</h4>
 
+      {/* // TODO: time is more complex so just get it running first */}
       {/* <p>
         <PaddleTime
           start={start}
@@ -97,71 +117,17 @@ const CompareDetails = ({
   )
 }
 
-type PaddleCompareTypes = {
-  tours: {
-    id: number;
-    name: string;
-    slug: string;
-    sport: string;
-    duration?: string;
-    timeframe?: string;
-    start?: string;
-    finish?: string;
-    fitness?: string;
-    location: string;
-    excerpt: string;
-    minimum: number;
-    price: number;
-    peek?: string;
-  }[];
-  strapiBranchName: string;
-  peek_base: string;
-};
-export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleCompareTypes) => {
-
-  /* const [id1, setID1] = useState(tours[0].id);
-  const [id2, setID2] = useState(tours[1].id);
-
-  const [tour1, setTour1] = useState(tours[0].name);
-  const [tour2, setTour2] = useState(tours[1].name);
-
-  const [link1, setLink1] = useState(tours[0].slug);
-  const [link2, setLink2] = useState(tours[1].slug);
-
-  const [sport1, setSport1] = useState(tours[0].sport);
-  const [sport2, setSport2] = useState(tours[1].sport);
-
-  const [duration1, setDuration1] = useState(tours[0].duration || 'not set');
-  const [duration2, setDuration2] = useState(tours[1].duration || 'not set');
-
-  const [timeframe1, setTimeframe1] = useState(tours[0].timeframe || 'not set');
-  const [timeframe2, setTimeframe2] = useState(tours[1].timeframe || 'not set');
-
-  const [start1, setStart1] = useState(tours[0].start || 'not set');
-  const [start2, setStart2] = useState(tours[1].start || 'not set');
-
-  const [finish1, setFinish1] = useState(tours[0].finish || 'not set');
-  const [finish2, setFinish2] = useState(tours[1].finish || 'not set');
 
-  const [excerpt1, setExcerpt1] = useState(tours[0].excerpt || 'not set');
-  const [excerpt2, setExcerpt2] = useState(tours[1].excerpt || 'not set');
-
-  const [minimum1, setMinimum1] = useState(tours[0].minimum || 0);
-  const [minimum2, setMinimum2] = useState(tours[1].minimum || 0);
-
-  const [price1, setPrice1] = useState(tours[0].price || 0);
-  const [price2, setPrice2] = useState(tours[1].price || 0);
-
-  const [peeks1, setPeeks1] = useState(tours[0].peek || 'not set');
-  const [peeks2, setPeeks2] = useState(tours[1].peek || 'not set');
+export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleCompareTypes) => {
 
-  const [fitness1, setFitness1] = useState(tours[0].fitness || 'fitness');
-  const [fitness2, setFitness2] = useState(tours[1].fitness || 'fitness'); */
+  // TODO: testing
+  console.log(tours);
+  console.log(strapiBranchName);
+  console.log(peek_base);
 
-  // I dont know if this works as a state but I need to slowly build it all back out as its a mess
   let id1 = tours[0].id;
   let id2 = tours[1].id;
-  
+
   let tour1 = tours[0].name;
   let tour2 = tours[1].name;
   let link1 = tours[0].slug;
@@ -206,22 +172,6 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
           <p className='button-drop'>Book Now</p>
         </div>
 
-        <select
-          name="tour1"
-          // id={id1}
-          className="comparesheet_select"
-          aria-label="Select first tour or lesson"
-        >
-          {tours.map((tour) => (
-            <option
-              key={tour.id}
-              value={tour.id}
-            >
-              {tour.name}
-            </option>
-          ))}
-        </select>
-
         <CompareDetails
           key={id1}
           title={tour1}
@@ -237,8 +187,11 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
           price={price1}
           peeks={peeks1}
           fitness={fitness1}
+
           strapiBranchName={strapiBranchName}
           peek_base={peek_base}
+
+          tours={tours}
         />
         <CompareDetails
           key={id2}
@@ -255,8 +208,12 @@ export const PaddleCompare = ({ tours, strapiBranchName, peek_base }: PaddleComp
           price={price2}
           peeks={peeks2}
           fitness={fitness2}
+
           strapiBranchName={strapiBranchName}
           peek_base={peek_base}
+
+          tours={tours}
+
         />
 
       </div>

package/src/paddle-purchase.tsx

@@ -5,41 +5,41 @@ import { PaddleInchesRemainder } from "./paddle-inches-remainder";
 import { PaddleTextureBackgrounds } from "./paddle-texture-backgrounds";
 import { PaddlePurchaseAndImageTypes } from "./types/paddle-purchase-image-types";
 
-function Name({ name }: { name: string }) {
-  return (
-    <div className="badge">
-      <h5 className="capitalize">{name}</h5>
-    </div>
-  );
-}
+type BadgeTypes = Record<string, boolean | number | undefined>;
 
-interface BadgeTypes {
-  inflatable: boolean;
-  demo: boolean;
-  discount?: number;
-}
+type BadgesProps = {
+  badges: BadgeTypes;
+};
+const Badges = ({ badges }: BadgesProps) => {
+  return (
+    <>
+      {Object.entries(badges).map(([key, value]) => {
 
-// TODO: use the way I do specs for this
-// TODO: deal with multiple
-const Badges = ({ inflatable, demo, discount }: BadgeTypes) => {
-  if (discount) {
-    return (
-      <div className="badge">
-        <h5 className="capitalize">{discount}% off</h5>
-      </div>
-    );
-  }
+        if (!value) {
+          return null;
+        }
 
-  if (inflatable) {
-    return <Name name="inflatable" />;
-  }
+        if (key === "discount" && typeof value === "number") {
+          return (
+            <div className="badge" key={key}>
+              <h5 className="capitalize">{value}% off</h5>
+            </div>
+          );
+        }
 
-  if (demo) {
-    return <Name name="demo" />;
-  }
+        if (value === true) {
+          return (
+            <div className="badge" key={key}>
+              <h5 className="capitalize">{key}</h5>
+            </div>
+          );
+        }
 
-  return null;
-}
+        return null;
+      })}
+    </>
+  );
+};
 
 
 export const PaddlePurchase = ({
@@ -88,11 +88,19 @@ export const PaddlePurchase = ({
             />
           )}
         </Link>
-        <Badges
-          inflatable={inflatable}
-          demo={demo}
-          discount={discount}
-        />
+
+        {inflatable || demo || discount ? (
+          <div className="badges">
+            <Badges
+              badges={{
+                inflatable: inflatable,
+                demo: demo,
+            discount: discount
+          }}
+          />
+          </div>
+        ) : null}
+        
       </div>
       <h4 className="purchase__title">
         <Link to={`/retail/${sport.slug}/${brand.slug}/${slug}`}>{title}</Link>

package/src/styles/app.css

@@ -8,6 +8,8 @@
 @import "nav";
 @import "layout";
 @import "cards";
+@import "purchase";
+@import "ticket";
 @import "media";
 @import "color";
 @import "links";

package/src/styles/buttons.css

@@ -227,5 +227,5 @@ menu button {
 
 footer .book-now {
   margin-block-start: 0;
-  margin-block-end: var(--baseline);
+  margin-block-end: var(--vinson);
 }

package/src/styles/cards.css

@@ -1,163 +1,26 @@
 /*------------------*/
-/* #CARDS / PURCHASE / TICKET */
+/* #CARDS */
 /*------------------*/
 
-/* was deck */
-.bag {
-  margin-block-end: var(--aconcagua);
-
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
-
-  /* TODO: clamp */
-  gap: var(--kosciuszko);
-}
-
-/* was card */
-.purchase {
-  padding: 0;
-  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);
+.purchase,
+.ticket {
   background-color: white;
+  border: 1px solid var(--neutral-200);
+  border-radius:  var(--card-radius);
+  padding: var(--kosciuszko);
 
-  .purchase-collage {
-    display: grid;
-    width: 100%;
-
-    > * {
-      grid-row: 1;
-      grid-column: 1;
-    }
-
-    .texture-slice {
-      width: calc(100% - var(--elbrus));
-      aspect-ratio: 16/9;
-      height: 100%;
-      align-self: center;
-      margin: calc(var(--elbrus) / 2);
-      border-radius: 0.25rem;
-      box-shadow: var(--penumbra);
-      border: 1px solid whitesmoke;
-      stroke: whitesmoke;
-
-      @media (prefers-color-scheme: dark) {
-        border-color: var(--neutral-100);
-        stroke: var(--neutral-100);
-      }
-    }
-
-    .cutout {
-      object-fit: contain;
-      place-self: center;
-      z-index: var(--understory);
-      grid-row: 1/1;
-      filter: drop-shadow(5px 5px 5px var(--neutral-700));
-      aspect-ratio: 16/9;
-      width: 100%;
-    }
-
-    svg {
-      z-index: var(--floor);
-      max-height: 100%; /* overwrite the default */
-      margin: calc(var(--elbrus) / 2);
-      width: calc(100% - var(--elbrus));
-      stroke: whitesmoke;
-
-      @media (prefers-color-scheme: dark) {
-        stroke: var(--neutral-100);
-      }
-    }
-  }
-
-  .image-link {
-    transition: var(--fade);
-    transform: scale(1);
-    z-index: var(--floor);
-  }
-
-  .image-link:where(:hover, :focus) {
-    transform: scale(1.05);
-  }
-
-  .purchase__title {
-    font-size: var(--denali);
-    margin-inline: var(--kosciuszko);
-    line-height: 2.5;
-  }
-
-  hr,
-  p {
-    margin-inline: var(--kosciuszko);
-  }
-
-  /* img {
-    width: 100%;
-  } */
-
-  .purchase__details {
-    display: flex;
-    gap: var(--vinson);
-    width: calc(100% - var(--kilimanjaro));
-    margin-inline: var(--kosciuszko);
-    margin-block-end: var(--elbrus);
-    justify-content: space-between;
-
-    > * {
-      flex: 1 1;
-      margin: 0;
-    }
-
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: clamp(var(--vinson), 1.667vw, var(--denali));
-      font-weight: normal;
-      line-height: 3;
-    }
-
-    button {
-      line-height: 2;
-    }
+  @media (prefers-color-scheme: light) {
+    box-shadow: var(--penumbra);
   }
 
-  .badge {
-    z-index: var(--floor);
-    justify-self: end;
-    align-self: start;
-    padding: var(--kosciuszko);
-    margin: var(--kosciuszko);
-    border-radius: var(--card-radius);
-
-    background-color: var(--neutral-200);
-    border: 1px solid var(--neutral-100);
-    opacity: 0.9;
-
-    h5 {
-      margin: 0;
-      opacity: 1;
-      font-weight: normal;
-    }
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-700);
+    border-color: var(--neutral-600);
   }
-}
 
-.tahoe-city .purchase {
-  background-color: var(--sand-100);
 
-  hr {
-    border-color: var(--sand-400);
-  }
 }
 
-/* south-tahoe currently does not have a purchase */
 
 .purchase:hover,
 .ticket:hover {
@@ -165,27 +28,11 @@
     text-decoration: underline;
   }
 
-  /* TODO: v1.2 this could use more */
   img {
     filter: brightness(80%);
   }
 }
 
-.bag:empty {
-  display: none;
-}
-
-.bag__more {
-  max-width: var(--pelican);
-  margin-inline: auto;
-  padding-inline: var(--kosciuszko);
-
-  button {
-    margin-block-start: var(--kilimanjaro);
-    margin-inline: auto;
-  }
-}
-
 /*------------------*/
 /* #RETAIL LOGO */
 /*------------------*/
@@ -210,99 +57,3 @@
     margin-block-end: var(--kosciuszko);
   }
 }
-
-/*------------------------------------*/
-/* #TICKET */
-/*------------------------------------*/
-
-.flight {
-  margin-block-end: var(--aconcagua);
-
-  display: grid;
-
-  /* * iPhone size breaks without this */
-  grid-template-columns: 1fr;
-
-  /* * guess and check */
-  @media (min-width: 29rem) {
-    grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
-  }
-}
-
-.flight:empty {
-  display: none;
-}
-
-.ticket {
-  width: calc(100% - 2 * var(--kosciuszko));
-  height: calc(100% - 2 * var(--kosciuszko));
-  background-color: white;
-  border: 1px solid var(--neutral-300);
-  border-radius:  var(--card-radius);
-  padding: var(--kosciuszko);
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--neutral-700);
-    border-color: var(--neutral-600);
-  }
-
-  img {
-    width: 100%;
-    aspect-ratio: 16 / 9;
-  }
-
-  > a {
-    display: block;
-  }
-
-  .ticket__header,
-  .ticket__money,
-  .ticket__specs {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    align-items: baseline;
-    gap: var(--vinson);
-  }
-
-  .ticket__header,
-  .ticket__specs {
-    padding-inline: var(--vinson);
-  }
-}
-
-.tahoe-city .ticket {
-  border-color: var(--sand-400);
-
-  @media (prefers-color-scheme: dark) {
-    border-color: var(--neutral-700);
-  }
-}
-
-.south-tahoe .ticket {
-  background-color: var(--lake-200);
-  border: 1px solid var(--lake-300);
-  box-shadow: var(--penumbra);
-  color: var(--lake-600);
-
-  .book-now {
-    background-color: var(--neutral-100);
-    color: var(--lake-700);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--lake-700);
-    border-color: var(--lake-600);
-    color: var(--lake-200);
-
-    .book-now {
-      background-color: var(--lake-400);
-      color: var(--lake-700);
-      border-color: var(--lake-500);
-    }
-
-    a:not(.book-now) {
-      color: var(--lake-200);
-    }
-  }
-}

package/src/styles/color.css

@@ -25,16 +25,17 @@ body:has(#storybook-root) {
   #storybook-root {
     min-height: 100vh;
   }
+}
 
-  #storybook-root:has(.tahoe-city) {
-    background-color: var(--sand-100);
+/* * storybook body */
+.tahoe-city #storybook-root {
+  background-color: var(--sand-100);
 
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--lake-300);
-    }
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--lake-300);
   }
 }
-  
+
 body.tahoe-city {
   @media (prefers-color-scheme: dark) {
     background-color: var(--navy-300);
@@ -143,13 +144,42 @@ hr {
 
 
 .location {
+  transition: var(--slow);
   background-color: white;
+
+  @media (prefers-color-scheme: light) {
+    box-shadow: var(--penumbra);
+  }
   
   @media (prefers-color-scheme: dark) {
     background-color: var(--neutral-800);
   }
 }
 
+.location:hover {
+  background-color: var(--neutral-200);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-600);
+  }
+}
+
+.tahoe-city .location:hover {
+  background-color: var(--sand-300);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--lake-700);
+  }
+}
+
+.location:active {
+  background-color: var(--neutral-300);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-500);
+  }
+}
+
 /*------------------------------------*/
 /* #SPECS */
 /*------------------------------------*/

package/src/styles/lists.css

@@ -15,7 +15,7 @@ ol {
 
   li {
     display: block;
-    margin-block-end: var(--baseline);
+    margin-block-end: var(--vinson);
     padding-inline-start: 0;
     line-height: 1.5;
   }
@@ -175,7 +175,7 @@ ol {
 
     svg {
       transition: var(--fade);
-      margin-block: var(--baseline);
+      margin-block: var(--vinson);
       margin-inline: auto;
       min-width: var(--everest); /* guess and check */
 
@@ -216,6 +216,6 @@ ol {
   } */
 
   .time {
-    border-radius: var(--border-radius);
+    border-radius: var(--card-radius);
   }
 }

package/src/styles/purchase.css

@@ -0,0 +1,172 @@
+/*------------------------------------*/
+/* #PURCHASE */
+/*------------------------------------*/
+
+.bag {
+  margin-block-end: var(--aconcagua);
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
+
+  /* TODO: clamp */
+  gap: var(--kosciuszko);
+}
+
+/* * specific type of a card */
+.purchase {
+  padding: 0;
+  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;
+    width: 100%;
+
+    >* {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    .texture-slice {
+      width: calc(100% - var(--elbrus));
+      aspect-ratio: 16/9;
+      height: 100%;
+      align-self: center;
+      margin: calc(var(--elbrus) / 2);
+      border-radius: 0.25rem;
+      box-shadow: var(--penumbra);
+      border: 1px solid whitesmoke;
+      stroke: whitesmoke;
+
+      @media (prefers-color-scheme: dark) {
+        border-color: var(--neutral-100);
+        stroke: var(--neutral-100);
+      }
+    }
+
+    .cutout {
+      object-fit: contain;
+      place-self: center;
+      z-index: var(--understory);
+      grid-row: 1/1;
+      filter: drop-shadow(5px 5px 5px var(--neutral-700));
+      aspect-ratio: 16/9;
+      width: 100%;
+    }
+
+    svg {
+      z-index: var(--floor);
+      max-height: 100%;
+      /* overwrite the default */
+      margin: calc(var(--elbrus) / 2);
+      width: calc(100% - var(--elbrus));
+      stroke: whitesmoke;
+
+      @media (prefers-color-scheme: dark) {
+        stroke: var(--neutral-100);
+      }
+    }
+  }
+
+  .image-link {
+    transition: var(--fade);
+    transform: scale(1);
+    z-index: var(--floor);
+  }
+
+  .image-link:where(:hover, :focus) {
+    transform: scale(1.05);
+  }
+
+  .purchase__title {
+    font-size: var(--denali);
+    margin-inline: var(--kosciuszko);
+    line-height: 2.5;
+  }
+
+  hr,
+  p {
+    margin-inline: var(--kosciuszko);
+  }
+
+  /* img {
+    width: 100%;
+  } */
+
+  .purchase__details {
+    display: flex;
+    gap: var(--vinson);
+    width: calc(100% - var(--kilimanjaro));
+    margin-inline: var(--kosciuszko);
+    margin-block-end: var(--elbrus);
+    justify-content: space-between;
+
+    >* {
+      flex: 1 1;
+      margin: 0;
+    }
+
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: clamp(var(--vinson), 1.667vw, var(--denali));
+      font-weight: normal;
+      line-height: 3;
+    }
+
+    button {
+      line-height: 2;
+    }
+  }
+
+  .badges {
+    z-index: var(--floor);
+    justify-self: end;
+    align-self: start;
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--kosciuszko);
+    margin: var(--kosciuszko);
+  }
+
+  .badge {
+    padding: var(--kosciuszko);
+    border-radius: var(--card-radius);
+    background-color: var(--neutral-200);
+    border: 1px solid var(--neutral-100);
+    opacity: 0.9;
+
+    h5 {
+      margin: 0;
+      opacity: 1;
+      font-weight: normal;
+    }
+  }
+}
+
+/* * south-tahoe currently does not have a purchase */
+
+.bag:empty {
+  display: none;
+}
+
+.bag__more {
+  max-width: var(--pelican);
+  margin-inline: auto;
+  padding-inline: var(--kosciuszko);
+
+  button {
+    margin-block-start: var(--kilimanjaro);
+    margin-inline: auto;
+  }
+}

package/src/styles/ticket.css

@@ -0,0 +1,86 @@
+/*------------------------------------*/
+/* #TICKET */
+/*------------------------------------*/
+
+.flight {
+  margin-block-end: var(--aconcagua);
+
+  display: grid;
+
+  /* * iPhone size breaks without this */
+  grid-template-columns: 1fr;
+
+  /* * guess and check */
+  @media (min-width: 29rem) {
+    grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
+  }
+}
+
+.flight:empty {
+  display: none;
+}
+
+.ticket {
+  width: calc(100% - 2 * var(--kosciuszko));
+  height: calc(100% - 2 * var(--kosciuszko));
+
+  img {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+  }
+
+  > a {
+    display: block;
+  }
+
+  .ticket__header,
+  .ticket__money,
+  .ticket__specs {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--vinson);
+  }
+
+  .ticket__header,
+  .ticket__specs {
+    padding-inline: var(--vinson);
+  }
+}
+
+.tahoe-city .ticket {
+  border-color: var(--sand-400);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--neutral-700);
+  }
+}
+
+.south-tahoe .ticket {
+  background-color: var(--lake-200);
+  border: 1px solid var(--lake-300);
+  box-shadow: var(--penumbra);
+  color: var(--lake-600);
+
+  .book-now {
+    background-color: var(--neutral-100);
+    color: var(--lake-700);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--lake-700);
+    border-color: var(--lake-600);
+    color: var(--lake-200);
+
+    .book-now {
+      background-color: var(--lake-400);
+      color: var(--lake-700);
+      border-color: var(--lake-500);
+    }
+
+    a:not(.book-now) {
+      color: var(--lake-200);
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+export type PaddleCompareTypes = {
+  tours: {
+    id: number;
+    name: string;
+    slug: string;
+    sport: string;
+    duration?: string;
+    timeframe?: string;
+    start?: string;
+    finish?: string;
+    fitness?: string;
+    location: string;
+    excerpt: string;
+    minimum: number;
+    price: number;
+    peek?: string;
+  }[];
+  strapiBranchName: string;
+  peek_base: string;
+};

package/src/types/paddle-purchase-types.ts

@@ -7,10 +7,15 @@ export type PaddlePurchaseTypes = {
   excerpt: string;
   length: number;
   width: number;
-  inflatable: boolean;
   capacity: number;
+  
+  // badge variables
+  inflatable: boolean;
   demo: boolean;
   discount?: number;
+  
+  badges?: Record<string, boolean | number>;
+  
   cutout: PaddleGatsbyImageType;
 
   sport: {