feat: add project list sort

app/page.tsx

@@ -1,9 +1,16 @@
 import ProjectList from "@/components/projects/project-list";
 import SearchBar, { SearchBarPlaceholder } from "@/components/ui/search-bar";
+import { ProjectSorts } from "@/lib/project";
 import { Twitter } from "@dub/ui";
 import { Suspense } from "react";
 
-export default function Home() {
+export default function Home({
+  searchParams,
+}: {
+  searchParams?: {
+    sort?: ProjectSorts;
+  };
+}) {
   return (
     <>
       <div className="relative z-10 mx-auto w-full max-w-xl px-5 py-10 xl:px-0">
@@ -45,7 +52,7 @@ export default function Home() {
         className="animate-fade-up opacity-0"
         style={{ animationDelay: "0.35s", animationFillMode: "forwards" }}
       >
-        <ProjectList />
+        <ProjectList sort={searchParams.sort} />
       </div>
     </>
   );

components/projects/project-list.tsx

@@ -1,24 +1,24 @@
 import prisma from "@/lib/prisma";
 import { Suspense } from "react";
 import ProjectGrid from "./project-grid";
+import ProjectSort from "./project-sort";
+import { ProjectSorts, sortOrderBy } from "@/lib/project";
 
-export default function ProjectList() {
+export default function ProjectList({ sort }: {sort?: ProjectSorts;}) {
   return (
     <Suspense fallback={null}>
-      <ProjectListRSC />
+      <ProjectListRSC sort={sort} />
     </Suspense>
   );
 }
 
-async function ProjectListRSC() {
+async function ProjectListRSC({ sort }: {sort?: ProjectSorts;}) {
   const featured = ["gallery", "dub", "ui"];
   const projects = await prisma.project.findMany({
     where: {
       verified: true,
     },
-    orderBy: {
-      stars: "desc",
-    },
+    orderBy: sortOrderBy[sort] ?? sortOrderBy.stars,
   });
 
   const featuredProjects = featured.map((slug) =>
@@ -35,7 +35,11 @@ async function ProjectListRSC() {
       <div className="mb-8 mt-12 border-t border-gray-200" />
 
       <div className="grid gap-4">
-        <h2 className="font-display text-2xl">All Projects</h2>
+        <div className="flex flex-col xs:flex-row gap-2">
+          <h2 className="flex-1 font-display text-2xl">All Projects</h2>
+          <ProjectSort />
+        </div>
+
         <ProjectGrid projects={projects} />
       </div>
     </div>

components/projects/project-sort.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { IconMenu, Popover, Tick, useRouterStuff } from "@dub/ui";
+import { ChevronDown, SortDesc } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useMemo, useState } from "react";
+import Sort from "@/components/ui/icons/sort";
+import { sortOptions } from "@/lib/project";
+
+
+export default function ProjectSort() {
+  const [openPopover, setOpenPopover] = useState(false);
+  const searchParams = useSearchParams();
+  const sort = searchParams?.get("sort");
+  const { queryParams } = useRouterStuff();
+
+  const selectedSort = useMemo(() => {
+    return sortOptions.find((s) => s.slug === sort) || sortOptions[0];
+  }, [sort]);
+
+  return (
+    <Popover
+      content={
+        <div className="w-full p-2 md:w-48">
+          {sortOptions.map(({ display, slug }) => (
+            <button
+              key={slug}
+              onClick={() => {
+                queryParams({
+                  set: {
+                    sort: slug,
+                  },
+                });
+                setOpenPopover(false);
+              }}
+              className="flex w-full items-center justify-between space-x-2 rounded-md px-1 py-2 hover:bg-gray-100 active:bg-gray-200"
+            >
+              <IconMenu
+                text={display}
+                icon={<SortDesc className="h-4 w-4" />}
+              />
+              {selectedSort.slug === slug && (
+                <Tick className="h-4 w-4" aria-hidden="true" />
+              )}
+            </button>
+          ))}
+        </div>
+      }
+      openPopover={openPopover}
+      setOpenPopover={setOpenPopover}
+    >
+      <button
+        onClick={() => setOpenPopover(!openPopover)}
+        className="flex w-48 items-center justify-between space-x-2 rounded-md bg-white px-3 py-2.5 shadow transition-all duration-75 hover:shadow-md"
+      >
+        <IconMenu
+          text={sort ? selectedSort.display : "Sort by"}
+          icon={
+            sort ? (
+              <SortDesc className="h-4 w-4" />
+            ) : (
+              <Sort className="h-4 w-4 shrink-0" />
+            )
+          }
+        />
+        <ChevronDown
+          className={`h-5 w-5 text-gray-400 ${
+            openPopover ? "rotate-180 transform" : ""
+          } transition-all duration-75`}
+        />
+      </button>
+    </Popover>
+  );
+}

components/ui/icons/sort.tsx

@@ -0,0 +1,18 @@
+export default function Sort({ className }: { className: string }) {
+  return (
+    <svg
+      fill="none"
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      className={className}
+    >
+      <path d="M15 18H3M21 6H3M17 12H3" />
+    </svg>
+  );
+}

lib/project.ts

@@ -0,0 +1,34 @@
+import { Project } from "@prisma/client";
+
+export const sorts = ["stars", "newest", "alphabetical"] as const;
+
+export type ProjectSorts = typeof sorts[number];
+
+export const sortOptions: { display: string, slug: ProjectSorts }[] = [
+  {
+    display: "Number of Stars",
+    slug: "stars",
+  },
+  {
+    display: "Newest",
+    slug: "newest",
+  },
+  {
+    display: "A to Z",
+    slug: "alphabetical",
+  },
+];
+
+export type ProjectOrderBy = Record<ProjectSorts, Partial<Record<keyof Project, "asc" | "desc">>>;
+
+export const sortOrderBy: ProjectOrderBy = {
+  alphabetical: {
+    name: "asc"
+  },
+  newest: {
+    createdAt: "desc"
+  },
+  stars: {
+    stars: "desc"
+  }
+}