add

actions/repositories.ts

@@ -801,3 +801,42 @@ export async function getUserStarredRepos(username: string) {
     },
   }));
 }
+
+export async function getPublicUsers(sortBy: "newest" | "oldest" = "newest", limit: number = 20, offset: number = 0) {
+  "use cache";
+  cacheTag("public-users", `public-users:${sortBy}:${offset}`);
+  cacheLife("minutes");
+
+  const allUsers = await db
+    .select({
+      id: users.id,
+      name: users.name,
+      username: users.username,
+      image: users.image,
+      avatarUrl: users.avatarUrl,
+      bio: users.bio,
+      createdAt: users.createdAt,
+      repoCount: sql<number>`(SELECT COUNT(*) FROM repositories WHERE repositories.owner_id = ${users.id} AND repositories.visibility = 'public')`.as("repo_count"),
+    })
+    .from(users)
+    .orderBy(sortBy === "newest" ? desc(users.createdAt) : users.createdAt)
+    .limit(limit + 1)
+    .offset(offset);
+
+  const hasMore = allUsers.length > limit;
+  const result = allUsers.slice(0, limit);
+
+  return {
+    users: result.map((u) => ({
+      id: u.id,
+      name: u.name,
+      username: u.username,
+      image: u.image,
+      avatarUrl: u.avatarUrl,
+      bio: u.bio,
+      createdAt: u.createdAt,
+      repoCount: Number(u.repoCount),
+    })),
+    hasMore,
+  };
+}

app/(main)/explore/page.tsx

@@ -1,18 +1,24 @@
 import { Suspense } from "react";
 import { connection } from "next/server";
 import Link from "next/link";
