@rileybathurst/paddle 1.0.14 → 1.0.16

package/package.json

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

package/src/PaddleComposition.tsx

@@ -1,28 +1,62 @@
-// TODO: this isnt finished but hasnt been implemented yet
+// * dont call this directly go through composition locally then a single query here
+
 import * as React from "react"
-import { faker } from '@faker-js/faker';
+import { GatsbyImage } from "gatsby-plugin-image"
+import type { GatsbyImageType } from "./types/gatsby-image-type"
+
+type defaultPaddlerTypes = {
+  sport?: string;
+  defaultKayaker: GatsbyImageType;
+  defaultPaddleboarder: GatsbyImageType;
+}
+
+const DefaultPaddler = ({ sport, defaultKayaker, defaultPaddleboarder }: defaultPaddlerTypes) => {
+  if (sport === "sup") {
+    return (
+      <GatsbyImage
+        image={defaultPaddleboarder.localFile.childImageSharp.gatsbyImageData}
+        alt={defaultPaddleboarder.alternativeText || "Paddleboarder"}
+        className="img__wrapped paddler"
+      />
+    )
+  }
+  return (
+    <GatsbyImage
+      image={defaultKayaker.localFile.childImageSharp.gatsbyImageData}
+      alt={defaultKayaker.alternativeText || "Kayaker"}
+      className="img__wrapped paddler"
+    />
+  )
+}
 
 interface CompositionTypes {
   sport?: string;
+  image?: GatsbyImageType;
+  defaultKayaker: GatsbyImageType;
+  defaultPaddleboarder: GatsbyImageType;
+  WaterTexture: GatsbyImageType;
 }
