🧼👝 ↝ Build menu creation

Author: Gizmotronn

components/Content/Planets/Activities/StructureCreate.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
+
+interface Structure {
+    id: number;
+    name: string;
+    description: string;
+    icon_url: string;
+};
+
+interface StructureSelectionProps {
+    onStructureSelected: (structure: Structure) => void;
+};
+
+const StructureSelection: React.FC<StructureSelectionProps> = ({ onStructureSelected }) => {
+    const supabase = useSupabaseClient();
+
+    const [structures, setStructures] = useState<Structure[]>([]);
+    
+    const [isCalloutOpen, setIsCalloutOpen] = useState(false);
+
+    const fetchStructures = async () => {
+        try {
+            const { data, error } = await supabase
+                .from('inventoryITEMS')
+                .select('id, name, description, icon_url')
+                .eq('ItemCategory', 'Structure');
+
+            if (data) {
+                setStructures(data);
+            };
+
+            if (error) {
+                console.error(error.message);
+            };
+        } catch (error) {
+            console.error(error.message);
+        };
+    };
+
+    useEffect(() => {
+        fetchStructures();
+    }, [supabase]);
+
+    const handleStructureClick = (structure: Structure) => {
+        onStructureSelected(structure);
+        setIsCalloutOpen(false);
+    };
+
+    return (
+        <div className="relative inline-block text-left">
+          <button
+            type="button"
+            className="px-4 py-2 text-white bg-blue-500 rounded-md focus:outline-none hover:bg-blue-600"
+            onClick={() => setIsCalloutOpen(!isCalloutOpen)}
+          >
+            Build
+          </button>
+    
+          {isCalloutOpen && (
+            <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
+              <div className="py-1">
+                {structures.map((structure) => (
+                  <div
+                    key={structure.id}
+                    className="flex items-center justify-between px-4 py-2 hover:bg-gray-100 cursor-pointer"
+                    onClick={() => handleStructureClick(structure)}
+                  >
+                    <div className="flex items-center space-x-2">
+                      <img src={structure.icon_url} alt={structure.name} className="w-6 h-6" />
+                      <span>{structure.name}</span>
+                    </div>
+                    <span className="text-gray-500">{structure.description}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+    );
+};
+
+export default function StructureComponent () {
+    const handleStructureSelected = (structure) => {
+        console.log('Selected structure: ', structure);
+    };
+
+    return (
+        <div>
+            <StructureSelection onStructureSelected={handleStructureSelected} />
+        </div>
+    );
+};

components/Content/Planets/Base/IndividualBasePlanetSector.tsx

@@ -5,6 +5,7 @@ import Card from "../../../Card";
 import RoverImageGallery, { RoverImage, RoverImageNoHandle } from "../PlanetData/RandomRoverImage";
 import axios from "axios";
 import { RoverContentPostForm } from "../../CreatePostForm";
+import StructureComponent from "../Activities/StructureCreate";
 
 // Rover image data -> place inside BasePlanetSector
     // useEffect(() => {
@@ -215,7 +216,8 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
             </div>
           </div>
           <div className="flex flex-col items-center justify-start gap-4">
-          <div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] uppercase tracking-[3.48px]">
+            <StructureComponent />
+          {/* <div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] uppercase tracking-[3.48px]">
             Mineral deposit
           </div>
           <div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
@@ -227,7 +229,7 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
               alt={`Icon for ${name}`}
               className="w-16 h-16 object-contain"
             />
-          )}
+          )} */}
         </div>
           {/* {deposit && typeof deposit === "string" ? (
                 <div>{deposit}</div>