👩‍👧‍👦🛷 ↝ Slightly adjusting layout configs [ SGV2-4 ]

Signal-K · Mar 10, 2024 · b3a3468 · b3a3468
1 parent 70c11f7
commit b3a3468
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 93 deletions.
diff --git a/@/components/garden-dashboard.tsx b/@/components/garden-dashboard.tsx
@@ -5,36 +5,29 @@ import { CardTitle, CardHeader, CardContent, Card } from "./ui/card";
 import { QuickLook } from "../../components/quick-look";
 import { UserMenuItems } from "../../components/Section/Navbar";
 import OwnedItemsList from "../../components/Content/Inventory/UserOwnedItems";
+import { MenuIcon } from "lucide-react";
+
+// import { Card, CardHeader, CardContent, CardTitle } from "./ui/card";
+// import { Button } from "./ui/button";
+// import { QuickLook } from "../../components/quick-look";
+// import OwnedItemsList from "../../components/Content/Inventory/UserOwnedItems";
+// import { UserIcon, Package2Icon, MenuIcon, ChevronDownIcon } from "./icons";
 
 export function GardenDashboard() {
   return (
-    <div className="flex flex-col min-h-screen w-full">
+    <div className="flex flex-col w-full">
       <div className="flex-1 flex flex-col items-center justify-center text-center">
-        <div className="grid items-center gap-4 p-4">
-          <div className="space-y-2">
-            <h1 className="text-3xl font-bold">Galactic Garden</h1>
-            <p className="text-gray-500 dark:text-gray-400">Welcome, Astronaut!</p>
-          </div>
-        </div>
-        <div className="grid gap-4 p-4">
-          <div className="flex items-center gap-4">
-            <div className="w-1/3 text-left">Progress</div>
-            <div className="w-2/3">
-              <div />
-            </div>
-          </div>
-        </div>
         <div className="grid gap-4 p-4">
           <Card>
             <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
               <CardTitle className="text-sm font-medium">Available</CardTitle>
-              <ChevronDownIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+              <MenuIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
             </CardHeader>
             <CardContent>
               <ul className="grid gap-2 text-sm">
-                <li>🌱 Seedling</li>
-                <li>🌿 Sprout</li>
-                <li>🌼 Bloom</li>
+                <li>🌻 Seedling</li>
+                <li>🌻 Sprout</li>
+                <li>🌻 Bloom</li>
               </ul>
             </CardContent>
           </Card>
@@ -48,67 +41,3 @@ export function GardenDashboard() {
     </div>
   )
 }
-
-
-function Package2Icon(props) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z" />
-      <path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9" />
-      <path d="M12 3v6" />
-    </svg>
-  )
-}
-
-
-function MenuIcon(props) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <line x1="4" x2="20" y1="12" y2="12" />
-      <line x1="4" x2="20" y1="6" y2="6" />
-      <line x1="4" x2="20" y1="18" y2="18" />
-    </svg>
-  )
-}
-
-
-function ChevronDownIcon(props) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m6 9 6 6 6-6" />
-    </svg>
-  )
-}
diff --git a/components/Content/Inventory/UserOwnedItems.tsx b/components/Content/Inventory/UserOwnedItems.tsx
@@ -28,7 +28,8 @@ const OwnedItemsList: React.FC = () => {
             const { data: itemDetailsData, error: itemDetailsError } = await supabase
               .from('inventoryITEMS')
               .select('*')
-              .in('id', itemIds);
+              .in('id', itemIds)
+              .gt('id', 10);
 
             if (itemDetailsError) {
               throw itemDetailsError;
@@ -56,26 +57,30 @@ const OwnedItemsList: React.FC = () => {
       const y = centerY + radius * Math.sin(angle);
       return { x, y };
     };
-
+    const radius = 150;
+
     return (
-      <div className="relative w-80 h-80 flex flex-col items-center justify-center">
+      <div className="relative w-80 h-80 flex items-center justify-center">
         {itemDetails.map((item, index) => {
-          const { x, y } = calculatePosition(index, itemDetails.length);
+          const angle = (index / itemDetails.length) * 2 * Math.PI;
+          const x = Math.cos(angle) * radius;
+          const y = Math.sin(angle) * radius;
+
           return (
             <div
               key={item.id}
-              className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center"
-              style={{ top: `${y}px`, left: `${x}px` }}
+              className="absolute flex flex-col items-center justify-center"
+              style={{ top: `calc(50% - ${y}px)`, left: `calc(50% + ${x}px)` }}
             >
               <div className="w-20 h-20 rounded-full overflow-hidden mb-2">
                 <img src={item.icon_url} alt={item.name} className="w-full h-full object-cover" />
               </div>
-              <p className="text-sm">{item.name}</p>
+              <p className="text-xs text-center">{item.name}</p>
             </div>
           );
         })}
       </div>
-      );
+    );    
   };
 
 export default OwnedItemsList;
@@ -155,5 +160,5 @@ export const SectorStructureOwned: React.FC<{ sectorid: string }> = ({ sectorid
             })}
         </ul>
       </div>
-    )
-}
+    );
+};