mirror of
https://github.com/khairul169/github-leaderboard.git
synced 2026-10-13 06:13:54 +07:00
feat: add leaderboard category
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
import { cn, dummyAvatar } from "@client/lib/utils";
|
||||
import { Badge } from "react-daisyui";
|
||||
import { FaTrophy } from "react-icons/fa";
|
||||
import Lottie from "react-lottie";
|
||||
import starsAnimation from "@client/assets/stars-animation.json";
|
||||
|
||||
type RankBoardProps = {
|
||||
name: string;
|
||||
avatar?: string | null;
|
||||
sub: string;
|
||||
rank: number;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
const RankBoard = ({ name, avatar, sub, rank, onClick }: RankBoardProps) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex flex-col items-center rounded-lg py-4 transition-all relative cursor-default",
|
||||
onClick != null &&
|
||||
"hover:bg-neutral/70 active:scale-x-105 cursor-pointer"
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{rank === 1 ? (
|
||||
<>
|
||||
<div className="absolute z-0 top-1/2 -translate-y-1/2 scale-125 left-0 pointer-events-none">
|
||||
<Lottie
|
||||
options={{
|
||||
animationData: starsAnimation,
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<FaTrophy size={32} className="text-yellow-400" />
|
||||
<p className="text-gray-900 absolute top-0 left-1/2 -translate-x-1/2 z-[1] font-bold text-center">
|
||||
{rank}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Badge color="primary">{rank}</Badge>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"mt-4 z-[1] size-[64px] rounded-full overflow-hidden bg-base-300 ring-4 ring-neutral ring-offset-2",
|
||||
rank === 1 && "size-[96px]"
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={avatar || dummyAvatar(rank)}
|
||||
className={cn("size-[64px] scale-110", rank === 1 && "size-[96px]")}
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-4 text-sm">{name}</p>
|
||||
<p className="text-xs mt-0.5 text-base-content/80">{sub}</p>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default RankBoard;
|
||||
@@ -0,0 +1,89 @@
|
||||
import { cn, dummyAvatar } from "@client/lib/utils";
|
||||
import { Badge } from "react-daisyui";
|
||||
import { LeaderboardColumn, LeaderboardEntry } from "../hooks";
|
||||
import Avatar from "@client/components/ui/avatar";
|
||||
|
||||
type RankListItemProps = {
|
||||
rank: number;
|
||||
columns: LeaderboardColumn[];
|
||||
data: LeaderboardEntry;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
const RankListItem = ({
|
||||
rank,
|
||||
columns,
|
||||
data,
|
||||
className,
|
||||
onClick,
|
||||
}: RankListItemProps) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex flex-row w-full items-center gap-x-2 text-left text-sm p-4 hover:bg-neutral/70 transition-all cursor-default",
|
||||
rank % 2 === 0 && "bg-base-100/50",
|
||||
onClick != null && "active:scale-x-105 cursor-pointer",
|
||||
className
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="w-10">
|
||||
<Badge
|
||||
color="primary"
|
||||
variant={rank > 10 ? "outline" : undefined}
|
||||
size="sm"
|
||||
>
|
||||
{rank}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{columns.map((col, idx) => {
|
||||
const value = (data as any)[col.selector];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={cn(
|
||||
"flex-1 truncate",
|
||||
idx === 0 && data.image
|
||||
? "flex flex-row items-center gap-x-2"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
{idx === 0 && data.image ? (
|
||||
<Avatar
|
||||
src={data.image}
|
||||
fallback={dummyAvatar(idx + 1)}
|
||||
shape="circle"
|
||||
size={24}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<p className="truncate">{value}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
type RankListHeaderProps = {
|
||||
columns: LeaderboardColumn[];
|
||||
};
|
||||
|
||||
export const RankListHeader = ({ columns }: RankListHeaderProps) => {
|
||||
return (
|
||||
<div className="flex flex-row items-center gap-x-2 w-full text-sm bg-base-300 text-base-content/80 p-4 py-2 mt-2 sticky z-[2] top-0 rounded-lg">
|
||||
<div className="w-10" />
|
||||
{columns.map((col, idx) => (
|
||||
<p key={idx} className="flex-1">
|
||||
{col.title}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RankListItem;
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Tabs } from "react-daisyui";
|
||||
import { useLeaderboardType } from "../hooks";
|
||||
import { leaderboardTypes } from "../data";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const TypeTabs = () => {
|
||||
const [type] = useLeaderboardType();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Tabs variant="boxed" className="mt-2 overflow-x-auto">
|
||||
{leaderboardTypes.map((item) => (
|
||||
<Tabs.Tab
|
||||
key={item.value}
|
||||
active={item.value === type}
|
||||
onClick={() => navigate(`/${item.value}`)}
|
||||
className="shrink-0 min-w-[140px]"
|
||||
>
|
||||
{item.title}
|
||||
</Tabs.Tab>
|
||||
))}
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default TypeTabs;
|
||||
@@ -0,0 +1,59 @@
|
||||
import { useGetUserLeaderboard, useLeaderboardType } from "../hooks";
|
||||
import { onLogin, useAuth } from "@client/hooks/useAuth";
|
||||
import RankListItem from "./rank-list-item";
|
||||
import { Button } from "react-daisyui";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { memo } from "react";
|
||||
|
||||
const UserRank = () => {
|
||||
const [type] = useLeaderboardType();
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const { data } = useGetUserLeaderboard(user?.username);
|
||||
|
||||
const onView = (username: string) => {
|
||||
navigate(`/${type}/${username}`);
|
||||
};
|
||||
|
||||
if (type !== "user") {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="bg-base-100 mx-4 rounded-lg px-6 py-4 sticky bottom-4 z-[2]">
|
||||
<p>Pengen nama kamu masuk list ini juga?</p>
|
||||
<p className="inline">Hayuk</p>
|
||||
<Button size="sm" color="primary" className="mx-2" onClick={onLogin}>
|
||||
<FaGithub />
|
||||
<p>Login</p>
|
||||
</Button>
|
||||
<p className="inline">{"⸜(｡˃ ᵕ ˂ )⸝♡"}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="text-sm text-base-content/80 mx-4 my-2">Kamu:</p>
|
||||
<RankListItem
|
||||
rank={data.user.rank}
|
||||
columns={[
|
||||
{ title: "Nama", selector: "name" },
|
||||
{ title: "Points", selector: "sub" },
|
||||
]}
|
||||
data={{
|
||||
name: data.user.name,
|
||||
sub: `${data.user.points} pts`,
|
||||
image: data.user.avatar,
|
||||
rank: data.user.rank,
|
||||
}}
|
||||
className="sticky z-[2] bottom-0 bg-base-100"
|
||||
onClick={() => onView(data.user.username)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(UserRank);
|
||||
@@ -0,0 +1,223 @@
|
||||
import BottomSheet, {
|
||||
BottomSheetDescription,
|
||||
BottomSheetTitle,
|
||||
} from "@client/components/ui/bottom-sheet";
|
||||
import { memo, useEffect, useMemo } from "react";
|
||||
import { Avatar, Badge, Card, Progress } from "react-daisyui";
|
||||
import { useGetUserLeaderboard } from "../hooks";
|
||||
import { dummyAvatar } from "@client/lib/utils";
|
||||
import { FiGitMerge, FiStar, FiType, FiUsers } from "react-icons/fi";
|
||||
import { FaCode, FaRegStar, FaTrophy } from "react-icons/fa";
|
||||
import { LuFolderGit } from "react-icons/lu";
|
||||
import { IoMdGitBranch, IoMdGitCommit } from "react-icons/io";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
const ViewSheet = () => {
|
||||
const { type, id } = useParams();
|
||||
const username = type === "user" ? id : null;
|
||||
const { data, refetch } = useGetUserLeaderboard(username);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const totalRepo = useMemo(() => {
|
||||
return data?.repositories.length || 0;
|
||||
}, [data]);
|
||||
const pendingRepos = useMemo(() => {
|
||||
return data?.repositories.filter((i) => i.isPending).length || 0;
|
||||
}, [data]);
|
||||
|
||||
console.log({ pendingRepos, totalRepo });
|
||||
|
||||
useEffect(() => {
|
||||
if (!pendingRepos) {
|
||||
return;
|
||||
}
|
||||
|
||||
const interval = setInterval(refetch, 3000);
|
||||
return () => clearInterval(interval);
|
||||
}, [pendingRepos]);
|
||||
|
||||
const summary = useMemo(() => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
icon: LuFolderGit,
|
||||
name: "Personal repo",
|
||||
value: totalRepo,
|
||||
},
|
||||
{
|
||||
icon: FaRegStar,
|
||||
name: "Stars",
|
||||
value: data.repositories.reduce((acc, repo) => acc + repo.stars, 0),
|
||||
},
|
||||
{
|
||||
icon: IoMdGitBranch,
|
||||
name: "Forks",
|
||||
value: data.repositories.reduce((acc, repo) => acc + repo.forks, 0),
|
||||
},
|
||||
{
|
||||
icon: IoMdGitCommit,
|
||||
name: "Commits",
|
||||
value: data.user.commits,
|
||||
},
|
||||
{
|
||||
icon: FiType,
|
||||
name: "Lines of code",
|
||||
value: data.user.lineOfCodes,
|
||||
},
|
||||
{
|
||||
icon: FaCode,
|
||||
name: "Languages",
|
||||
value: data.languages.length,
|
||||
},
|
||||
];
|
||||
}, [data, totalRepo]);
|
||||
|
||||
const achievements = useMemo(() => {
|
||||
const items: Record<string, { name: string; image?: string }> = {};
|
||||
|
||||
data?.user.achievements?.forEach((item) => {
|
||||
items[item.name] = item;
|
||||
});
|
||||
|
||||
return Object.values(items);
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<BottomSheet
|
||||
open={!!username}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) navigate("/user", { replace: true });
|
||||
}}
|
||||
className="h-[90%]"
|
||||
>
|
||||
<div className="p-4 md:p-8 flex-1 overflow-y-auto">
|
||||
<div className="text-center flex flex-col md:flex-row md:text-left gap-x-8 gap-y-4 items-center">
|
||||
<Avatar
|
||||
shape="circle"
|
||||
size="md"
|
||||
src={data?.user.avatar || dummyAvatar(data?.user.id)}
|
||||
/>
|
||||
|
||||
<div className="md:flex-1">
|
||||
<BottomSheetTitle>{data?.user.name}</BottomSheetTitle>
|
||||
<BottomSheetDescription>
|
||||
{"@" + (data?.user.username || "")}
|
||||
</BottomSheetDescription>
|
||||
|
||||
<p className="text-sm mt-4">
|
||||
<FiUsers className="inline" />{" "}
|
||||
{data?.user?.followers + " followers"}
|
||||
{" • "}
|
||||
{data?.user?.following + " following"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-neutral text-neutral-content px-6 py-3 w-full md:w-auto rounded-lg">
|
||||
<div className="flex flex-row items-center justify-center font-mono gap-2 text-4xl md:text-3xl text-primary">
|
||||
<FaTrophy size={24} />
|
||||
<p>{data?.user.rank}</p>
|
||||
</div>
|
||||
<p className="text-xs">{data?.user.points + " pts"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data && pendingRepos > 0 && (
|
||||
<Card compact className="mt-4 md:mt-8 bg-base-300">
|
||||
<Card.Body>
|
||||
<Card.Title className="text-sm font-normal">
|
||||
Mengimport data repositori, mohon tunggu...
|
||||
</Card.Title>
|
||||
<Progress
|
||||
max={100}
|
||||
value={((totalRepo - pendingRepos) / totalRepo) * 100}
|
||||
/>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{achievements.length > 0 && (
|
||||
<section id="achievements" className="mt-4 md:mt-8">
|
||||
<div className="flex flex-row sm:flex-wrap overflow-x-auto sm:overflow-hidden gap-2">
|
||||
{achievements.map((item) => (
|
||||
<div key={item.name} className="size-12 shrink-0">
|
||||
<img src={item.image} title={item.name} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{data?.languages && data.languages.length > 0 && (
|
||||
<section id="languages" className="mt-4 md:mt-8">
|
||||
<div className="flex flex-row sm:flex-wrap overflow-x-auto gap-2 mt-2">
|
||||
{data?.languages.slice(0, 10).map((lang) => (
|
||||
<div
|
||||
key={lang.name}
|
||||
className="bg-base-300 shrink-0 rounded-xl px-3 py-2 text-xs inline-flex gap-2"
|
||||
>
|
||||
<p>{lang.name}</p>
|
||||
<Badge color="primary" size="sm" className="px-1">
|
||||
{lang.percent.toFixed(1) + "%"}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mt-8 grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{summary.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex flex-row items-center gap-x-4 bg-base-300 rounded-xl px-4 py-3"
|
||||
>
|
||||
<item.icon size={24} className="shrink-0 md:ml-2" />
|
||||
<div className="flex-1 truncate">
|
||||
<p
|
||||
className="text-2xl font-mono truncate"
|
||||
title={String(item.value)}
|
||||
>
|
||||
{item.value}
|
||||
</p>
|
||||
<p className="text-xs truncate">{item.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="mt-8 grid">
|
||||
<p>Top Repositori</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-2">
|
||||
{data?.repositories.slice(0, 3).map((item, idx) => (
|
||||
<a
|
||||
href={`https://github.com/${username}/${item.name}`}
|
||||
target="_blank"
|
||||
key={idx}
|
||||
className="rounded-xl px-4 py-3 bg-base-300 hover:bg-base-200 transition-all border border-base-content/50"
|
||||
>
|
||||
<LuFolderGit size={18} />
|
||||
<div className="flex-1 truncate">
|
||||
<p className="mt-1 truncate">{item.name}</p>
|
||||
<p className="text-xs truncate mt-0.5 text-base-content/80">
|
||||
{item.languages?.map((i) => i.lang).join(", ") ||
|
||||
item.language}
|
||||
</p>
|
||||
|
||||
<p className="flex flex-wrap items-center gap-1 text-xs mt-4">
|
||||
<FiStar size={18} /> {item.stars}
|
||||
<FiGitMerge size={18} className="ml-2" /> {item.forks}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ViewSheet);
|
||||
Reference in New Issue
Block a user