@rileybathurst/paddle 1.2.0 → 1.2.2

package/package.json

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

package/src/PaddlePurchase.tsx

@@ -3,6 +3,7 @@ import { Link } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
 import type { GatsbyImageType } from "./types/gatsby-image-type";
 import { PaddleInchesRemainder } from "./PaddleInchesRemainder";
+import { PaddleTextureBackgrounds } from "./PaddleTextureBackgrounds";
 
 // TODO: I'm not sure if this is needed or I can loop it easier
 interface NameTypes {
@@ -54,26 +55,36 @@ type purchaseTypes = {
   demo: boolean;
   discount?: number;
   cutout: GatsbyImageType;
-  sport: {
-    slug: string;
-  };
-  brand: {
-    slug: string;
-  };
+  sportSlug: string;
+  brandSlug: string;
+  baseOne: { image: GatsbyImageType };
+  baseTwo: { image: GatsbyImageType };
+  baseThree: { image: GatsbyImageType };
+  topOne: { image: GatsbyImageType };
+  topTwo: { image: GatsbyImageType };
+  topThree: { image: GatsbyImageType };
 };
-export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflatable, capacity, demo, discount, cutout, sport, brand }: purchaseTypes) => {
+export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflatable, capacity, demo, discount, cutout, sportSlug, brandSlug, baseOne, baseTwo, baseThree, topOne, topTwo, topThree }: purchaseTypes) => {
 
   return (
     <article key={id} className="card">
       <div className="card-collage">
-        {/* <TextureBackgrounds /> */}
+
+        <PaddleTextureBackgrounds
+          baseOne={baseOne}
+          baseTwo={baseTwo}
+          baseThree={baseThree}
+          topOne={topOne}
+          topTwo={topTwo}
+          topThree={topThree}
+        />
         <Link
-          to={`/retail/${sport.slug}/${brand.slug}/${slug}`}
+          to={`/retail/${sportSlug}/${brandSlug}/${slug}`}
           className="image-link"
         >
           <GatsbyImage
-            image={cutout?.localFile?.childImageSharp?.gatsbyImageData}
-            alt={cutout?.alternativeText || `${title} by ${brand.slug}`}
+            image={cutout.localFile?.childImageSharp?.gatsbyImageData}
+            alt={cutout.alternativeText || `${title} by ${brandSlug}`}
             className="cutout"
             objectFit="contain"
           // TODO: this has been causing some problems but keep an eye on it
@@ -86,7 +97,7 @@ export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflat
         />
       </div>
       <h4 className="card__title">
-        <Link to={`/retail/${sport.slug}/${brand.slug}/${slug}`}>{title}</Link>
+        <Link to={`/retail/${sportSlug}/${brandSlug}/${slug}`}>{title}</Link>
       </h4>
       <hr />
       <p>{excerpt}</p>

package/src/PaddleTextureBackgrounds.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { GatsbyImage } from "gatsby-plugin-image";
+import type { GatsbyImageType } from "./types/gatsby-image-type";
+
+type textureTypes = {
+  baseOne: { image: GatsbyImageType };
+  baseTwo: { image: GatsbyImageType };
+  baseThree: { image: GatsbyImageType };
+  topOne: { image: GatsbyImageType };
+  topTwo: { image: GatsbyImageType };
+  topThree: { image: GatsbyImageType };
+};
+export const PaddleTextureBackgrounds = ({ baseOne, baseTwo, baseThree, topOne, topTwo, topThree }: textureTypes) => {
+
+  const baseTextures = [
+    baseOne,
+    baseTwo,
+    baseThree
+  ];
+  const baseRandom = Math.floor(Math.random() * baseTextures.length);
+  // console.log(baseTextures[baseRandom]);
+
+  const topTextures = [
+    topOne,
+    topTwo,
+    topThree
+  ];
+  const topRandom = Math.floor(Math.random() * topTextures.length);
+  // { topTextures[topRandom] }
+
+  return (
+    <>
+      <GatsbyImage
+        image={baseTextures[baseRandom].image.localFile.childImageSharp.gatsbyImageData}
+        alt="splash texture"
+        className="texture-slice"
+        objectFit="contain"
+      />
+      <GatsbyImage
+        image={topTextures[topRandom].image.localFile.childImageSharp.gatsbyImageData}
+        alt="sand texture"
+        className="texture-slice crop"
+        objectFit="contain"
+      />
+      <svg viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
+        <title>Diagonal line decoration</title>
+        <line
+          x1="0"
+          y1="630"
+          x2="1200"
+          y2="0"
+          // only color the stroke in css so it has dark mode
+          strokeWidth="3"
+        />
+      </svg>
+    </>
+  );
+};