@rileybathurst/paddle 1.1.3 → 1.2.0

package/package.json

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

package/src/PaddleInchesRemainder.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+
+type PaddleInchesRemainderTypes = {
+  inches: number;
+}
+export const PaddleInchesRemainder = ({ inches }: PaddleInchesRemainderTypes) => {
+
+  const feet = Math.floor(inches / 12);
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder
+  const leftover = inches % 12;
+
+  return (
+    <>
+      {feet}'&thinsp;{leftover !== 0 ? `${leftover}"` : null}
+    </>
+  )
+}

package/src/PaddlePurchase.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { Link } from "gatsby";
+import { GatsbyImage } from "gatsby-plugin-image";
+import type { GatsbyImageType } from "./types/gatsby-image-type";
+import { PaddleInchesRemainder } from "./PaddleInchesRemainder";
+
+// TODO: I'm not sure if this is needed or I can loop it easier
+interface NameTypes {
+  name: string;
+}
+function Name({ name }: NameTypes) {
+  return (
+    <div className="badge">
+      <h5 className="capitalize">{name}</h5>
+    </div>
+  );
+}
+
+interface BadgeTypes {
+  inflatable: boolean;
+  demo: boolean;
+  discount?: number;
+}
+const Badges = ({ inflatable, demo, discount }: BadgeTypes) => {
+  // TODO: deal with multiple
+  if (discount) {
+    return (
+      <div className="badge">
+        <h5 className="capitalize">{discount}% off</h5>
+      </div>
+    );
+  }
+
+  if (inflatable) {
+    return <Name name="inflatable" />;
+  }
+
+  if (demo) {
+    return <Name name="demo" />;
+  }
+
+  return null;
+}
+
+type purchaseTypes = {
+  id: string;
+  title: string;
+  slug: string;
+  excerpt: string;
+  length: number;
+  width: number;
+  inflatable: boolean;
+  capacity: number;
+  demo: boolean;
+  discount?: number;
+  cutout: GatsbyImageType;
+  sport: {
+    slug: string;
+  };
+  brand: {
+    slug: string;
+  };
+};
+export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflatable, capacity, demo, discount, cutout, sport, brand }: purchaseTypes) => {
+
+  return (
+    <article key={id} className="card">
+      <div className="card-collage">
+        {/* <TextureBackgrounds /> */}
+        <Link
+          to={`/retail/${sport.slug}/${brand.slug}/${slug}`}
+          className="image-link"
+        >
+          <GatsbyImage
+            image={cutout?.localFile?.childImageSharp?.gatsbyImageData}
+            alt={cutout?.alternativeText || `${title} by ${brand.slug}`}
+            className="cutout"
+            objectFit="contain"
+          // TODO: this has been causing some problems but keep an eye on it
+          />
+        </Link>
+        <Badges
+          inflatable={inflatable}
+          demo={demo}
+          discount={discount}
+        />
+      </div>
+      <h4 className="card__title">
+        <Link to={`/retail/${sport.slug}/${brand.slug}/${slug}`}>{title}</Link>
+      </h4>
+      <hr />
+      <p>{excerpt}</p>
+      <hr />
+      <div className="card__details">
+        <h4>
+          <PaddleInchesRemainder inches={length} />
+          long by {width}" wide
+        </h4>
+        <h5 className="capitalize">Capacity {capacity}&thinsp;lbs</h5>
+      </div>
+    </article>
+  )
+}

package/src/Purchase.tsx

@@ -1,11 +1,7 @@
 // Retail Card
 import React from "react";
-// import { GatsbyImage } from 'gatsby-plugin-image';
 import { faker } from "@faker-js/faker";
 import { Badges } from "./Badges";
-// import { Badges } from './Badges';
-// import { Remainder } from './Remainder';
-// import { useRetailContext } from '../context/RetailContext';
 import { TextureBackgrounds } from "./TextureBackgrounds";
 
 export const Purchase = () => {

package/src/index.tsx

@@ -13,6 +13,7 @@ export * from "./PaddleSunsetTourTimes";
 export * from "./PaddleTopBar";
 export * from "./PaddleSpecs";
 export * from "./PaddleTestimonial";
+export * from "./PaddlePurchase";
 
 // Organisms
 export * from "./PaddleLocationDeck";

package/src/styles/cards.css

@@ -30,12 +30,12 @@
   .purchase-collage {
     display: grid;
     width: 100%;
-  
+
     > * {
       grid-row: 1;
       grid-column: 1;
     }
-  
+
     .texture-slice {
       width: calc(100% - var(--elbrus));
       aspect-ratio: 16/9;
@@ -46,13 +46,13 @@
       box-shadow: var(--penumbra);
       border: 1px solid whitesmoke;
       stroke: whitesmoke;
-  
+
       @media (prefers-color-scheme: dark) {
         border-color: var(--black-metal);
         stroke: var(--black-metal);
       }
     }
-    
+
     .cutout {
       object-fit: contain;
       place-self: center;
@@ -63,14 +63,14 @@
       aspect-ratio: 16/9;
       width: 100%;
     }
-  
+
     svg {
       z-index: 1; /* TODO: variable */
       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(--black-metal);
       }
@@ -93,7 +93,8 @@
     line-height: var(--aconcagua);
   }
 
-  hr, p {
+  hr,
+  p {
     margin-inline: var(--kosciuszko);
   }
 
@@ -237,11 +238,11 @@
 .ticket {
   /* display: flex; */
   width: 100%;
-  background-color: var(--neutral-100);
-  border: 1px solid white;
+  background-color: var(--neutral-200);
+  border: 1px solid var(--neutral-300);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--neutral-800);
+    background-color: var(--neutral-700);
     border-color: var(--neutral-600);
   }
 
@@ -254,10 +255,6 @@
     display: block;
   }
 
-  p {
-    margin-inline: var(--vinson);
-  }
-
   .ticket__header,
   .ticket__money,
   .ticket__specs {
@@ -290,4 +287,4 @@
       color: var(--lake-200);
     }
   }
-}
+}

package/src/styles/layout.css

@@ -305,13 +305,11 @@ header {
   transition: var(--slow);
   display: flex;
   justify-content: center;
-  padding-block-start: 0.25rem;
   padding-block-start: clamp(0.25rem, 1.667vw, var(--kilimanjaro));
   z-index: var(--emergent); /* over the small menu when it slides up */
   position: relative;
 
   p {
-    margin-block-end: 0.25rem;
     margin-block-end: clamp(0.25rem, 1.667vw, var(--kilimanjaro));
   }
 }

package/src/styles/panels.css

@@ -31,9 +31,18 @@
   > *:last-child {
     margin-block-end: 0;
   }
+
+  .ticket {
+    background-color: var(--neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--neutral-800);
+    }
+  }
 }
 
-.aurora {
+.aurora,
+.react-aria-Breadcrumbs {
   background-color: white;
   box-shadow: 0 0 0 100vmax white;
   clip-path: inset(0 -100vmax);