☃️👰🏼‍♀️ ↝ Conditional loading setup for anomaly data

components/Content/Planets/Base/IndividualBasePlanet.tsx

@@ -730,7 +730,7 @@ export function BasePlanetData ({ planetId }) { // Repurpose/rename syntax for g
 
   return (
     <div>
-      <center><iframe src={basePlanetData.deepnote} height='659' width='80%' /></center>
+      <center><iframe src={basePlanetData.deepnote} height='1200' width='80%' /></center>
     </div>
   )
 }

components/Core/BottomBar.tsx

@@ -61,14 +61,15 @@ const Bottombar = () => {
 
 export default Bottombar;
 
-export const CreateBar = () => {
+export const CreateBar = ({ onTabClick }) => {
   return (
     <div className="fixed z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2 dark:bg-gray-700 dark:border-gray-600">
       <div className="grid h-full max-w-lg grid-cols-5 mx-auto">
         <button
           data-tooltip-target="tooltip-home"
           type="button"
           className="inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
+          onClick={() => onTabClick('home')}
         >
           <svg
             className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
@@ -95,6 +96,7 @@ export const CreateBar = () => {
           data-tooltip-target="tooltip-wallet"
           type="button"
           className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group"
+          onClick={() => onTabClick('wallet')}
         >
           <svg
             className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"

pages/planets/[id].tsx

@@ -14,6 +14,11 @@ import { CreateBar } from "../../components/Core/BottomBar";
 export default function PlanetIdPage () {
     const router = useRouter();
     const { id } = router.query;
+    const [activeView, setActiveView] = useState('home');
+
+    const handleTabClick = (view) => {
+        setActiveView(view);
+    };
 
     const [isMobile, setIsMobile] = useState(false);
 
@@ -87,23 +92,43 @@ export default function PlanetIdPage () {
 
     return (
         <>
-            <Navbar />
-            <div className="h-screen">
-                <IndividualBasePlanetDesktop id={id as string} />
-            </div>
-            <div className="bg-white py-5">
-                <div className="grid grid-cols-2 gap-4">
-                    <div>
-                        <PostFormCardAnomalyTag planetId={id} onPost={null} />
-                        <ClassificationFeedForIndividualPlanet planetId={{ id: id as string }} backgroundColorSet="bg-blue-200" />
-                    </div>
-                    <div className="">
-                        <BasePlanetData planetId={{ id: id as string }} />
-                    </div>
+          <Navbar />
+          <div className="h-screen">
+            <IndividualBasePlanetDesktop id={id as string} />
+          </div>
+          <div className="bg-white py-5">
+            {activeView === 'home' && (
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <PostFormCardAnomalyTag planetId={id} onPost={null} />
+                  <ClassificationFeedForIndividualPlanet
+                    planetId={{ id: id as string }}
+                    backgroundColorSet="bg-blue-200"
+                  />
                 </div>
-                <img src={`https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planetsss/${id}/topography.jpeg`} alt="Topography" />
-            </div>
-            <CreateBar />
+                <div className="">
+                  <BasePlanetData planetId={{ id: id as string }} />
+                </div>
+              </div>
+            )}
+            {activeView === 'wallet' && (
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <ClassificationFeedForIndividualPlanet
+                    planetId={{ id: id as string }}
+                    backgroundColorSet="bg-blue-200"
+                  />
+                </div>
+                <div className="">
+                  <img
+                    src={`https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planetsss/${id}/topography.jpeg`}
+                    alt="Topography"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+          <CreateBar onTabClick={handleTabClick} />
         </>
-    );                    
-};
+      );
+    };