@rileybathurst/paddle 1.0.15 → 1.1.0

package/package.json

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

package/src/PaddleComposition.tsx

@@ -1,30 +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) => {
+export 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"
-      />
-      <img
-        src={faker.image.urlPlaceholder()}
-        alt={faker.location.city()}
-        className="texture-2 img-wrapped"
+      <GatsbyImage
+        image={WaterTexture.localFile.childImageSharp.gatsbyImageData}
+        alt={WaterTexture.alternativeText || "Water Texture"}
+        className="img__wrapped texture-1"
       />
-      {/* <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 >
   )
-}
-
-export default PaddleComposition
+}

package/src/PaddleLocationCard.tsx

@@ -166,7 +166,7 @@ const PhoneContent = ({
         )
       )}
 
-      <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);
     }
   }
 

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);

package/src/styles/layout.css

@@ -364,7 +364,7 @@ header {
     min-height: var(--everest);
   }
 
-  > div {
+  .location_details {
     width: 100%;
   }
 
@@ -503,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;
+}