@rileybathurst/paddle 0.0.78 → 0.0.80

package/package.json

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

package/src/PaddleTopBar.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import Markdown from 'react-markdown';
+
+// TODO this would be nice to be able to close but I dont have it right yet
+
+type PaddleTopBarTypes = {
+  strapiLocale: {
+    topbar: {
+      data: {
+        topbar: string;
+      }
+    }
+  };
+  allStrapiWeatherDay: {
+    nodes: {
+      startDate: string;
+      startTime: string;
+      endDate: string;
+      endTime: string;
+      closed: boolean;
+      condition: {
+        excerpt: string;
+      }
+    }[];
+  };
+}
+export const PaddleTopBar = ({ strapiLocale, allStrapiWeatherDay }: PaddleTopBarTypes) => {
+
+  let currentWeather = '';
+  let currentStatus = false;
+  const currentDate = new Date().toISOString().split('T')[0];
+
+  allStrapiWeatherDay.nodes.map((date) => {
+    if (date.startDate === currentDate || currentDate >= date.startDate && currentDate <= date.endDate) {
+      currentWeather = date.condition.excerpt;
+      currentStatus = date.closed;
+    }
+  });
+
+  return (
+    <div className={`top-bar ${currentStatus ? 'closed' : 'open'}`} >
+      {currentWeather ? <p>{currentWeather}</p> :
+        <Markdown>
+          {strapiLocale.topbar.data.topbar}
+        </Markdown>
+      }
+    </div>
+  )
+}

package/src/index.tsx

@@ -15,6 +15,7 @@ export * from "./PaddleLocationCard";
 export * from "./PaddleTestimonials";
 export * from "./PaddleTicket";
 export * from "./PaddleSunsetTourTimes";
+export * from "./PaddleTopBar";
 
 // Organisms
 export * from "./PaddleLocationDeck";

package/src/styles/layout.css

@@ -182,11 +182,8 @@ header {
 /* #TOP BAR */
 /*------------------*/
 
-/* this flashes in on every load which is bad but its currently out of use */
 .top-bar {
   transition: var(--slow);
-  height: 0;
-  opacity: 0;
   display: flex;
   justify-content: center;
   padding-block-start: 0.25rem;
@@ -198,6 +195,11 @@ header {
   }
 }
 
+.top-bar.hidden {
+  height: 0;
+  opacity: 0;
+}
+
 /*------------------------------------*/
 /* #SOCIAL */
 /*------------------------------------*/