mirror of
https://gitbruv.vercel.app/api/git/bruv/gitbruv.git
synced 2025-12-20 23:24:09 +01:00
add
This commit is contained in:
Ahmet Kilinc
parent
2a92cf6f0a
commit
3504711521
2 changed files with 194 additions and 21 deletions
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }> }) {
|
||||
const { sort: sortParam, page: pageParam } = await searchParams;
|
||||
function UserGridSkeleton() {
|
||||
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">
|
||||
{SORT_OPTIONS.map(({ value, label, icon: Icon }) => (
|
||||
<Button key={value} variant={sortBy === value ? "default" : "outline"} size="sm" asChild className="gap-2">
|
||||
<Link href={`/explore?sort=${value}`}>
|
||||
<Icon className="h-4 w-4" />
|
||||
{label}
|
||||
<Tabs defaultValue={activeTab} className="space-y-6">
|
||||
<TabsList>
|
||||
<TabsTrigger value="repositories" asChild>
|
||||
<Link href="/explore?tab=repositories">
|
||||
<BookOpen className="h-4 w-4" />
|
||||
Repositories
|
||||
</Link>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="users" asChild>
|
||||
<Link href="/explore?tab=users">
|
||||
<Users className="h-4 w-4" />
|
||||
Users
|
||||
</Link>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<Suspense fallback={<RepoGridSkeleton />}>
|
||||
<RepoGrid sortBy={sortBy} page={page} perPage={perPage} />
|
||||
</Suspense>
|
||||
<TabsContent value="repositories">
|
||||
<div className="flex flex-wrap items-center gap-2 mb-6">
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue