@rileybathurst/paddle 0.0.82 → 0.0.84

package/package.json

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

package/src/PaddleSpecs.tsx

@@ -0,0 +1,75 @@
+import * as React from "react"
+import PaddleRemainder from "./paddle-remainder.tsx"
+
+interface SpecsTypes {
+  [key: string]: string | number | {
+    [key: string]: string | number[];
+  };
+}
+// * moving the section tag to the parent component means you can loop yourself
+const PaddleSpecs = (specs: SpecsTypes) => {
+  return (
+    // <section className='specs'>
+    Object.entries(specs).map(([key, value]) => {
+
+      // console.log(key, value);
+
+      if (!value) {
+        return null;
+      }
+
+      /* I didnt know you could call yourself like this */
+      /* I guess its not a infinite loop as its not calling an object */
+      if (key === 'weight' && typeof value === 'object') {
+        return (
+          <PaddleSpecs {...value} />
+        );
+      }
+
+      if (key === 'cost' && typeof value === 'object' && value.discount) {
+
+        const amount = Number(value.price) - (Number(value.discount) * (Number(value.price) / 100)) as number;
+
+        return (
+          <>
+            {/* // TODO: add color */}
+            <div className="spec">
+              <h2><del>Original Price</del></h2>
+              <h3>
+                <del>
+                  ${value.price}
+                </del>
+              </h3>
+            </div>
+            <div className="spec mullen">
+              <h2>Sale Price</h2>
+              {value.discount}% off
+              <h3>${amount}</h3>
+            </div>
+          </>
+        );
+      }
+
+      if (typeof value === 'object') {
+        return (
+          <PaddleSpecs {...value} />
+        );
+      }
+
+      return (
+        <div key={key} className="spec">
+          <h2>{key}</h2>
+          <h3>
+            {key === 'price' ? <span className="spec__unit">$</span> : null}
+            {key === 'length' && typeof value === 'number' ? <PaddleRemainder inches={value} /> : value}
+            {key === 'hullweight' || key === 'riggedweight' ? <span className="spec__unit">lbs</span> : null}
+            {key === 'width' || key === 'length' || key === 'capacity' ? <span className="spec__unit">"</span> : null}
+          </h3>
+        </div>
+      )
+    })
+    // </section>
+  )
+}
+
+export default PaddleSpecs;

package/src/index.tsx

@@ -7,6 +7,7 @@
 // Atoms
 export * from "./PaddleBookNow";
 export * from "./PaddleTime";
+export * from "./paddle-remainder";
 
 // Molecules
 export * from "./PaddleComposition";
@@ -16,6 +17,7 @@ export * from "./PaddleTestimonials";
 export * from "./PaddleTicket";
 export * from "./PaddleSunsetTourTimes";
 export * from "./PaddleTopBar";
+export * from "./PaddleSpecs";
 
 // Organisms
 export * from "./PaddleLocationDeck";

package/src/paddle-remainder.tsx

@@ -0,0 +1,20 @@
+// name this better
+import * as React from "react"
+
+type PaddleRemainderTypes = {
+  inches: number;
+}
+const PaddleRemainder = ({ inches }: PaddleRemainderTypes) => {
+
+  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}
+    </>
+  )
+}
+
+export default PaddleRemainder

package/src/styles/layout.css

@@ -103,7 +103,7 @@ footer > * {
 /* this isnt a direct nested its always down another layer */
 .albatross .pelican,
 /* ! deck * needs to be removed its maybe only the image that needs it */
-.deck *:not(p, hr) {
+.deck > *:not(h4, p, hr) {
   /* ? margin-inline: 0; ? should this be centered */
   /* TODO: this needs a :not for a few things */
   width: 100%; /* resets the padding */

package/src/styles/lists.css

@@ -203,3 +203,30 @@ ol {
     }
   }
 }
+
+/*------------------------------------*/
+/* #PADDLE SUNSET TOUR TIMES */
+/*------------------------------------*/
+
+.paddle-sunset-tour-times div {
+  border-block-start: 1px solid;
+  padding-block-start: var(--vinson);
+}
+
+.date-time {
+  display: flex;
+  flex-flow: column;
+  gap: 0.5rem;
+  justify-items: center;
+  text-align: center;
+
+  .date {
+    width: max-content;
+  }
+
+  .time {
+    padding: 0.5rem;
+    border-radius: var(--border-radius);
+    width: max-content;
+  }
+}