From 4776335b629804fb5d61d2e2e790af60a9b2ef2a Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Tue, 10 Dec 2024 04:11:08 +0100
Subject: [PATCH] clean up

---
 dcl-attend-frontend/src/app/org/page.tsx      | 16 ++++++-
 dcl-attend-frontend/src/app/page.tsx          | 48 ++++++++-----------
 .../src/components/molecules/Layout/index.tsx |  5 +-
 .../components/molecules/OrgPanels/index.tsx  |  7 ++-
 4 files changed, 43 insertions(+), 33 deletions(-)
diff --git a/dcl-attend-frontend/src/app/org/page.tsx b/dcl-attend-frontend/src/app/org/page.tsx
index 4190c43..2f8908f 100644
--- a/dcl-attend-frontend/src/app/org/page.tsx
+++ b/dcl-attend-frontend/src/app/org/page.tsx
@@ -1,14 +1,22 @@
+"use client";
+
 import { IconChevDown } from "@/components/atoms/icons";
 import Layout from "@/components/molecules/Layout";
 import { OrgPanels } from "@/components/molecules/OrgPanels";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
 
 export default function OrgPage() {
+  const [paramOrgName] = useSearchParams().getAll("") ?? [];
+  console.log(`org slug: ${paramOrgName}`);
   return <Layout top={<Top />} body={<Body />} />;
 }
 
 const Top = () => (
   <>
-    <span>org</span>
+    <Link href="/">
+      <span className="hover:opacity-50 transition-opacity">org</span>
+    </Link>
     <span className="text-border font-bold">/</span>
     <span>innkeeper</span>
     <IconChevDown color="var(--color-border)" />
@@ -19,7 +27,11 @@ const Body = () => {
   return (
     <>
       <OrgPanels
-        org={{ img: "logos/innkeeper.png", name: "innkeeper.eth" }}
+        org={{
+          img: "logos/innkeeper.png",
+          name: "innkeeper.eth",
+          slug: "innkeeper",
+        }}
         locations={[
           { location: "theinn", name: "hyperfy" },
           { location: "137,-2", name: "dcl" },
diff --git a/dcl-attend-frontend/src/app/page.tsx b/dcl-attend-frontend/src/app/page.tsx
index a709b6d..546452c 100644
--- a/dcl-attend-frontend/src/app/page.tsx
+++ b/dcl-attend-frontend/src/app/page.tsx
@@ -1,35 +1,25 @@
 "use client";
 
-import { IconChevDown } from "@/components/atoms/icons";
-import { useState } from "react";
+import Layout from "@/components/molecules/Layout";
+import Link from "next/link";
 
 export default function Home() {
-  const [isHovering, setIsHovering] = useState(false);
-  const over = () => setIsHovering(true);
-  const out = () => setIsHovering(false);
+  return <Layout top={<Top />} body={<Body />} />;
+}
 
-  return (
-    <div
-      className={`grid w-svh h-svh transition-all`}
-      style={{
-        gridTemplateColumns: `${isHovering ? 8 : 5}rem 1fr`,
-      }}
-    >
-      <div
-        onMouseOver={over}
-        onMouseOut={out}
-        className="border-border border-r-2 group-hover:[grid-template-columns:8rem_1fr] flex flex-col items-center"
-      >
-        <div className="w-[40px] h-[40px] bg-border rounded-full mt-4" />
-      </div>
-      <div className="flex flex-col">
-        <div className="border-border border-b-2 min-h-16 px-4 flex items-center gap-3 font-mono">
-          <span>org</span>
-          <span className="text-border font-bold">/</span>
-          <span>innkeeper</span>
-          <IconChevDown color="var(--color-border)" />
-        </div>
+const Top = () => (
+  <>
+    <span>orgs</span>
+  </>
+);
+
+const Body = () => (
+  <>
+    <Link href="/org?=innkeeper">
+      <div className="bg-panel p-4 border-border border-2 rounded-lg flex items-center gap-4 text-xl hover:opacity-50 transition-opacity">
+        <img src="logos/innkeeper.png" height="40px" width="40px" />
+        <p>innkeeper.eth</p>
       </div>
-    </div>
-  );
-}
+    </Link>
+  </>
+);
diff --git a/dcl-attend-frontend/src/components/molecules/Layout/index.tsx b/dcl-attend-frontend/src/components/molecules/Layout/index.tsx
index 0889fc4..ff819ac 100644
--- a/dcl-attend-frontend/src/components/molecules/Layout/index.tsx
+++ b/dcl-attend-frontend/src/components/molecules/Layout/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { ReactNode, useState } from "react";
 
 export default function Layout(props: { top?: ReactNode; body?: ReactNode }) {
@@ -19,7 +20,9 @@ export default function Layout(props: { top?: ReactNode; body?: ReactNode }) {
         onMouseOut={out}
         className="border-border border-r-2 group-hover:[grid-template-columns:8rem_1fr] flex flex-col items-center"
       >
-        <div className="w-[40px] h-[40px] bg-border rounded-full mt-4" />
+        <Link href="/">
+          <div className="w-[40px] h-[40px] bg-border rounded-full mt-4" />
+        </Link>
       </div>
       <div className="flex flex-col">
         <div className="border-border border-b-2 min-h-16 px-4 flex items-center gap-3 font-mono">
diff --git a/dcl-attend-frontend/src/components/molecules/OrgPanels/index.tsx b/dcl-attend-frontend/src/components/molecules/OrgPanels/index.tsx
index 12ad51d..20c4a0f 100644
--- a/dcl-attend-frontend/src/components/molecules/OrgPanels/index.tsx
+++ b/dcl-attend-frontend/src/components/molecules/OrgPanels/index.tsx
@@ -2,10 +2,12 @@ export const OrgPanels = (props: {
   org: {
     img: string;
     name: string;
+    slug: string;
   };
   locations: {
     name: "hyperfy" | "dcl";
     location: string;
+    href?: string;
   }[];
 }) => {
   return (
@@ -17,7 +19,10 @@ export const OrgPanels = (props: {
 
       <div className="flex gap-4 font-mono">
         {props.locations?.map((loc) => (
-          <div className="bg-panel p-4 border-border border-2 rounded-lg items-center gap-4 text-xl flex flex-col md:flex-row w-full md:w-fit">
+          <div
+            key={loc.name + loc.location}
+            className="bg-panel p-4 border-border border-2 rounded-lg items-center gap-4 text-xl flex flex-col md:flex-row w-full md:w-fit"
+          >
             <img src={`${VERSE[loc.name]?.img}`} height="40px" width="40px" />
             <div>
               <p className="text-xs">{VERSE[loc.name]?.name}</p>
