Explore page (#267)

Co-authored-by: Willy Ogorzaly <[email protected]>

src/common/components/organisms/Navigation.tsx

@@ -14,6 +14,7 @@ import { first } from "lodash";
 import { IoMdRocket } from "react-icons/io";
 import { Button } from "../atoms/button";
 import { FaPaintbrush, FaDiscord } from "react-icons/fa6";
+import { PiGlobeHemisphereEastBold } from "react-icons/pi";
 import { NOUNISH_LOWFI_URL } from "@/constants/nounishLowfi";
 import { UserTheme } from "@/common/lib/theme";
 import { useUserTheme } from "@/common/lib/theme/UserThemeProvider";
@@ -136,7 +137,11 @@ const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
                   }
                   openInNewTab
                 />
-                {/* <NavItem label="Explore" Icon={ExploreIcon} href="/explore"/> */}
+                <NavItem
+                  label="Explore"
+                  Icon={PiGlobeHemisphereEastBold}
+                  href="/explore"
+                />
                 {isLoggedIn && (
                   <NavItem
                     label={"My Space"}
@@ -192,7 +197,7 @@ const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
           <div className="flex flex-col flex-auto justify-between border-t px-4">
             <div className="mt-8 px-2">
               <Player
-                url={userTheme?.properties.musicURL || NOUNISH_LOWFI_URL}
+                url={userTheme?.properties?.musicURL || NOUNISH_LOWFI_URL}
               />
             </div>
             {isLoggedIn && (

src/pages/explore/index.tsx

@@ -1,6 +1,9 @@
 import React from "react";
+import { groupBy } from "lodash";
 import Link from "next/link";
 import Image from "next/image";
+import Navigation from "@/common/components/organisms/Navigation";
+import { useAppStore } from "@/common/data/stores/app";
 import { getAllMarkdownFiles } from "@/common/data/explore/loadExploreMarkdown";
 
 export async function getStaticProps() {
@@ -12,21 +15,99 @@ export async function getStaticProps() {
   };
 }
 
+const categories = [
+  { title: "Nounish", image: "/images/explore-icons/nounish.png" },
+  { title: "DeFi", image: "/images/explore-icons/defi.png" },
+  { title: "Art", image: "/images/explore-icons/art.png" },
+  { title: "Farcaster", image: "/images/explore-icons/farcaster.png" },
+  { title: "Games", image: "/images/explore-icons/games.png" },
+  { title: "Music", image: "/images/explore-icons/music.png" },
+  { title: "AI", image: "/images/explore-icons/ai.png" },
+  { title: "Public Goods", image: "/images/explore-icons/public-goods.png" },
+];
+
 export default function Explore({ posts }) {
+  const { homebaseConfig } = useAppStore((state) => ({
+    homebaseConfig: state.homebase.homebaseConfig,
+  }));
+  const groupedPosts = groupBy(posts, (post) => post.category);
+
   return (
-    <div>
-      <h1>Explore</h1>
-      <ul>
-        {posts.map((post) => (
-          <li key={post.slug}>
-            <Link href={`/explore/${post.slug}`}>
-              <h2>{post.title}</h2>
-              <p>{post.bio}</p>
-              <Image src={post.image} alt={post.title} fill />
-            </Link>
-          </li>
-        ))}
-      </ul>
+    <div className="min-h-screen max-w-screen h-screen w-screen">
+      <div className="flex w-full h-full">
+        {/* Sidebar */}
+        <div className="flex mx-auto transition-all duration-100 ease-out z-10">
+          <Navigation
+            isEditable={false}
+            enterEditMode={() => {}}
+            theme={homebaseConfig?.theme}
+          />
+        </div>
+
+        {/* Main Content */}
+        <div className="w-full transition-all duration-100 ease-out h-full p-5 grid grid-rows-[auto_1fr]">
+          <div className="min-h-48 rounded-lg relative overflow-hidden grid grid-cols-1 grid-rows-1 place-content-center">
+            <Image
+              src="/images/rainforest.png"
+              alt="Rainforest"
+              fill
+              className="col-span-1 row-span-1 object-cover object-bottom"
+            />
+            <div className="col-span-1 row-span-1 z-10 text-center font-bold text-white grid place-content-center text-4xl">
+              Explore Featured Spaces
+            </div>
+          </div>
+          <div className="grid grid-cols-1 gap-8 mt-5 overflow-auto">
+            {categories.map(({ title, image }) => {
+              if (!groupedPosts[title]) return null;
+
+              return (
+                <div
+                  key={title}
+                  className="flex flex-col gap-4 border-b border-b-slate-200 pb-8 last:border-b-0 last:pb-0"
+                >
+                  <h2 className="text-2xl font-bold flex flex-row gap-4 items-center">
+                    <Image
+                      src={image}
+                      alt={title}
+                      width={48}
+                      height={48}
+                      className="shrink-0"
+                    />
+                    {title}
+                  </h2>
+                  <div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+                    {groupedPosts[title].map((post, i) => (
+                      <ExploreCard key={`${post.slug}-${i}`} post={post} />
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
+
+const ExploreCard = ({ post }) => {
+  return (
+    <Link
+      href={`/s/${post.slug}`}
+      className="block border border-gray-300 rounded-lg overflow-hidden bg-[#FCFFF4] hover:shadow-md transition-all duration-100 ease-out hover:-translate-y-1"
+    >
+      <div className="h-36 w-full bg-gray-200 overflow-hidden relative">
+        <Image
+          src={post.image}
+          alt={post.title}
+          fill
+          className="object-cover object-center"
+        />
+      </div>
+      <div className="p-3">
+        <h2 className="text-lg font-bold">@{post.title}</h2>
+      </div>
+    </Link>
+  );
+};