add communities, closes #44

src/app/(sidebars)/(feed)/c/[community]/page.tsx

@@ -6,7 +6,7 @@ import { getLensClient } from "~/utils/getLensClient";
 
 const endpoint = "/api/posts";
 
-const home = async ({ params }: { params: { community: string } }) => {
+const community = async ({ params }: { params: { community: string } }) => {
   const { posts, nextCursor } = await getInitialFeed(params.community);
 
   if (!posts) {
@@ -39,4 +39,4 @@ const getInitialFeed = async (community: string) => {
   return { posts, nextCursor: data.pageInfo.next };
 };
 
-export default home;
+export default community;

src/app/(sidebars)/(title)/communities/page.tsx

@@ -0,0 +1,32 @@
+import { Feed } from "~/components/Feed";
+import { CommunityView } from "~/components/communities/CommunityView";
+import { getBaseUrl } from "~/utils/getBaseUrl";
+
+const endpoint = "/api/community";
+
+const community = async () => {
+  const communities = await getInitialFeed();
+
+  if (!communities) {
+    throw new Error("Failed to get communities");
+  }
+
+  return <Feed ItemView={CommunityView} endpoint={`${endpoint}`} initialData={communities} initialCursor={null} />;
+};
+
+const getInitialFeed = async () => {
+  const url = getBaseUrl();
+  const data = await fetch(`${url}${endpoint}`, {
+    method: "GET",
+  })
+    .then((res) => res.json())
+    .catch(() => {
+      throw new Error("(×_×)⌒☆ Failed to fetch communities");
+    });
+
+  const { communities } = data;
+
+  return communities;
+};
+
+export default community;

src/app/api/community/route.ts

@@ -0,0 +1,46 @@
+import type { NextRequest } from "next/server";
+import { type Community, stringToCommunity } from "~/components/communities/Community";
+
+export const dynamic = "force-dynamic";
+
+/// FIXME: hardcoded for now
+const communities = [
+  "pingpad",
+  "orbcommunitiesart",
+  "orbcommunitiesbuild",
+  "orbcommunitieslens",
+  "orbcommunitiesbooks",
+  "orbcommunitiesbonsai",
+  "orbcommunitiesdefi",
+  "orbcommunitiesdevelopers",
+  "orbcommunitiesmemes",
+  "orbcommunitiesmetaverse",
+  "orbcommunitiesphotography",
+  "orbcommunitiesraave",
+  "orbcommunitiesdesign",
+  "orbcommunitiesvinylandmusic",
+  "orbcommunitiesmemes",
+  "orbcommunitiesbooks",
+];
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = req.nextUrl;
+  const query = searchParams.get("q");
+
+  try {
+    let result: Community[] = [];
+    if (!query) {
+      result = communities.map(stringToCommunity);
+    } else {
+      result = communities.filter((community) => community.includes(query)).map(stringToCommunity);
+    }
+
+    if (result.length === 0) {
+      return new Response(JSON.stringify({ communities: [], error: "No results found" }), { status: 200 });
+    }
+
+    return new Response(JSON.stringify({ communities: result }), { status: 200 });
+  } catch (error) {
+    return new Response(JSON.stringify({ error: `Failed to fetch communities: ${error.message}` }), { status: 500 });
+  }
+}

src/components/RouteTitle.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { BellIcon, BookmarkIcon, HomeIcon, SettingsIcon } from "lucide-react";
+import { BellIcon, BookmarkIcon, HomeIcon, SettingsIcon, UsersIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
 
 export const RouteTitle = () => {
@@ -22,6 +22,8 @@ const getRouteIcon = (route: string) => {
       return <SettingsIcon strokeWidth={2.5} className="-mb-1" />;
     case "/notifications":
       return <BellIcon strokeWidth={2.5} className="-mb-1" />;
+    case "/communities":
+      return <UsersIcon strokeWidth={2.5} className="-mb-1" />;
     default:
       return <HomeIcon strokeWidth={2.5} className="-mb-1" />;
   }

src/components/communities/Community.tsx

@@ -0,0 +1,113 @@
+import {
+  AtSignIcon,
+  Bitcoin,
+  CameraIcon,
+  CircleSlashIcon,
+  FrameIcon,
+  GlobeIcon,
+  HammerIcon,
+  KeyboardOffIcon,
+  LaughIcon,
+  LeafIcon,
+  LibraryIcon,
+  LineChartIcon,
+  MusicIcon,
+  PaletteIcon,
+  PartyPopperIcon,
+  SproutIcon,
+  TreeDeciduousIcon,
+  WrenchIcon,
+} from "lucide-react";
+
+export type Community = {
+  id: string;
+  name: string;
+  description?: string;
+  avatar?: string;
+};
+
+export const stringToCommunity = (community: string) => {
+  let communityName = community;
+  if (community.includes("orbcommunities")) {
+    communityName = `orb/${community.replace("orbcommunities", "")}`;
+  }
+  if (community.includes("channel")) {
+    communityName = `channel/${community.split("-")[1]}`;
+  }
+  if (community.includes("pingpad")) {
+    communityName = "ping";
+  }
+  return {
+    id: community,
+    name: communityName,
+    description: null,
+    image: null,
+  };
+};
+
+export const getCommunityIcon = (community: string) => {
+  let icon = null;
+  switch (community) {
+    case "pingpad":
+      icon = <AtSignIcon size={18} />;
+      break;
+    case "orbcommunitieslens":
+      icon = <SproutIcon size={18} />;
+      break;
+    case "orbcommunitiesart":
+      icon = <PaletteIcon size={18} />;
+      break;
+    case "orbcommunitiestrading":
+      icon = <LineChartIcon size={18} />;
+      break;
+    case "orbcommunitiesraave":
+      icon = <PartyPopperIcon size={18} />;
+      break;
+    case "orbcommunitiesafk":
+      icon = <KeyboardOffIcon size={18} />;
+      break;
+    case "orbcommunitiestouchgrass":
+      icon = <LeafIcon size={18} />;
+      break;
+    case "orbcommunitiesphotography":
+      icon = <CameraIcon size={18} />;
+      break;
+    case "orbcommunitiesbonsai":
+      icon = <TreeDeciduousIcon size={18} />;
+      break;
+    case "orbcommunitiesdefi":
+      icon = <Bitcoin size={18} />;
+      break;
+    case "orbcommunitieszk":
+      icon = <CircleSlashIcon size={18} />;
+      break;
+    case "orbcommunitieslips":
+      icon = <SproutIcon fill="hsl(var(--primary))" size={18} />;
+      break;
+    case "orbcommunitiesmetaverse":
+      icon = <GlobeIcon size={18} />;
+      break;
+    case "orbcommunitiesdesign":
+      icon = <FrameIcon size={18} />;
+      break;
+    case "orbcommunitiesvinylandmusic":
+      icon = <MusicIcon size={18} />;
+      break;
+    case "orbcommunitiesmemes":
+      icon = <LaughIcon size={18} />;
+      break;
+    case "orbcommunitiesbooks":
+      icon = <LibraryIcon size={18} />;
+      break;
+    case "orbcommunitiesdevelopers":
+      icon = <WrenchIcon size={18} />;
+      break;
+    case "orbcommunitiesbuild":
+      icon = <HammerIcon size={18} />;
+      break;
+    default:
+      icon = null;
+      break;
+  }
+  return icon;
+};

src/components/communities/CommunityView.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import Link from "next/link";
+import { Card } from "../ui/card";
+import { type Community, getCommunityIcon } from "./Community";
+
+export const CommunityView = ({ item }: { item: Community }) => {
+  const icon = getCommunityIcon(item.id);
+  return (
+    <Link href={`/c/${item.id}`}>
+      <Card className="p-1">
+        <div className="flex flex-row items-center gap-2">
+          <div className="flex items-center justify-center">
+            <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center">
+              {/* {item.avatar && <img src={item.avatar} alt={item.name} />} */}
+              {icon}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="font-semibold">{item.name}</span>
+            <span className="text-muted">{item.description}</span>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+};

src/components/menu/Menu.tsx

@@ -2,6 +2,7 @@ import {
   AtSign,
   BellIcon,
   BookmarkIcon,
+  GavelIcon,
   GlobeIcon,
   MailIcon,
   PersonStandingIcon,
@@ -69,10 +70,17 @@ export const MenuAuthed = ({ handle, user }: { handle: string; user: User }) =>
         </Button>
       </Link>
 
-      {/* <Link href={"/c"} > */}
+      <Link href={"/communities"}>
+        <Button variant="ghost" size="sm_icon" className="hidden sm:flex">
+          <div className="hidden sm:flex -mt-1">communities</div>
+          <UsersIcon className="sm:ml-2" size={21} />
+        </Button>
+      </Link>
+
+      {/* <Link href={"/gov"}> */}
       <Button variant="ghost" size="sm_icon" className="hidden sm:flex" disabled>
-        <div className="hidden sm:flex -mt-1">communities</div>
-        <UsersIcon className="sm:ml-2" size={21} />
+        <div className="hidden sm:flex -mt-1">governance</div>
+        <GavelIcon className="sm:ml-2" size={21} />
       </Button>
       {/* </Link> */}