👍🏻😒 ↝ New assets [ SGV2-6 ]

components/Content/Inventory/UserOwnedItems.tsx

@@ -50,17 +50,17 @@ const OwnedItemsList: React.FC = () => {
     // Function to calculate the position of each item around the circle
     const calculatePosition = (index: number, totalItems: number) => {
       const angle = (index / totalItems) * 360;
-      const radius = 125; // Adjust as needed
-      const centerX = 175; // Adjust as needed
+      const radius = 15; // Adjust as needed
+      const centerX = 15; // Adjust as needed
       const centerY = 175; // Adjust as needed
       const x = centerX + radius * Math.cos(angle);
       const y = centerY + radius * Math.sin(angle);
       return { x, y };
     };
-    const radius = 150;
+    const radius = 100;
 
     return (
-      <div className="relative w-80 h-80 flex items-center justify-center">
+      <div className="relative w-80 h-80 flex -mx-20">
         {itemDetails.map((item, index) => {
           const angle = (index / itemDetails.length) * 2 * Math.PI;
           const x = Math.cos(angle) * radius;

components/Overlays/1-Feed.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { GardenDashboard } from '../../@/components/garden-dashboard';
+
+interface FeedOverlayProps {
+  onClose: () => void;
+}
+
+const FeedOverlay: React.FC<FeedOverlayProps> = ({ onClose }) => {
+  return (
+    <div className="fixed inset-x-0 bottom-0 flex justify-center bg-black bg-opacity-50">
+      <div className="bg-white rounded-t-3xl w-full sm:max-w-screen-lg sm:w-full max-h-60vh overflow-y-auto shadow-lg transform transition-all duration-300">
+        <div className="p-4">
+          <h2 className="text-2xl font-bold">Feed Overlay</h2>
+          <button onClick={onClose} className="mt-2 px-4 py-2 bg-gray-200 text-gray-800 rounded">
+            Close
+          </button>
+          <GardenDashboard />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeedOverlay;

components/Section/Layout.tsx

@@ -44,39 +44,6 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
 
 export default Layout;
 
-export const LandingLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {     // Check if window is defined before accessing it
-    if (typeof window !== "undefined") {
-      const checkIsMobile = () => {
-        setIsMobile(window.innerWidth <= 768);
-      };
-      checkIsMobile();
-      window.addEventListener("resize", checkIsMobile);
-      return () => {
-        window.removeEventListener("resize", checkIsMobile);
-      };
-    }
-  }, []);
-
-  return (
-    <>
-        <main className="h-max pb-10 grow pt-6">
-          <div className="py-12">
-            {children}
-          </div>
-        </main>
-      {isMobile && (
-        <div className="md:hidden overflow-y-auto h-screen p-4">
-          <main className="h-max pb-10 grow">{children}</main>
-          {/* <Bottombar /> */}
-        </div>
-      )}
-    </>
-  );
-};
-
 export const InventoryLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
   const [isMobile, setIsMobile] = useState(false);
   const [activeTab, setActiveTab] = useState('consumables')
@@ -133,11 +100,11 @@ export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
       <main className="h-max pb-10 grow overflow-y-auto">
         {children}
       </main>
-      {isMobile && (
+      {/* {isMobile && (
         <div className="w-full md:hidden fixed bottom-0 left-0 z-50">
           <Bottombar />
         </div>
-      )}
+      )} */}
     </div>
   );
 };

pages/index.tsx

@@ -1,22 +1,18 @@
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import React, { useEffect, useState } from "react";
-import Layout, { LandingLayout } from "../components/Section/Layout";
-import CardForum from "../components/Content/DiscussCard";
+import Layout, { LayoutNoNav } from "../components/Section/Layout";
 import { useRouter } from "next/router";
-import Login from "./login";
 
-import styles from '../styles/Landing.module.css';
 import { Metadata } from "next";
-import { Auth, ThemeSupa } from '@supabase/auth-ui-react';
 
 // Imports for new landing (public-facing)
 import { Dialog } from "@headlessui/react";
 import { AiFillCloseCircle } from 'react-icons/ai';
 import { HiBars3 } from 'react-icons/hi2';
-import { BiLogIn } from 'react-icons/bi';
 import { footerNavigation, modules, navigation } from "../components/Public/LandingContent";
 import { UserDropdownMenu, UserMenuItems } from "../components/Section/Navbar";
 import { GardenDashboard } from "../@/components/garden-dashboard";
+import FeedOverlay from "../components/Overlays/1-Feed";
 
 export const metadata: Metadata = {
   title: "Star Sailors"
@@ -30,11 +26,46 @@ export function PublicLanding () {
 
   const session = useSession();
 
+  // Component context
+  const [showFeedOverlay, setShowFeedOverlay] = useState(false);
+  const handleOpenFeedOverlay = () => {
+    setShowFeedOverlay(true);
+  };
+
   if (session) {
     return (
-      <Layout>
-        <GardenDashboard />
-      </Layout>
+      <LayoutNoNav>
+            <div className="flex-col justify-center">
+                    <style jsx global>
+                {`
+                  body {
+                    background: url('/assets/Onboarding/Bg.png') center/cover;
+                  }
+                  
+                  @media only screen and (max-width: 767px) {
+                    .planet-heading {
+                      color: white;
+                      font-size: 24px;
+                      text-align: center;
+                      margin-bottom: 10px;
+                    }
+                  }
+                `}
+              </style>
+        <button onClick={handleOpenFeedOverlay} className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
+          Open Feed
+        </button>
+        <div className="mt-20">
+          {showFeedOverlay &&
+            <>
+              <div className="mt-20">
+                <FeedOverlay onClose={() => setShowFeedOverlay(false)} />
+              </div>
+            </>
+          }
+        </div>
+        </div>
+      </LayoutNoNav>
     );
   };
 
@@ -447,24 +478,6 @@ export default function Home() {
 
     const userId = session?.user?.id;
 
-    // useEffect(() => {
-    //     if (session) {
-    //         router.push('/feed');
-    //     }
-    // }, [session, router]);
-
-    // if (session) {
-    // return (
-    //   <LandingLayout>
-    //     {/* {userId} */}
-    //     <div className="flex flex-col gap-4">
-    //       <PublicLanding />
-    //     </div>
-    //   </LandingLayout>
-    //     // <CoreLayout>
-    //   )
-    // }
-
     return (
       <PublicLanding />
     );