️💄👩‍👧‍👦 ↝ [SGV2-16]: Getting an idea of the full scope

components/Content/Inventory/UserOwnedItems.tsx

@@ -97,22 +97,26 @@ export const ItemsVerticalList: React.FC = () => {
   const supabase = useSupabaseClient();
   const [ownedItems, setOwnedItems] = useState([]);
   const [itemDetails, setItemDetails] = useState([]);
+  const [isLoading, setIsLoading] = useState(true); // Loading state
 
   useEffect(() => {
-    const fetchOwnedItemsAndDetails = async () => {
-      if (!session) return;
+    if (!session || !supabase) {
+      return;
+    }
 
+    const fetchOwnedItemsAndDetails = async () => {
       try {
+        setIsLoading(true);
         const userId = session.user.id;
 
         // Fetch owned items from the database
         const { data: ownedItemsData, error: ownedItemsError } = await supabase
-          .from('inventoryUSERS')
-          .select('*')
-          .eq('owner', userId)
-          .gt('id', 20)
+          .from("inventoryUSERS")
+          .select("*")
+          .eq("owner", userId)
+          .gt("id", 20)
           .limit(6)
-          .order('id', { ascending: false});
+          .order("id", { ascending: false });
 
         if (ownedItemsError) {
           throw ownedItemsError;
@@ -126,20 +130,20 @@ export const ItemsVerticalList: React.FC = () => {
 
           // Fetch details of owned items based on item IDs
           const { data: itemDetailsData, error: itemDetailsError } = await supabase
-            .from('inventoryITEMS')
-            .select('*')
-            .in('id', itemIds);
+            .from("inventoryITEMS")
+            .select("*")
+            .in("id", itemIds);
 
           if (itemDetailsError) {
             throw itemDetailsError;
           }
 
-          if (itemDetailsData) {
-            setItemDetails(itemDetailsData);
-          }
+          setItemDetails(itemDetailsData);
         }
       } catch (error) {
-        console.error('Error fetching owned items and details:', error);
+        console.error("Error fetching owned items and details:", error);
+      } finally {
+        setIsLoading(false);
       }
     };
 
@@ -148,15 +152,19 @@ export const ItemsVerticalList: React.FC = () => {
 
   // Combine owned items with their details
   const combinedItems = ownedItems.map(ownedItem => {
-    // Find the matching item detail based on item ID
     const itemDetail = itemDetails.find(detail => detail.id === ownedItem.item);
-
     return {
       ...ownedItem,
       ...itemDetail,
     };
   });
 
+  // If the component is loading, you can display a loading indicator or message
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  // Render the list of items
   return (
     <div className="w-full">
       {combinedItems.map(item => (

components/_Core/Section/BentoBox.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { cn } from "../../../lib/uitls";
+import { RocketIcon } from "lucide-react";
+import { BentoGrid } from "../ui/bento-grid";
+import { InventoryOneList, InventoryTwoList } from "../../_Skeleton/InventoryBlocks";
+
+export default function BlockGrid() {
+    return (
+        <BentoGrid className="max-w-4xl mx-auto md:auto-rows-[20rem]">
+            {items.map((item, i) => (
+                <BentoBoxItem
+                    key={i}
+                    title={item.title}
+                    description={item.description}
+                    header={item.header}
+                    className={cn("[&>p:text-lg]", item.className)}
+                />
+            ))}
+        </BentoGrid>
+    );
+};
+
+// Boxes
+export const BentoBoxItem = ({
+    title,
+    description,
+    className,
+    header,
+}: {
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    className?: string | React.ReactNode;
+    header?: React.ReactNode;
+}) => {
+    return (
+        <div
+            className={cn(
+                "row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-white border border-transparent justify-between flex flex-col space-y-4",
+                className
+            )}
+        >
+            {header}
+            <RocketIcon />
+            {/* <div className="group-hover/bento:translate-x-2 transition duration-200">
+                <RocketIcon />
+                <div className="font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">
+                    {title}
+                </div>
+                <div className="font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300">
+          {description}
+        </div>
+            </div> */}
+        </div>
+    );
+};
+
+// Items
+const items = [
+    {
+        title: "Inventory list", // Rover Temperature Control Panel"
+        description: (
+            <span className="text-sm">
+
+            </span>
+        ),
+        icon: RocketIcon,
+        header: <InventoryOneList />,
+        className: "md:col-span-1",
+    },
+    {
+        title: "Inventory list 2", // Rover Temperature Control Panel"
+        description: (
+            <span className="text-sm">
+
+            </span>
+        ),
+        icon: RocketIcon,
+        header: <InventoryTwoList />,
+        className: "md:col-span-1",
+    },
+];

components/_Skeleton/InventoryBlocks.tsx

@@ -0,0 +1,13 @@
+import OwnedItemsList, { ItemsVerticalList } from "../Content/Inventory/UserOwnedItems";
+
+export const InventoryOneList = () => {
+    return (
+        <ItemsVerticalList />
+    );
+};
+
+export const InventoryTwoList = () => {
+    return (
+        <OwnedItemsList />
+    );
+};

pages/tests/blocks.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { LayoutNoNav } from "../../components/_Core/Section/Layout";
+import BlockGrid from "../../components/_Core/Section/BentoBox";
+
+export default function AllBlocksTestPage() {
+    return (
+        <LayoutNoNav>
+            <BlockGrid />
+        </LayoutNoNav>
+    );
+};

pages/tests/planetRing.tsx

@@ -1,5 +1,5 @@
 export default function PlanetRingTestPage() {
     return (
         <>p</>
-    )
-}
+    );
+};