@rileybathurst/paddle 1.0.1 → 1.0.3

package/package.json

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

package/src/PaddleBrandList.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Link } from 'gatsby';
+
+// * additional work is done here to split kayak and paddleboard
+
+type BrandListTypes = {
+  nodes: {
+    id: string;
+    slug: string;
+    svg: string;
+    name: string;
+    retail: {
+      title: string;
+      slug: string;
+      sport: {
+        slug: string;
+      }
+    }[]
+  }[];
+  sport?: string;
+}
+
+const PaddleBrandList = ({ nodes, sport }: BrandListTypes) => {
+
+  const BrandSet = new Set();
+  
+  nodes.map((brand) => {
+    brand.retail.map((retail) => {
+      if (retail.sport.slug === sport) {
+        BrandSet.add(brand);
+      }
+    })
+  });
+
+  const BrandArray = (Array.from(BrandSet));
+
+// TODO: if I only want a specific sport 
+
+  return (
+    <ul className='brand_list'>
+      {BrandArray.map((brand: any) => (
+        <li key={brand.id}>
+          <Link to={`/retail/${sport}/${brand.slug}`}>
+            {brand.svg ?
+              <div
+                dangerouslySetInnerHTML={{ __html: brand.svg }}
+              />
+              : null}
+            {brand.name}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default PaddleBrandList

package/src/PaddleLocationDeck.tsx

@@ -1,19 +1,19 @@
 import * as React from "react"
 import { PaddleLocationCard } from "./PaddleLocationCard";
-import type { LocationCardTypes } from "./types/location-card-types";
+import type { PaddleLocationCardTypes } from "./types/location-card-types";
 
 interface LocationDeckTypes {
   background?: string;
   season_start?: string; // ? should this be optional? it created a problem with tours
   season_end?: string;
   phone?: string;
-  nodes: LocationCardTypes[];
+  nodes: PaddleLocationCardTypes[];
 }
 export function PaddleLocationDeck({ nodes, season_start, season_end, phone, background }: LocationDeckTypes) {
 
   return (
     <section className="location-deck">
-      {nodes.map((location: LocationCardTypes) => (
+      {nodes.map((location: PaddleLocationCardTypes) => (
         <PaddleLocationCard
           key={location.id}
           {...location}

package/src/PaddleTestimonial.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { TestimonialTypes } from "./types/testimonial-types"
+
+export function PaddleTestimonial({ id, testimonial, customer, sign, location }: TestimonialTypes) {
+  return (
+        <li key={id}>
+          <p className='elbrus'>
+            <span className='denali font-serif'>&ldquo;</span>
+            {testimonial}
+            <span className='denali font-serif'>&rdquo;</span>
+          </p>
+          <p>{sign} {customer}</p>
+          <p className='kosciuszko'>{location}</p>
+        </li>
+  )
+}

package/src/PaddleTestimonials.tsx

@@ -1,23 +1,15 @@
 import * as React from "react"
+import { PaddleTestimonial } from "./PaddleTestimonial"
+import { type TestimonialTypes } from "./types/testimonial-types"
 
 interface TestimonialsTypes {
-  nodes: {
-    id: string;
-    testimonial: string;
-    sign: string;
-    customer: string;
-    location: string;
-  }[];
+  nodes: TestimonialTypes[];
 }
 export function PaddleTestimonials({ nodes }: TestimonialsTypes) {
   return (
     <ul className='testimonials condor'>
       {nodes.map((testimonial) => (
-        <li key={testimonial.id}>
-          <p className='elbrus'><span className='denali font-serif'>&ldquo;</span>{testimonial.testimonial}<span className='denali font-serif'>&rdquo;</span></p>
-          <p>{testimonial.sign} {testimonial.customer}</p>
-          <p className='kosciuszko'>{testimonial.location}</p>
-        </li>
+        <PaddleTestimonial key={testimonial.id} {...testimonial} />
       ))}
     </ul>
   )

package/src/PaddleTicket.tsx

@@ -3,8 +3,9 @@ import { Link } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
 import type { PaddleTicketTypes } from "./types/ticket-types"
 import { PaddleTime } from "./PaddleTime"
+import { PaddleBookNow } from "./PaddleBookNow"
 
-export function PaddleTicket({ ogimage, slug, name, start, finish, duration, timeframe, fitness, excerpt, price, peek, peek_tours_fall_back, tour_page, allStrapiSunsetTourTime }: PaddleTicketTypes) {
+export function PaddleTicket({ ogimage, slug, name, start, finish, duration, timeframe, fitness, excerpt, price, peek, peek_tours_fall_back, tour_page, allStrapiSunsetTourTime, strapiLocaleName }: PaddleTicketTypes) {
 
   const time = PaddleTime({
     start: start,
@@ -16,7 +17,6 @@ export function PaddleTicket({ ogimage, slug, name, start, finish, duration, tim
     slug: slug
   });
 
-
   return (
     <section className="ticket">
       <Link to={`/${tour_page}/${slug}`}>
@@ -27,33 +27,33 @@ export function PaddleTicket({ ogimage, slug, name, start, finish, duration, tim
           className="card__image"
         />
       </Link>
-      <h4 className="card__title">
-        <Link to={`/${tour_page}/${slug}`}>
-          {name}
-        </Link>
-      </h4>
-
-      {/* // * heavy handed but once the backup is there we can work on this */}
-      {slug !== '2hour' && slug !== '3hour' ?
-        <div className="card__specs">
-          <h4>{time.entry}</h4>
-          {/* // TODO: I'd like a spec backup here */}
-          {fitness ? <h4 className="capitalize">{fitness} <span>Fitness</span></h4> : null}
+      <div className='ticket__header'>
+        <h4 className="card__title">
+          <Link to={`/${tour_page}/${slug}`}>
+            {name}
+          </Link>
+        </h4>
+        
+        <div className='ticket__money'>
+        <h5>${price}</h5>
+        <PaddleBookNow
+          peek_base={peek || peek_tours_fall_back}
+          strapiLocaleName={strapiLocaleName}
+        />
         </div>
-        : null}
-      <hr />
+      </div>
+
+      <div className="ticket__specs">
+        {/* // TODO: heavy handed but once the backup is there we can work on this */}
+        {/* // TODO: I'd like a spec backup here */}
+
+        {slug !== '2hour' && slug !== '3hour' ? (
+          <>
+            <h4>{time.entry}</h4>
+            {fitness ? <h4 className="capitalize">{fitness} <span>Fitness</span></h4> : null}
+          </>
+        ) : null }
       <p>{excerpt}</p>
-      <hr />
-      <div className="card__details">
-        <h5>${price}</h5>
-        <a
-          href={peek ? peek : peek_tours_fall_back}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="book-now"
-        >
-          BOOK NOW
-        </a>
       </div>
 
     </section>

package/src/index.tsx

@@ -12,12 +12,12 @@ export * from "./PaddleTicket";
 export * from "./PaddleSunsetTourTimes";
 export * from "./PaddleTopBar";
 export * from "./PaddleSpecs";
+export * from "./PaddleTestimonial";
 
 // Organisms
 export * from "./PaddleLocationDeck";
-
-// Test a function
 export * from "./PaddleTestimonials";
+export * from "./PaddleBrandList";
 
 // Templates
 
@@ -26,7 +26,6 @@ export * from "./PaddleTestimonials";
 // SEO
 export * from "./PaddleSEO";
 
-// TODO: test v.1.1
 // Types
 export * from "./types/ticket-types";
 export * from "./types/location-card-types";

package/src/styles/nav.css

@@ -2,6 +2,8 @@
 /* #NAV */
 /*------------------------------------*/
 
+/* TODO: variables */
+
 header {
   z-index: var(--floor);
   position: relative;

package/src/types/location-card-types.ts

@@ -1,4 +1,4 @@
-export interface LocationCardTypes {
+export interface PaddleLocationCardTypes {
   id: React.Key;
   svg: string;
   name: string;

package/src/types/testimonial-types.ts

@@ -0,0 +1,7 @@
+export type TestimonialTypes = {
+    id: string;
+    testimonial: string;
+    sign: string;
+    customer: string;
+    location: string;
+}

package/src/types/ticket-types.ts

@@ -28,4 +28,6 @@ export interface PaddleTicketTypes {
       endTime: string;
     }[];
   };
+
+  strapiLocaleName: string;
 }