@rileybathurst/paddle 0.0.103 → 0.0.105

package/package.json

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

package/src/PaddleLocationCard.tsx

@@ -1,10 +1,9 @@
-// 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";
 import HourMin from "./hour-min";
+import Phone from "./phone";
 
 interface SeasonTypes {
   season_start?: string;
@@ -23,11 +22,8 @@ function Season({ name, season_start, season_end, opening_time, closing_time }:
 
   if (season_start && season_end) {
     const currentDay = new Date();
-    console.log(`currentDay ${currentDay}`);
     const seasonStartDate = new Date(season_start);
-    console.log(`season_start ${season_start}`);
     const seasonEndDate = new Date(season_end);
-    console.log(`season_end ${season_end}`);
 
     if (currentDay > seasonStartDate || currentDay < seasonEndDate) {
       return (
@@ -78,7 +74,7 @@ interface ContentTypes {
   season_end?: string;
 
 }
-function Content({ svg, name, address, description, opening_time, closing_time, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end }: ContentTypes) {
+function Content({ svg, name, address, description, opening_time, closing_time, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end, phone }: ContentTypes) {
   return (
     <>
       <div
@@ -89,13 +85,18 @@ function Content({ svg, name, address, description, opening_time, closing_time,
       <div>
 
         {streetAddress || addressLocality || addressRegion || postalCode || commonName ? (
-          <address>
-            {commonName ? <span>{commonName}<br /></span> : null}
-            {streetAddress ? <span>{streetAddress}<br /></span> : null}
-            {addressLocality ? <span>{addressLocality}, </span> : null}
-            {addressRegion ? <span>{addressRegion} </span> : null}
-            {postalCode ? <span>{postalCode}<br /></span> : null}
-          </address>
+          <>
+            <h3 className="elbrus">{name}</h3>
+            <address>
+              {commonName ? <span>{commonName}<br /></span> : null}
+              {streetAddress ? <span>{streetAddress}<br /></span> : null}
+              {addressLocality ? <span>{addressLocality}, </span> : null}
+              {addressRegion ? <span>{addressRegion} </span> : null}
+              {postalCode ? <span>{postalCode}<br /></span> : null}
+            </address>
+
+            {name === "On Water Rental" ? <Phone phone={phone} /> : null}
+          </>
         ) :
 
           (<>
@@ -128,14 +129,7 @@ function Content({ svg, name, address, description, opening_time, closing_time,
   )
 }
 
-export function PaddleLocationCard({ svg, name, link, address, description, opening_time, closing_time, background, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end }: LocationCardTypes) {
-
-  Object.entries({ svg, name, link, address, description, opening_time, closing_time, background, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end }).map(([key, value]) => {
-    console.log(key, value);
-  }
-  );
-
-  console.log(`PaddleLocationCard season_start ${season_start}`);
+export function PaddleLocationCard({ svg, name, link, address, description, opening_time, closing_time, background, streetAddress, addressLocality, addressRegion, postalCode, commonName, season_start, season_end, phone }: LocationCardTypes) {
 
   if (link.includes('http')) {
     return (
@@ -161,6 +155,7 @@ export function PaddleLocationCard({ svg, name, link, address, description, open
 
           season_start={season_start}
           season_end={season_end}
+          phone={phone}
 
         />
       </a>
@@ -187,6 +182,8 @@ export function PaddleLocationCard({ svg, name, link, address, description, open
 
         season_start={season_start}
         season_end={season_end}
+        phone={phone}
+
       />
     </Link>
   )

package/src/PaddleLocationDeck.tsx

@@ -6,9 +6,10 @@ interface LocationDeckTypes {
   background?: string;
   season_start?: string;
   season_end?: string;
+  phone?: string;
   nodes: LocationCardTypes[];
 }
-export function PaddleLocationDeck({ nodes, season_start, season_end, background }: LocationDeckTypes) {
+export function PaddleLocationDeck({ nodes, season_start, season_end, phone, background }: LocationDeckTypes) {
 
   return (
     <section className="location-deck">
@@ -19,6 +20,7 @@ export function PaddleLocationDeck({ nodes, season_start, season_end, background
           background={background}
           season_start={season_start}
           season_end={season_end}
+          phone={phone}
         />
       ))}
     </section>

package/src/phone.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+
+interface FormatPhoneNumberTypes {
+  phoneNumberString: number;
+}
+function FormatPhoneNumber({ phoneNumberString }: FormatPhoneNumberTypes) {
+  const cleaned = `${phoneNumberString}`.replace(/\D/g, '');
+  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+  if (match) {
+    return `(${match[1]}) ${match[2]}-${match[3]}`;
+  }
+  return null;
+}
+
+type PhoneTypes = {
+  phone: number;
+}
+
+const Phone = ({ phone }: PhoneTypes) => {
+
+  return (
+    <a
+      href={`tel:${phone}`}
+      rel="norel norefferer"
+      className="button"
+    >
+      Phone: <FormatPhoneNumber phoneNumberString={phone} />
+    </a>
+  )
+}
+
+export default Phone

package/src/styles/cards.css

@@ -4,6 +4,9 @@
 
 .deck {
   margin-block-end: var(--aconcagua);
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
 }
 
 /* TODO: needs sub-grid */
@@ -77,6 +80,10 @@
     margin-inline: var(--kosciuszko);
   }
 
+  img {
+    max-width: 100%;
+  }
+
   .card__details {
     display: flex;
     gap: var(--vinson);

package/src/styles/typography.css

@@ -246,4 +246,8 @@ select {
 .react-markdown {
   white-space: pre-wrap;
   line-height: 1.5;
+
+  ul {
+    white-space: collapse;
+  }
 }

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

@@ -30,4 +30,5 @@ export interface LocationCardTypes {
 
   season_start?: string;
   season_end?: string;
+  phone?: string;
 }