-const PaddleComposition = ({ sport }: CompositionTypes) => {
+const PaddleComposition = ({ sport, image, defaultKayaker, defaultPaddleboarder, WaterTexture }: CompositionTypes) => {
   return (
     <div className="composition">
-      {sport}
-      {/* <WaterTexture className="texture-1" /> */}
-      <img
-        src={faker.image.urlPlaceholder()}
-        alt={faker.location.city()}
-        className="texture-1"
+      <GatsbyImage
+        image={WaterTexture.localFile.childImageSharp.gatsbyImageData}
+        alt={WaterTexture.alternativeText || "Water Texture"}
+        className="img__wrapped texture-1"
       />
-      <img
-        src={faker.image.urlPlaceholder()}
-        alt={faker.location.city()}
-        className="texture-2 img-wrapped"
-      />
-      {/* <TopThree className="texture-2 img__wrapped" /> */}
-      {/* {sport === 'paddleboard' ? <Supper className="paddler" /> : <Kayaker className="paddler" />} */}
-      {faker.datatype.boolean() ? <>Supper</> : <>Kayaker</>}
+
+      {image ?
+        <GatsbyImage
+          image={image.localFile.childImageSharp.gatsbyImageData}
+          alt={image.alternativeText || "Composition Image"}
+          className="img__wrapped paddler"
+        />
+        : <DefaultPaddler
+          sport={sport}
+          defaultKayaker={defaultKayaker}
+          defaultPaddleboarder={defaultPaddleboarder}
+        />
+      }
     </div >
   )
 }

package/src/PaddleLocationCard.tsx

@@ -151,22 +151,22 @@ const PhoneContent = ({
       {link?.includes("http") ? (
         <a
           href={link}
-          className="location"
+          className="svg"
           target="_blank"
           rel="noopener noreferrer"
           title={name}
         >
-          <div className="svg" dangerouslySetInnerHTML={{ __html: svg }} />
+          <div dangerouslySetInnerHTML={{ __html: svg }} />
         </a>
       ) : (
         link && (
-          <Link to={link} className="location">
-            <div className="svg" dangerouslySetInnerHTML={{ __html: svg }} />
+          <Link to={link} className="svg">
+            <div dangerouslySetInnerHTML={{ __html: svg }} />
           </Link>
         )
       )}
 
-      <div>
+      <div className="location_details">
         <div className="multi_button">
           {link?.includes("http") ? (
             <a
@@ -265,9 +265,9 @@ const Content = ({
     <>
       <div className="svg" dangerouslySetInnerHTML={{ __html: svg }} />
 
-      <div>
+      <div className="location_details">
         <div className="multi_button">
-          <h3 className="elbrus">{name}</h3>
+          <h3>{name}</h3>
         </div>
 
         {streetAddress ||

package/src/index.tsx

@@ -29,4 +29,5 @@ export * from "./PaddleSEO";
 
 // Types
 export * from "./types/ticket-types";
-export * from "./types/location-card-types";
+export * from "./types/location-card-types";
+export * from "./types/gatsby-image-type";

package/src/styles/a11y.css

@@ -7,4 +7,6 @@
   height: 0;
   overflow: hidden;
   display: block;
+  margin: 0;
+  padding: 0;
 }

package/src/styles/buttons.css

@@ -105,7 +105,7 @@ button:active {
     @media (prefers-color-scheme: light) {
       background-color: var(--sand-200);
       border-color: var(--sand-100);
-      color: var(--neutral-600);
+      color: var(--tanager-100);
     }
   }
 
@@ -115,7 +115,7 @@ button:active {
     @media (prefers-color-scheme: light) {
       background-color: var(--sand-300);
       border-color: var(--sand-200);
-      color: var(--neutral-700);
+      color: var(--tanager-200);
     }
   }
 
@@ -125,7 +125,7 @@ button:active {
     @media (prefers-color-scheme: light) {
       background-color: var(--sand-400);
       border-color: var(--sand-300);
-      color: var(--neutral-800);
+      color: var(--tanager-300);
     }
   }
 
@@ -233,6 +233,13 @@ menu button {
   justify-content: center;
 }
 
+.location_multi-link {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--denali);
+  width: 100%;
+}
+
 /*------------------------------------*/
 
 footer .book-now {

package/src/styles/color.css

@@ -55,6 +55,16 @@ body .south-tahoe {
   }
 }
 
+@media (prefers-color-scheme: light) {
+  .tahoe-city .top-bar {
+    background-color: var(--sand-100);
+    box-shadow: 0 0 0 100vmax var(--sand-100);
+    /* color: var(--sand-400); */
+  }
+
+  /* * dark back to clean theme */
+}
+
 .south-tahoe {
   .top-bar {
     background-color: var(--lake-100);
@@ -83,6 +93,15 @@ body .south-tahoe {
 /* #SPECS */
 /*------------------------------------*/
 
-.specs h2, .specs .spec__unit {
+.specs h2,
+.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/layout.css

@@ -339,16 +339,24 @@ header {
   margin-block-end: var(--kilimanjaro);
 }
 
+.location:not(:last-child) {
+  border-block-end: 1px solid var(--neutral-400);
+  margin-block-end: var(--kosciuszko);
+}
+
 .location {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row;
   align-items: center;
   gap: clamp(var(--kosciuszko), 1.67vw, var(--elbrus));
   border-radius: var(--card-radius);
 
-  > a {
-    display: flex;
-  }
+  /* TODO: this is breaking with a phone and pushing too much location */
+  /* > * {
+    flex: 3rem 1;
+    width: 100%;
+    height: fit-content;
+  } */
 
   > svg,
   .svg {
@@ -356,6 +364,10 @@ header {
     min-height: var(--everest);
   }
 
+  .location_details {
+    width: 100%;
+  }
+
   /* p {
     margin-block-end: 0; reset to the gap
   } */
@@ -365,6 +377,8 @@ header {
   }
 }
 
+.location:not(:last-child)
+
 /*------------------*/
 /* #COMPOSITION */
 /*------------------*/
@@ -489,3 +503,19 @@ header {
 .spec:last-child {
   border-bottom: none;
 }
+
+/*------------------------------------*/
+
+.equipment {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+
+  .equipment-images {
+    max-width: 100%;
+    object-fit: cover;
+    margin-inline: auto;
+  }
+}

package/src/styles/variables.css

@@ -7,11 +7,6 @@
   /* #COLOR */
   /*------------------------------------*/
 
-  --sand-100: hsl(25, 37%, 95%);
-  --sand-150: hsl(25, 37%, 92.5%);
-  --sand-200: hsl(25, 37%, 87.5%);
-  --sand-300: hsl(25, 37%, 75%);
-
   --navy-100: oklch(50% 0.09 230); /* base */
   --navy-200: oklch(37.5% 0.07 230);
   --navy-300: oklch(25% 0.04 230);

package/src/styles/visibility.css

@@ -1,12 +1,6 @@
 /*------------------*/
 /* #VISIBILITY */
 /*------------------*/
-.sr-only {
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  display: block;
-}
 
 .pricing-chart__false {
   display: none;

package/src/types/gatsby-image-type.ts

@@ -0,0 +1,10 @@
+import type { IGatsbyImageData } from "gatsby-plugin-image";
+
+export interface GatsbyImageType {
+  localFile: {
+    childImageSharp: {
+      gatsbyImageData: IGatsbyImageData;
+    };
+  };
+  alternativeText: string;
+}