@rileybathurst/paddle 0.0.34 → 0.0.37

package/README.md

@@ -1 +1 @@
-# Paddle UI
+# Paddle

package/package.json

@@ -1,22 +1,28 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "0.0.34",
+  "version": "0.0.37",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
+    "start": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "color-cards": "^1.0.14",
+    "gatsby": "^5.13.6",
+    "gatsby-plugin-image": "^3.13.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-aria-components": "^1.2.1",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.4",
+    "@faker-js/faker": "^8.4.1",
     "@storybook/addon-essentials": "^8.0.10",
     "@storybook/addon-interactions": "^8.0.10",
     "@storybook/addon-links": "^8.0.10",
@@ -42,5 +48,8 @@
   "main": "src/index.tsx",
   "module": "src/index.tsx",
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "files": [
+    "src/*"
+  ]
 }

package/src/App.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
-import './App.css'
 
 function App() {
   const [count, setCount] = useState(0)

package/src/Button.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+interface ButtonTypes {
+  peek_base: string
+  strapiLocaleName: string
+}
+export const Button = ({ peek_base, strapiLocaleName }: ButtonTypes) =>
+  <a
+    href={peek_base}
+    rel="noopener noreferrer"
+    className="book-now"
+    title={`Book now with ${strapiLocaleName} kayak and paddleboard`}
+  >
+    BOOK NOW
+  </a>

package/src/PaddleBookNow.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+interface BookNowTypes {
+  peek_base: string
+  strapiLocaleName: string
+}
+export const PaddleBookNow = ({ peek_base, strapiLocaleName }: BookNowTypes) =>
+  <a
+    href={peek_base}
+    rel="noopener noreferrer"
+    className="book-now"
+    title={`Book now with ${strapiLocaleName} kayak and paddleboard`}
+  >
+    BOOK NOW
+  </a>

package/src/PaddleComposition.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+// ! this isnt finished it wont have faker when its done
+import { faker } from '@faker-js/faker';
+// import { GatsbyImage } from "gatsby-plugin-image"
+
+// import WaterTexture from "../images/watertexture";
+// import Kayaker from "../images/kayaker";
+// import Supper from "../images/supper";
+// import { useStrapiTextures } from "../hooks/use-strapi-textures"
+
+/* // TODO: rename
+interface TopThreeTypes {
+  className: string;
+}
+function TopThree({ className }: TopThreeTypes) {
+
+  // const { query } = useStrapiTextures()
+  // console.log(query.baseone);
+
+  return <GatsbyImage
+      image={useStrapiTextures().topthree.image.localFile.childImageSharp.gatsbyImageData}
+      alt="deepwater texture"
+      className={`texture-slice crops ${props.className}`}
+      objectFit="contain"
+    />
+
+// ! Testing
+return null;
+} */
+
+
+interface CompositionTypes {
+  sport?: string;
+}
+const PaddleComposition = ({ sport }: CompositionTypes) => {
+  return (
+    <div className="composition">
+      {/* <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"
+      />
+      {/* <TopThree className="texture-2 img__wrapped" /> */}
+      {/* {sport === 'paddleboard' ? <Supper className="paddler" /> : <Kayaker className="paddler" />} */}
+      {faker.datatype.boolean() ? <>Supper</> : <>Kayaker</>}
+    </div >
+  )
+}
+
+export default PaddleComposition

package/src/PaddleLocationCard.tsx

@@ -0,0 +1,146 @@
+// TODO: Season is super broken
+
+import * as React from "react"
+import { Link } from 'gatsby';
+import Markdown from "react-markdown";
+import type { LocationCardTypes } from "./types/location-card-types";
+
+interface SeasonTypes {
+  season_start: string;
+  season_end: string;
+  opening_time: string;
+  closing_time: string;
+  name: string;
+}
+function Season({ season_start, season_end, opening_time, closing_time, name }: SeasonTypes) {
+
+  // TODO: these need a query but thats not the most important first step
+  if (name === "Free Parking Lot" || name === "Parking" || name === "Delivery") {
+    return null;
+  }
+
+  // console.log(opening_time);
+
+  /*   if (new Date(season_start) < new Date()) {
+      return (
+        <p>
+          {opening_time ? "Open Daily: " : null}
+          <HourMin time={opening_time} />
+          {opening_time ? " - : " : null}
+          <HourMin time={closing_time} />
+        </p>
+      )
+    } */
+
+  /*   return (
+      <p>
+        We&apos;re closed for the season:<br />
+        We will reopen<br />
+        {season_start} - {season_end}<br />
+        Weather Permitting
+      </p>
+    ) */
+  return (
+    <p>
+      {/* {opening_time ? "Open Daily: " : null} */}
+      Open Daily 9:30am - 5:30pm<br />
+      Weather Permitting
+      {/* <HourMin time={opening_time} /> */}
+      {/* {opening_time ? " - : " : null} */}
+      {/* <HourMin time={closing_time} /> */}
+    </p>
+  )
+}
+
+interface ContentTypes {
+  svg: string;
+  name: string;
+  address: {
+    data: {
+      address: string;
+    }
+  };
+  description: {
+    data: {
+      description: string;
+    }
+  };
+  opening_time: string;
+  closing_time: string;
+
+  locale: {
+    season_start: string;
+    season_end: string;
+  };
+}
+function Content({ svg, name, address, description, opening_time, closing_time, locale }: ContentTypes) {
+  return (
+    <>
+      <div
+        className="svg"
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+
+      <div>
+        <h3 className="elbrus">{name}</h3>
+        <Markdown className="react-markdown">
+          {address.data.address}
+        </Markdown>
+      </div>
+
+      <div>
+        <Season
+          season_start={locale.season_start}
+          season_end={locale.season_end}
+          opening_time={opening_time}
+          closing_time={closing_time}
+          name={name}
+        />
+        <br />
+        <Markdown className="react-markdown" >
+          {description.data.description}
+        </Markdown>
+        {/* // TODO: add phone but dont break the link on link rule {name === "On Water Rental" ? <Phone /> : null} */}
+      </div>
+    </>
+  )
+}
+
+export function PaddleLocationCard({ svg, name, link, address, description, opening_time, closing_time, locale, background }: LocationCardTypes) {
+  if (link.includes('http')) {
+    return (
+      <a href={link}
+        className={`location ${background}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        title={name}
+      >
+        <Content
+          svg={svg}
+          name={name}
+          address={address}
+          description={description}
+          opening_time={opening_time}
+          closing_time={closing_time}
+          locale={locale}
+        />
+      </a>
+    )
+  }
+  return (
+    <Link
+      to={`/${link}`}
+      className={`location ${background}`}
+    >
+      <Content
+        svg={svg}
+        name={name}
+        address={address}
+        description={description}
+        opening_time={opening_time}
+        closing_time={closing_time}
+        locale={locale}
+      />
+    </Link>
+  )
+}

package/src/PaddleLocationDeck.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { PaddleLocationCard } from "./PaddleLocationCard";
+import type { LocationCardTypes } from "./types/location-card-types";
+
+interface LocationDeckTypes {
+  background?: string;
+  nodes: LocationCardTypes[];
+}
+export function PaddleLocationDeck({ nodes, background }: LocationDeckTypes) {
+  return (
+    <section className="location-deck">
+      {nodes.map((location: LocationCardTypes) => (
+        <PaddleLocationCard
+          key={location.id}
+          {...location}
+          background={background}
+        />
+      ))}
+    </section>
+  )
+}

package/src/PaddleSocials.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import FacebookIcon from "./assets/facebook-icon"
+import InstagramIcon from "./assets/instagram-icon"
+import TripAdvisorIcon from "./assets/tripadvisor-icon"
+
+interface SocialsTypes {
+  instagram: string
+  facebook: string
+  tripadvisor: string
+}
+export const PaddleSocials = ({ instagram, facebook, tripadvisor }: SocialsTypes) =>
+  <div className="social">
+    {facebook ?
+      <a
+        href={facebook}
+        target='_blank' rel='noopener noreferrer'
+        aria-label='facebook link'
+      >
+        <FacebookIcon />
+      </a>
+      : null
+    }
+    {instagram ?
+      <a href={instagram}
+        target='_blank'
+        rel='noopener noreferrer'
+        aria-label='instagram link'
+      >
+        <InstagramIcon />
+      </a>
+      : null
+    }
+    {tripadvisor ?
+      <a href={tripadvisor}
+        target='_blank'
+        rel='noopener noreferrer'
+        aria-label='tripadvisor link'
+      >
+        <TripAdvisorIcon />
+      </a>
+      : null
+    }
+  </div>

package/src/PaddleTestimonials.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+interface TestimonialsTypes {
+  nodes: {
+    id: string;
+    testimonial: string;
+    sign: string;
+    customer: string;
+    location: string;
+  }[];
+}
+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>
+      ))}
+    </ul>
+  )
+}

package/src/PaddleTicket.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import { Link } from "gatsby"
+import { GatsbyImage } from "gatsby-plugin-image"
+import type { TicketTypes } from "./types/ticket-types"
+import { PaddleTime } from "./PaddleTime"
+
+export function PaddleTicket({ ogimage, slug, name, start, finish, duration, timeframe, fitness, excerpt, price, peek }: TicketTypes) {
+
+  const time = PaddleTime({
+    start: start,
+    finish: finish,
+    duration: duration,
+    timeframe: timeframe,
+  });
+
+  return (
+    <section className="ticket">
+      <Link to={`/tours/${slug}`}>
+        <GatsbyImage
+          image={ogimage?.localFile?.childImageSharp?.gatsbyImageData}
+          alt={`${ogimage?.alternativeText || name} image`}
+          objectFit="cover"
+          className="card__image"
+        />
+      </Link>
+      <h4 className="card__title">
+        <Link to={`/tours/${slug}`}>
+          {name}
+        </Link>
+      </h4>
+      <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>
+      <hr />
+      <p>{excerpt}</p>
+      <hr />
+      <div className="card__details">
+        <h5>${price}</h5>
+        <a
+          href={peek}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="book-now"
+        >
+          BOOK NOW
+        </a>
+      </div>
+
+    </section>
+  )
+}

package/src/PaddleTime.tsx

@@ -0,0 +1,75 @@
+// import * as React from "react"
+
+interface TimeTypes {
+  start?: string | null;
+  finish?: string | null;
+  duration?: number | null;
+  timeframe?: string | null;
+}
+export const PaddleTime = ({ start, finish, duration, timeframe }: TimeTypes) => {
+
+  // TODO: sunset is a whole thing
+
+  const hairSpace = String.fromCharCode(0x200A);
+
+  if (timeframe) {
+    return {
+      // key: timeframe, cant return key its a react special prop
+      // https://react.dev/warnings/special-props
+      entry: timeframe,
+      value: 'timeframe'
+    }
+  }
+
+  if (start && finish) {
+
+    const startHours = start.split(':')[0];
+    let startHoursInt: number = Number.parseInt(startHours);
+    const startMins = start.split(':')[1];
+    const startMinsInt: number = Number.parseInt(startMins);
+    const startAmpm = startHoursInt >= 12 ? 'pm' : 'am';
+
+    if (startHoursInt > 12) {
+      startHoursInt = startHoursInt - 12;
+    }
+
+    const finishHours = finish.split(':')[0];
+    let finishHoursInt: number = Number.parseInt(finishHours);
+    const finishMins = finish.split(':')[1];
+    const finishMinsInt: number = Number.parseInt(finishMins);
+    const finishAmpm = finishHoursInt >= 12 ? 'pm' : 'am';
+
+    if (finishHoursInt > 12) {
+      finishHoursInt = finishHoursInt - 12;
+    }
+
+    return {
+      entry: startHours === '12' ? 'noon' : `${startHoursInt}${startMinsInt > 0 ? `:${startMinsInt}${hairSpace}` : ''}${startAmpm}
+      -
+      ${finishHours === '12' ? 'noon' : `${finishHoursInt}${finishMinsInt > 0 ? `:${finishMinsInt}${hairSpace}` : ''}${hairSpace}${finishAmpm}`}`,
+      value: "time"
+    }
+  }
+
+  if (duration) {
+    if (duration > 90) {
+      const hours = Math.floor(duration / 60);
+      const mins = duration % 60;
+
+      return {
+        entry: `${hours}${hairSpace}hrs ${mins > 0 ? `${mins}${hairSpace}mins` : ''} `,
+        value: "duration"
+      }
+    }
+
+    return {
+      entry: `${duration}${hairSpace} mins`,
+      value: "duration"
+    }
+  }
+
+  return {
+    entry: null,
+    value: null
+  }
+}

package/src/Test.tsx

@@ -0,0 +1,3 @@
+import * as React from "react"
+
+export const Button = () => null

package/src/assets/facebook-icon.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+const FacebookIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1024 1024"
+      className="facebook"
+    >
+      <title>facebook page</title>
+      <g>
+        <path
+          className="circle"
+          d="M1024,512C1024,229.2,794.8,0,512,0S0,229.2,0,512c0,255.6,187.2,467.4,432,505.8V660H302V512h130V399.2
+		C432,270.9,508.4,200,625.4,200c56,0,114.6,10,114.6,10v126h-64.6c-63.6,0-83.4,39.5-83.4,80v96h142l-22.7,148H592v357.8
+		C836.8,979.4,1024,767.6,1024,512z"/>
+        <path
+          className="f"
+          d="M711.3,660L734,512H592v-96c0-40.5,19.8-80,83.4-80H740V210c0,0-58.6-10-114.6-10
+		c-117,0-193.4,70.9-193.4,199.2V512H302v148h130v357.8c26.1,4.1,52.8,6.2,80,6.2s53.9-2.1,80-6.2V660H711.3z"/>
+      </g>
+    </svg>
+  );
+};
+
+export default FacebookIcon;

package/src/assets/instagram-icon.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+// I got this from the instagram website rather than the brand book as that one was a mess
+const InstagramIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 80 81"
+      fill="url(#jsc_s_2)"
+      className="instagram"
+    >
+      <title>instagram logo</title>
+      <defs>
+        <linearGradient x1="69.27%" x2="128.20%" y1="129.46%" y2="29.46%" id="jsc_s_2">
+          <stop offset="0" stopColor="#FDD074" />
+          <stop offset="25%" stopColor="#F77F34" />
+          <stop offset="50%" stopColor="#DD326E" />
+          <stop offset="75%" stopColor="#D82B7E" />
+          <stop offset="100%" stopColor="#A432B1" />
+        </linearGradient>
+      </defs>
+      <path d="m43.655 0 5.21.025 3.4.055 2.74.095L56.49.24c4.26.195 7.165.87 9.71 1.86 2.63 1.025 4.86 2.39 7.085 4.615 2.225 2.225 3.595 4.46 4.615 7.09.88 2.26 1.51 4.81 1.775 8.34l.19 3.775.09 3.59.045 6.855-.03 12.835-.075 4.015-.135 3.3c-.195 4.26-.87 7.17-1.86 9.715-1.02 2.63-2.39 4.865-4.615 7.09-2.225 2.225-4.455 3.59-7.085 4.615-2.26.88-4.81 1.51-8.335 1.775l-4.3.205-3.78.085-6.13.035-12.835-.03-4.01-.075-3.3-.135c-4.26-.195-7.165-.87-9.71-1.86-2.63-1.025-4.865-2.39-7.085-4.615C4.49 71.095 3.12 68.86 2.1 66.23 1.22 63.97.59 61.42.325 57.89l-.15-2.86-.095-2.745-.055-3.395L0 42.545l.025-11.4.055-3.395.095-2.745.065-1.485c.195-4.26.87-7.17 1.86-9.715 1.02-2.63 2.39-4.865 4.615-7.09C8.935 4.49 11.17 3.125 13.8 2.1c2.26-.88 4.81-1.51 8.34-1.775l2.855-.15 2.74-.095 3.4-.055L36.345 0h7.31zm5.09 7.235h-17.49l-3.03.045-4.39.165a32.326 32.326 0 0 0-3.294.307l-.599.097a20.85 20.85 0 0 0-1.316.273l-.46.117c-.148.04-.29.08-.426.121l-.93.31-.4.15c-1.87.73-3.2 1.595-4.6 2.995-1.4 1.4-2.265 2.735-2.99 4.6l-.31.845-.136.432c-.362 1.201-.705 2.817-.874 5.133l-.09 1.7-.13 3.57-.065 6.18.015 14.255.08 4.41.13 3.25a31.47 31.47 0 0 0 .344 3.534l.098.57c.017.092.034.182.052.27l.108.511.113.474c.019.076.038.151.058.224l.117.424.12.393.06.185.31.845c.725 1.865 1.59 3.2 2.99 4.6 1.4 1.4 2.73 2.27 4.6 2.995l.845.305.378.121.2.06.423.118c.073.02.148.04.224.058l.473.113.51.108.55.102c1.044.18 2.296.32 3.822.39l4.875.175 6.515.055 14.115-.025 3.58-.07 3.245-.135c1.526-.07 2.778-.21 3.822-.39l.55-.102.51-.108.473-.113.224-.058.423-.118.393-.12.185-.061.845-.305c1.87-.725 3.2-1.595 4.6-2.995 1.4-1.4 2.265-2.735 2.995-4.6l.305-.845c.41-1.24.82-2.96 1.01-5.565l.19-4.245.08-4.285.02-6.18-.02-11.145-.08-4.285-.13-3.225a33.046 33.046 0 0 0-.262-2.977l-.093-.622c-.049-.3-.1-.582-.155-.85l-.112-.516a18.598 18.598 0 0 0-.116-.479l-.12-.442-.062-.209-.38-1.135-.075-.2c-.73-1.865-1.595-3.2-2.995-4.6-1.4-1.4-2.73-2.265-4.6-2.995l-.4-.15-.93-.31-.229-.066-.488-.13c-1.102-.279-2.505-.525-4.358-.659L54.21 7.36l-2.435-.08-3.03-.045z" />
+      <path d="M40 19.47c11.345 0 20.54 9.2 20.54 20.545 0 11.35-9.195 20.55-20.54 20.55-11.345 0-20.54-9.2-20.54-20.55C19.46 28.67 28.655 19.47 40 19.47zm0 7.21c-7.365 0-13.335 5.97-13.335 13.335 0 7.37 5.97 13.34 13.335 13.34 7.365 0 13.335-5.97 13.335-13.34 0-7.365-5.97-13.335-13.335-13.335zM66.15 18.65a4.801 4.801 0 1 1-9.598-.002 4.801 4.801 0 0 1 9.598.002z" />
+    </svg>
+  );
+};
+
+export default InstagramIcon;

package/src/assets/tripadvisor-icon.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+const TripadvisorIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 696.6 696.6"
+      className="tripadvisor"
+    >
+      <title>tripadvisor logo</title>
+      <circle cx="348.3" cy="348.3" r="348.3" />
+      <path d="M563.4,280.3l42-45.8h-93.2c-98.8-67.3-228.8-67.3-327.6,0h-93.4l42,45.8c-52.2,48-55.7,129.3-7.6,181.6,48,52.2,129.3,55.7,181.6,7.6l41.2,44.8,41.2-44.8c52.1,48.2,133.4,44.9,181.6-7.2,48.2-52.1,44.9-133.4-7.2-181.6-.2-.1-.3-.3-.5-.4ZM219.8,462.2c-48,0-87-39-87-87s39-87,87-87,87,39,87,87h0c0,48-39,87-87,87ZM348.3,372.8c0-57.2-41.6-106.3-96.5-127.3,61.8-25.7,131.2-25.7,193,0-54.8,21-96.5,70.1-96.5,127.3h0ZM476.8,462.2c-48,0-87-39-87-87s39-87,87-87,87,39,87,87h0c0,48-39,87-87,87ZM476.8,329.7c-25.2,0-45.6,20.4-45.6,45.6s20.4,45.6,45.6,45.6,45.6-20.4,45.6-45.6h0c0-25.2-20.4-45.6-45.6-45.6h0ZM265.4,375.2c0,25.2-20.4,45.6-45.5,45.6-25.2,0-45.6-20.4-45.6-45.5,0-25.2,20.4-45.6,45.5-45.6s45.6,20.4,45.6,45.5h0Z" />
+    </svg>
+  );
+};
+
+export default TripadvisorIcon;

package/src/index.tsx

@@ -1 +1,31 @@
-export * from "./test";
+// eslint-disable-next-line react-refresh/only-export-components
+
+// TODO: these dont work
+// Fragments
+// export * from "./testimonial-fragment";
+
+// Atoms
+export * from "./PaddleBookNow";
+export * from "./PaddleTime";
+
+// Molecules
+export * from "./PaddleComposition";
+export * from "./PaddleSocials";
+export * from "./PaddleLocationCard";
+export * from "./PaddleTestimonials";
+export * from "./PaddleTicket";
+
+// Organisms
+export * from "./PaddleLocationDeck";
+
+// Test a function
+export * from "./PaddleTestimonials";
+
+// Templates
+
+// Pages
+
+// TODO: test
+// Types
+export * from "./types/ticket-types";
+export * from "./types/location-card-types";

package/src/stories/BookNow.stories.tsx

@@ -0,0 +1,19 @@
+// this is the Name.stories.tsx file
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { BookNow } from './BookNow';
+
+const meta = {
+  component: BookNow,
+  title: 'Atoms/BookNow',
+  args: { onClick: fn() },
+} satisfies Meta<typeof BookNow>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/stories/BookNow.tsx

@@ -0,0 +1,29 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+interface BookNowProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const BookNow = ({
+  primary = false,
+  ...props
+}: BookNowProps) => {
+
+  return (
+    <main
+      {...props}
+    >
+      <a
+        href={faker.location.city()}
+        rel="noopener noreferrer"
+        className="book-now"
+        title={`Book now with ${faker.location.city()} kayak and paddleboard`}
+      >
+        BOOK NOW
+      </a>
+    </main>
+  );
+};