-import { getPublicRepositories } from "@/actions/repositories";
+import { getPublicRepositories, getPublicUsers } from "@/actions/repositories";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Star, GitBranch, ChevronLeft, ChevronRight, Compass, Clock, Flame, Sparkles, Loader2 } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Star, GitBranch, ChevronLeft, ChevronRight, Compass, Clock, Flame, Sparkles, Users, BookOpen } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 
-const SORT_OPTIONS = [
+const REPO_SORT_OPTIONS = [
   { value: "stars", label: "Most stars", icon: Flame },
   { value: "updated", label: "Recently updated", icon: Clock },
   { value: "created", label: "Newest", icon: Sparkles },
 ] as const;
 
+const USER_SORT_OPTIONS = [
+  { value: "newest", label: "Newest", icon: Sparkles },
+  { value: "oldest", label: "Oldest", icon: Clock },
+] as const;
+
 async function RepoGrid({ sortBy, page, perPage }: { sortBy: "stars" | "updated" | "created"; page: number; perPage: number }) {
   await connection();
   const offset = (page - 1) * perPage;
@@ -65,14 +71,14 @@ async function RepoGrid({ sortBy, page, perPage }: { sortBy: "stars" | "updated"
       {(page > 1 || hasMore) && (
         <div className="flex items-center justify-between mt-8">
           <Button variant="outline" size="sm" asChild disabled={page <= 1}>
-            <Link href={`/explore?sort=${sortBy}&page=${page - 1}`} className={page <= 1 ? "pointer-events-none opacity-50" : ""}>
+            <Link href={`/explore?tab=repositories&sort=${sortBy}&page=${page - 1}`} className={page <= 1 ? "pointer-events-none opacity-50" : ""}>
               <ChevronLeft className="h-4 w-4 mr-1" />
               Previous
             </Link>
           </Button>
           <span className="text-sm text-muted-foreground">Page {page}</span>
           <Button variant="outline" size="sm" asChild disabled={!hasMore}>
-            <Link href={`/explore?sort=${sortBy}&page=${page + 1}`} className={!hasMore ? "pointer-events-none opacity-50" : ""}>
+            <Link href={`/explore?tab=repositories&sort=${sortBy}&page=${page + 1}`} className={!hasMore ? "pointer-events-none opacity-50" : ""}>
               Next
               <ChevronRight className="h-4 w-4 ml-1" />
             </Link>
@@ -83,7 +89,73 @@ async function RepoGrid({ sortBy, page, perPage }: { sortBy: "stars" | "updated"
   );
 }
 
-function RepoGridSkeleton() {
+async function UserGrid({ sortBy, page, perPage }: { sortBy: "newest" | "oldest"; page: number; perPage: number }) {
+  await connection();
+  const offset = (page - 1) * perPage;
+  const { users, hasMore } = await getPublicUsers(sortBy, perPage, offset);
+
+  if (users.length === 0) {
+    return (
+      <div className="border border-dashed border-border rounded-xl p-12 text-center bg-card/30">
+        <Users className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+        <h3 className="text-lg font-semibold mb-2">No users yet</h3>
+        <p className="text-muted-foreground">Be the first to join!</p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="grid gap-4 md:grid-cols-2">
+        {users.map((user) => (
+          <Link
+            key={user.id}
+            href={`/${user.username}`}
+            className="border border-border rounded-xl p-5 bg-card hover:border-accent/50 transition-colors block"
+          >
+            <div className="flex items-start gap-4">
+              <Avatar className="h-12 w-12 shrink-0">
+                <AvatarImage src={user.avatarUrl || user.image || undefined} />
+                <AvatarFallback className="bg-accent/20 text-lg">{user.name?.charAt(0).toUpperCase() || "U"}</AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0">
+                <p className="font-semibold truncate">{user.name}</p>
+                <p className="text-sm text-muted-foreground">@{user.username}</p>
+                {user.bio && <p className="text-sm text-muted-foreground mt-2 line-clamp-2">{user.bio}</p>}
+                <div className="flex items-center gap-4 mt-3 text-sm text-muted-foreground">
+                  <div className="flex items-center gap-1">
+                    <BookOpen className="h-4 w-4" />
+                    <span>{user.repoCount} {user.repoCount === 1 ? "repository" : "repositories"}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {(page > 1 || hasMore) && (
+        <div className="flex items-center justify-between mt-8">
+          <Button variant="outline" size="sm" asChild disabled={page <= 1}>
+            <Link href={`/explore?tab=users&usort=${sortBy}&upage=${page - 1}`} className={page <= 1 ? "pointer-events-none opacity-50" : ""}>
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              Previous
+            </Link>
+          </Button>
+          <span className="text-sm text-muted-foreground">Page {page}</span>
+          <Button variant="outline" size="sm" asChild disabled={!hasMore}>
+            <Link href={`/explore?tab=users&usort=${sortBy}&upage=${page + 1}`} className={!hasMore ? "pointer-events-none opacity-50" : ""}>
+              Next
+              <ChevronRight className="h-4 w-4 ml-1" />
+            </Link>
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}
+
+function GridSkeleton() {
   return (
     <div className="space-y-4">
       {[...Array(5)].map((_, i) => (
@@ -105,10 +177,36 @@ function RepoGridSkeleton() {
   );
 }
 
-export default async function ExplorePage({ searchParams }: { searchParams: Promise<{ sort?: string; page?: string }> }) {
+function UserGridSkeleton() {
-  const { sort: sortParam, page: pageParam } = await searchParams;
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      {[...Array(6)].map((_, i) => (
+        <div key={i} className="border border-border rounded-xl p-5 bg-card animate-pulse">
+          <div className="flex items-start gap-4">
+            <div className="h-12 w-12 rounded-full bg-muted" />
+            <div className="flex-1">
+              <div className="h-5 bg-muted rounded w-1/2 mb-2" />
+              <div className="h-4 bg-muted rounded w-1/3 mb-3" />
+              <div className="h-4 bg-muted rounded w-20" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default async function ExplorePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ tab?: string; sort?: string; page?: string; usort?: string; upage?: string }>;
+}) {
+  const { tab, sort: sortParam, page: pageParam, usort: usortParam, upage: upageParam } = await searchParams;
+  const activeTab = tab === "users" ? "users" : "repositories";
   const sortBy = (["stars", "updated", "created"].includes(sortParam || "") ? sortParam : "stars") as "stars" | "updated" | "created";
   const page = parseInt(pageParam || "1", 10);
+  const userSortBy = (["newest", "oldest"].includes(usortParam || "") ? usortParam : "newest") as "newest" | "oldest";
+  const userPage = parseInt(upageParam || "1", 10);
   const perPage = 20;
 
   return (
@@ -118,23 +216,59 @@ export default async function ExplorePage({ searchParams }: { searchParams: Prom
           <Compass className="h-8 w-8 text-accent" />
           <h1 className="text-3xl font-bold">Explore</h1>
         </div>
-        <p className="text-muted-foreground">Discover public repositories from the community</p>
+        <p className="text-muted-foreground">Discover repositories and users from the community</p>
       </div>
 
-      <div className="flex flex-wrap items-center gap-2 mb-6">
+      <Tabs defaultValue={activeTab} className="space-y-6">
-        {SORT_OPTIONS.map(({ value, label, icon: Icon }) => (
+        <TabsList>
-          <Button key={value} variant={sortBy === value ? "default" : "outline"} size="sm" asChild className="gap-2">
+          <TabsTrigger value="repositories" asChild>
-            <Link href={`/explore?sort=${value}`}>
+            <Link href="/explore?tab=repositories">
-              <Icon className="h-4 w-4" />
+              <BookOpen className="h-4 w-4" />
-              {label}
+              Repositories
             </Link>
-          </Button>
+          </TabsTrigger>
-        ))}
+          <TabsTrigger value="users" asChild>
-      </div>
+            <Link href="/explore?tab=users">
+              <Users className="h-4 w-4" />
+              Users
+            </Link>
+          </TabsTrigger>
+        </TabsList>
 
-      <Suspense fallback={<RepoGridSkeleton />}>
+        <TabsContent value="repositories">
-        <RepoGrid sortBy={sortBy} page={page} perPage={perPage} />
+          <div className="flex flex-wrap items-center gap-2 mb-6">
-      </Suspense>
+            {REPO_SORT_OPTIONS.map(({ value, label, icon: Icon }) => (
+              <Button key={value} variant={sortBy === value ? "default" : "outline"} size="sm" asChild className="gap-2">
+                <Link href={`/explore?tab=repositories&sort=${value}`}>
+                  <Icon className="h-4 w-4" />
+                  {label}
+                </Link>
+              </Button>
+            ))}
+          </div>
+
+          <Suspense fallback={<GridSkeleton />}>
+            <RepoGrid sortBy={sortBy} page={page} perPage={perPage} />
+          </Suspense>
+        </TabsContent>
+
+        <TabsContent value="users">
+          <div className="flex flex-wrap items-center gap-2 mb-6">
+            {USER_SORT_OPTIONS.map(({ value, label, icon: Icon }) => (
+              <Button key={value} variant={userSortBy === value ? "default" : "outline"} size="sm" asChild className="gap-2">
+                <Link href={`/explore?tab=users&usort=${value}`}>
+                  <Icon className="h-4 w-4" />
+                  {label}
+                </Link>
+              </Button>
+            ))}
+          </div>
+
+          <Suspense fallback={<UserGridSkeleton />}>
+            <UserGrid sortBy={userSortBy} page={userPage} perPage={perPage} />
+          </Suspense>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }