🚵🏻‍♀️🌓 ↝ Wrong Geebleryarn dev [ SGV2-6 ]

Signal-K · Mar 12, 2024 · a3a30a0 · a3a30a0
1 parent 3dbcf7f
commit a3a30a0
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 63 deletions.
diff --git a/components/Section/Layout.tsx b/components/Section/Layout.tsx
@@ -28,7 +28,7 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
           <main className="h-max pb-10 grow pt-6">
             <Navbar />
             <div className="py-12">
-              {children}
+            {children}
             </div>
           </main>
         )}

diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.48.2",
     "react-icons": "^5.0.1",
+    "react-responsive": "^9.0.2",
     "react-spinners": "^0.13.8",
     "styled-components": "^6.1.8",
     "tailwind-merge": "^2.0.0",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,6 +2,7 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import React, { useEffect, useState } from "react";
 import Layout, { LayoutNoNav } from "../components/Section/Layout";
 import { useRouter } from "next/router";
+import { useMediaQuery } from 'react-responsive';
 
 import { Metadata } from "next";
 
@@ -45,68 +46,127 @@ export function PublicLanding() {
     setShowFeedOverlay(true);
   };
 
+  const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
+  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
+
   if (session) {
     return (
       <LayoutNoNav>
-        <Navigation />
-        <div className="flex-col justify-center">
-          <style jsx global>
-            {`
-                  body {
-                    background: url('https://cdn.cloud.scenario.com/assets/BSXy5zJiRPOpGcXtRag4iw?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9CU1h5NXpKaVJQT3BHY1h0UmFnNGl3P3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcxMTA2NTU5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=UDVMN9uYrYFPsb797q2-gwxWdVAxesYZ2ReYqaoOiv37SGTJZ24JEIDzBfK-gU0TtWx8-r3a75eiBaoIdC~KImfEOQD8wEhGrFCy9ZyvEwtltfFUUFHX46bkXgc61V~8FN7Qgowa143JQW5uEmVaUc1BYw7m1Ys6Xh1ad8DzY2tWEQ3Su6VJxzdOmfsTfA8f8drHxGPi5xn6sUuGzDLwDastQD942B7~2I405eqZ~iesFG-OeyrxCGXkeDgTV5DEusipkh69NXLH3Cai11pWUS2e3Md5pbLGq-Ax5ZOUoJeyVpxpNMYX6k5KAwo22bgmoeONKBpROJIdv7dojPpVBA__') center/cover;
-                  }
-                  
-                  @media only screen and (max-width: 767px) {
-                    .planet-heading {
-                      color: white;
-                      font-size: 24px;
-                      text-align: center;
-                      margin-bottom: 10px;
-                    }
-                  }
-                `}
-          </style>
-          <div className="absolute inset-0 grid grid-cols-3 grid-rows-3 gap-4 p-40 my-12">
-            <button
-              onClick={handleOpenFeedOverlay}
-              className="mt-4 px-4 py-2text-white rounded -mb-20"
-            >
-              <a
-                href="#_"
-                className="inline-flex overflow-hidden text-white bg-gray-900 rounded group"
-              >
-                <span className="px-3.5 py-2 text-white bg-purple-500 group-hover:bg-purple-600 flex items-center justify-center">
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-                    ></path>
-                  </svg>
-                </span>
-                <span className="pl-4 pr-5 py-2.5">Menu</span>
-              </a>
-            </button>
-          </div>
-          <div className="mt-20">
-            {showFeedOverlay && (
-              <>
-                <div className="mt-20">
-                  <FeedOverlay onClose={() => setShowFeedOverlay(false)} />
-                </div>
-              </>
-            )}
-          </div>
-        </div>
+         <Navigation />
+         <div className="flex-col justify-center mt-10">
+           <style jsx global>
+             {`
+               body {
+                 background: url('https://cdn.cloud.scenario.com/assets/Js2W4fMaSpKGSlVJ-tJEGQ?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9KczJXNGZNYVNwS0dTbFZKLXRKRUdRP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcxMTA2NTU5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=NnOW-bDa-nTqj52gMD9J6p-hsJgQI-naOWJlmenVNg1h3pIoHfbMGw6AZb7Nre2KDIrf~VT9n-ONDY988JWJ1qkQwr4-dr9AL~2iwR6ozPB1AgqSyVTaVCiQtMUBrPgrThLAtJI1Bf-JnbZrGKxUfFyAAAM-84OVd~noSyqF82X-katF5gXn3WMHMNnyc19QxinqfN4n~F73v1hSh6wXmWHdmnMKI44jXunPC2DzAHHyKAGTVLM2~uCA9Nyy6ao556FNr0BzIZB2SsTrEFSsY8TmfZDpZoNcN0GM~Vztsucf~0Uwk0hmwtgNofiLP631fsjuVKnLNCwc~c0K6ucV6Q__') center/cover;
+               }
+               
+               @media only screen and (max-width: 767px) {
+                 .planet-heading {
+                   color: white;
+                   font-size: 24px;
+                   text-align: center;
+                   margin-bottom: 10px;
+                 }
+               }
+             `}
+           </style>
+           <style jsx global>
+{`
+ .chat {
+    margin-top: 40px; /* Adjust this value to move the chat bubbles down */
+ }
+
+ .chat-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* This centers the chat bubbles horizontally */
+    justify-content: center; /* This centers the chat bubbles vertically */
+ }
+
+ /* Additional styles for responsiveness or other adjustments */
+ @media only screen and (max-width: 767px) {
+    .chat {
+      margin-top: 20px; /* Adjust for smaller screens if necessary */
+    }
+ }
+`}
+</style>
+
+           <div className="image-container mx-3 absolute top-0 left-1/2 transform -translate-x-1/2 mt-10 mb-10">
+             <div className="flex justify-center items-center flex-row mt-20">
+               {isDesktopOrLaptop && (
+                 <>
+                   <img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/TOI%20700.png" alt="Planet 1" className="responsive-image h-12 w-12 mx-10" />
+                   <img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/Group%201000002854.png" alt="Planet 2" className="responsive-image h-12 w-12" />
+                 </>
+               )}
+               {isTabletOrMobile && (
+                 <>
+                   <img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/TOI%20700.png" alt="Planet 1" className="responsive-image h-12 w-12 mx-10" />
+                   <img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/Group%201000002854.png" alt="Planet 2" className="responsive-image h-12 w-12" />
+                 </>
+               )}
+             </div>
+           </div>
+           <div className="chat-container">
+           <div className="mx-20 mt-20">
+           <div className="chat chat-start mt-20 justify-left mt-20">
+  <div className="chat-bubble">You need to pick a planet!</div>
+</div>
+<div className="chat chat-end">
+  <div className="chat-bubble">You've got 5 new deposits to explore</div>
+</div>
+<div className="chat chat-start">
+  <div className="chat-bubble">A dust storm is brewing on your home planet, <br /> time to investigate.</div>
+</div></div>
+           </div>
+           <div className="absolute inset-0 grid grid-cols-3 grid-rows-3 gap-4 p-40 my-12">
+             {/* Content here */}
+           </div>
+           <div className="mt-20">
+             {showFeedOverlay && (
+               <>
+                 <div className="mt-20">
+                   <FeedOverlay onClose={() => setShowFeedOverlay(false)} />
+                 </div>
+               </>
+             )}
+           </div>
+         </div>
+         {/* Menu Button */}
+         {!showFeedOverlay && (
+           <button
+             onClick={handleOpenFeedOverlay}
+             className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded"
+           >
+             <a
+               href="#_"
+               className="inline-flex overflow-hidden text-white bg-gray-900 rounded group"
+             >
+               <span className="px-3.5 py-2 text-white bg-purple-500 group-hover:bg-purple-600 flex items-center justify-center">
+                 <svg
+                   className="w-5 h-5"
+                   fill="none"
+                   stroke="currentColor"
+                   viewBox="0 0 24 24"
+                   xmlns="http://www.w3.org/2000/svg"
+                 >
+                   <path
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                     stroke-width="2"
+                     d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+                   ></path>
+                 </svg>
+               </span>
+               <span className="pl-4 pr-5 py-2.5">Menu</span>
+             </a>
+           </button>
+         )}
       </LayoutNoNav>
-    );
+     );
+
+
   };
 
   return (

diff --git a/pages/planets/[id].tsx b/pages/planets/[id].tsx
@@ -46,7 +46,7 @@ export default function PlanetIdPage () {
     }, []);
 
     if (!id) {
-        return null;
+        return null; 
     };
 
     return (

diff --git a/pages/planets/map.tsx b/pages/planets/map.tsx
@@ -6,7 +6,7 @@ import Layout, { LayoutNoNav } from "../../components/Section/Layout";
 export default function GardenPage() {
     return (
         <LayoutNoNav>
-            <Garden />
+            {/* <Garden /> */}I think I can
         </LayoutNoNav>
     )
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -82,5 +82,5 @@ module.exports = {
       '1': '1',
     },
   },
-  plugins: [require("tailwindcss-animate", "daisyui")],
+  plugins: [require("daisyui")],
 };
diff --git a/yarn.lock b/yarn.lock
@@ -2698,6 +2698,11 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
+
 css-selector-tokenizer@^0.8:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
@@ -4215,6 +4220,11 @@ human-signals@^4.3.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
   integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
 
+hyphenate-style-name@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -4922,6 +4932,13 @@ markdown-table@^1.1.3:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
   integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
 
+matchmediaquery@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.1.tgz#8247edc47e499ebb7c58f62a9ff9ccf5b815c6d7"
+  integrity sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==
+  dependencies:
+    css-mediaquery "^0.1.2"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -5829,7 +5846,7 @@ prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.1, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5971,6 +5988,16 @@ [email protected]:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-responsive@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-9.0.2.tgz#34531ca77a61e7a8775714016d21241df7e4205c"
+  integrity sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==
+  dependencies:
+    hyphenate-style-name "^1.0.0"
+    matchmediaquery "^0.3.0"
+    prop-types "^15.6.1"
+    shallow-equal "^1.2.1"
+
 react-spinners@^0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
@@ -6375,6 +6402,11 @@ sha1@^1.1.1:
     charenc ">= 0.0.1"
     crypt ">= 0.0.1"
 
+shallow-equal@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 [email protected]:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"