🧑🏻‍🎄🐧 ↝ Popup for [ GP-13 ]

Signal-K · Mar 11, 2024 · 6d8cfb9 · 6d8cfb9
1 parent 9608327
commit 6d8cfb9
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 13 deletions.
diff --git a/components/Content/CreatePostForm.tsx b/components/Content/CreatePostForm.tsx
@@ -57,8 +57,8 @@ export default function CreatePostForm ( { planetId2 } ) { // category_id
                     ]);
 
                     setPostContent('');
-                }
-            })
+                };
+            });
     };
 
     useEffect(() => {

diff --git a/components/Content/Planets/Base/IndividualBasePlanet.tsx b/components/Content/Planets/Base/IndividualBasePlanet.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import ContentPlaceholder, { ActivateButton } from "../PlanetData/ContentPlaceholder";
 import Link from "next/link";
+import { LightkurveBaseGraph } from "../PlanetData/ContentPlaceholder";
 
 export function IndividualBasePlanetDesktop({ id }: { id: string }) {
   const router = useRouter();
@@ -21,6 +22,17 @@ export function IndividualBasePlanetDesktop({ id }: { id: string }) {
 
     const [screenWidth, setScreenWidth] = useState<number>(0);
     const [showSidebar, setShowSidebar] = useState<boolean>(true);
+
+    // For handling selection of specific structures and then displaying content
+    const [selectedStructure, setSelectedStructure] = useState(null);
+
+    const handleStructureClick = (structureName) => {
+      setSelectedStructure(structureName);
+    };
+
+    const handleClosePopup = () => {
+      setSelectedStructure(null);
+    };
 
     useEffect(() => {
       const handleResize = () => {
@@ -264,18 +276,16 @@ export function IndividualBasePlanetDesktop({ id }: { id: string }) {
                       width="50"
                     /> */}
                   </button>
-                  <button className="justify-self-center self-start">
+                  <button
+                    className="justify-self-center self-start"
+                    onClick={() => handleStructureClick("Structure 2")}
+                  >
                     <img
                       alt="Structure 2"
                       className="w-24 h-24"
-                      height="50"
                       src="/assets/Inventory/Structures/Telescope2.png"
-                      style={{
-                        aspectRatio: "50/50",
-                        objectFit: "cover",
-                      }}
-                      width="50"
                     />
+                    <div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">View planet light curves</div>
                   </button>
                   <button className="justify-self-end self-start">
                     {/* <img
@@ -412,6 +422,19 @@ export function IndividualBasePlanetDesktop({ id }: { id: string }) {
                       </div>
                     </div>
                   </div> */}
+                  {selectedStructure && (
+        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
+          <div className="max-w-2xl w-full bg-white p-8 rounded-lg shadow-xl z-50">
+            <button
+              className="absolute top-4 right-4 text-gray-600"
+              onClick={handleClosePopup}
+            >
+              Close
+            </button>
+            <LightkurveBaseGraph planetId={selectedStructure} />
+          </div>
+        </div>
+      )}
                 </div>
                 <div className="grid-container mb-24">
   {sectors.map((sector) => (

diff --git a/components/Content/Planets/PlanetData/ContentPlaceholder.tsx b/components/Content/Planets/PlanetData/ContentPlaceholder.tsx
@@ -1,6 +1,7 @@
 import { CloudArrowUpIcon, LockClosedIcon, ServerIcon } from '@heroicons/react/20/solid';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import LightcurveGenerator from './PopulatePlanetData';
+import { useSupabaseClient } from '@supabase/auth-helpers-react';
 
 export default function ContentPlaceholder(planetIdDeepnote) {
   return (
@@ -83,4 +84,30 @@ export function ActivateButton(planetIdDeepnote) {
         )}
       </div>
     );
-  }
+}
+
+export function LightkurveBaseGraph(planetId) {
+  const supabase = useSupabaseClient();
+
+  const [planetData, setPlanetData] = useState(null);
+
+// const { content, avatar_url, type, deepnote, cover, temperatureEq, smaxis, mass } = planetData;
+
+  return (
+    <center>
+      <div className="max-w-2xl w-full bg-white p-8 rounded-lg shadow-xl z-50 mt-10">
+      {/* <p className="text-base font-semibold leading-7 text-indigo-600">Planet type: {type}</p>
+      <h1 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Planet name: {content}</h1> */}
+      <p className="mt-6 text-xl leading-8 text-gray-700">
+        Brief summaary: owner, sectors, etc
+      </p>
+
+      <div className="text-gray-700">
+        <div className="pt-10">
+          <LightcurveGenerator planetId={planetId} />
+        </div>
+      </div>
+      </div>
+    </center>
+  );
+};
diff --git a/components/Content/Planets/PlanetData/PopulatePlanetData.tsx b/components/Content/Planets/PlanetData/PopulatePlanetData.tsx
@@ -1,7 +1,11 @@
 import React, { useState } from "react";
 import axios from "axios";
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
 
-const LightcurveGenerator = () => {
+const LightcurveGenerator = ({ planetId }: { planetId: string }) => {
+    const supabase = useSupabaseClient();
+
+    const [planetData, setPlanetData] = useState(null);
     const [ticId, setTicId] = useState('');
     const [imageURL, setImageUrl] = useState('');
 
@@ -17,8 +21,9 @@ const LightcurveGenerator = () => {
             setImageUrl(url);
         } catch (error) {
             console.error(error.message);
-        }
+        };
     };
+
 
     return (
         <div>