-
Notifications
You must be signed in to change notification settings - Fork 4
Refactor code structure for improved readability and maintainability #29
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,15 +1,7 @@ | ||||||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||||||
| import { faClock, faCode, faTerminal, faServer, faBolt, faFire, faStar, faRocket } from "@fortawesome/free-solid-svg-icons"; | ||||||
| import { Member } from "@/app/types/LeaderboardMember"; | ||||||
|
|
||||||
| type Member = { | ||||||
| user_id: string; | ||||||
| role: string; | ||||||
| email: string; | ||||||
| total_seconds: number; | ||||||
| languages: { name: string }[] | null; | ||||||
| operating_systems: { name: string }[] | null; | ||||||
| editors: { name: string }[] | null; | ||||||
| }; | ||||||
|
|
||||||
| function LeaderboardStats({ members }: { members: Member[] }) { | ||||||
| const totalHours = Math.round( | ||||||
|
|
@@ -114,6 +106,7 @@ export default function LeaderboardTable({ | |||||
| .map((member, index) => ({ | ||||||
| user_id: member.user_id, | ||||||
| rank: index + 1, | ||||||
| name: member.name, | ||||||
| email: member.email, | ||||||
| hours: Math.round((member.total_seconds || 0) / 3600), | ||||||
| role: member.role, | ||||||
|
|
@@ -200,7 +193,7 @@ export default function LeaderboardTable({ | |||||
| ) : ( | ||||||
| <div className="glass-card overflow-hidden"> | ||||||
| {/* Header Row (Desktop) */} | ||||||
| <div className="hidden md:flex items-center px-4 sm:px-6 py-4 border-b border-white/5 bg-white/[0.01] text-[10px] font-bold text-gray-500 uppercase tracking-widest"> | ||||||
| <div className="hidden md:flex items-center px-4 sm:px-6 py-4 border-b border-white/5 bg-white/1 text-[10px] font-bold text-gray-500 uppercase tracking-widest"> | ||||||
| <div className="w-12 shrink-0 text-center">Rank</div> | ||||||
| <div className="flex-1 ml-4">Developer</div> | ||||||
| <div className="w-48 lg:w-72 xl:w-80">Tech Stack</div> | ||||||
|
|
@@ -219,16 +212,16 @@ export default function LeaderboardTable({ | |||||
| <div | ||||||
| key={user.user_id} | ||||||
| className={`group relative flex flex-col md:flex-row items-start md:items-center px-4 sm:px-6 py-4 md:py-4 transition-colors hover:bg-white/[0.02] ${ | ||||||
| isCurrentUser ? "bg-indigo-500/[0.02]" : "bg-transparent" | ||||||
| isCurrentUser ? "bg-indigo-500/2" : "bg-transparent" | ||||||
| }`} | ||||||
| > | ||||||
| {/* Background Progress Bar */} | ||||||
| <div | ||||||
| className="absolute left-0 bottom-0 h-[1px] bg-gradient-to-r from-indigo-500/50 to-transparent" | ||||||
| className="absolute left-0 bottom-0 h-px bg-linear-to-r from-indigo-500/50 to-transparent" | ||||||
| style={{ width: `${pct}%` }} | ||||||
| /> | ||||||
| {isCurrentUser && ( | ||||||
| <div className="absolute left-0 top-0 bottom-0 w-[2px] bg-indigo-500" /> | ||||||
| <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-indigo-500" /> | ||||||
| )} | ||||||
|
|
||||||
| {/* MOBILE TOP ROW / DESKTOP LEFT FLEX */} | ||||||
|
|
@@ -242,13 +235,13 @@ export default function LeaderboardTable({ | |||||
|
|
||||||
| {/* Profile + Badges */} | ||||||
| <div className="flex-1 ml-3 sm:ml-4 min-w-0 flex items-center gap-3"> | ||||||
| <div className="w-8 h-8 sm:w-10 sm:h-10 shrink-0 rounded-lg bg-gradient-to-br from-white/5 to-white/10 border border-white/10 flex items-center justify-center text-[10px] sm:text-sm font-semibold text-gray-300 shadow-sm uppercase"> | ||||||
| {user.email.charAt(0)} | ||||||
| <div className="w-8 h-8 sm:w-10 sm:h-10 shrink-0 rounded-lg bg-linear-to-br from-white/5 to-white/10 border border-white/10 flex items-center justify-center text-[10px] sm:text-sm font-semibold text-gray-300 shadow-sm uppercase"> | ||||||
| {user.name ? user.name : user.email.charAt(0)} | ||||||
| </div> | ||||||
| <div className="flex flex-col min-w-0 gap-1 sm:gap-1.5"> | ||||||
| <div className="flex items-center gap-2"> | ||||||
| <p className="font-semibold text-gray-200 tracking-tight text-sm sm:text-[15px] truncate max-w-[120px] xs:max-w-[160px] sm:max-w-[180px] lg:max-w-[200px] leading-none"> | ||||||
| {user.email.split("@")[0]} | ||||||
| <p className="font-semibold text-gray-200 tracking-tight text-sm sm:text-[15px] truncate max-w-30 xs:max-w-[160px] sm:max-w-45 lg:max-w-50 leading-none"> | ||||||
|
||||||
| <p className="font-semibold text-gray-200 tracking-tight text-sm sm:text-[15px] truncate max-w-30 xs:max-w-[160px] sm:max-w-45 lg:max-w-50 leading-none"> | |
| <p className="font-semibold text-gray-200 tracking-tight text-sm sm:text-[15px] truncate max-w-[120px] xs:max-w-[160px] sm:max-w-[180px] lg:max-w-[200px] leading-none"> |
Copilot
AI
Mar 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sm:pl-17 is not a default Tailwind spacing step (and no custom spacing tokens are defined), so this padding likely won’t be applied. The previous sm:pl-[4.25rem] was explicit and reliable; consider using an arbitrary value again or define a spacing token for 4.25rem.
| <div className="flex flex-col md:flex-row items-start md:items-center w-full md:w-auto mt-4 md:mt-0 pl-11 sm:pl-17 md:pl-0 gap-2.5 md:gap-0"> | |
| <div className="flex flex-col md:flex-row items-start md:items-center w-full md:w-auto mt-4 md:mt-0 pl-11 sm:pl-[4.25rem] md:pl-0 gap-2.5 md:gap-0"> |
Copilot
AI
Mar 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Utilities like max-w-17.5, lg:max-w-22.5, and w-0.75 are not part of Tailwind’s default scales. Without custom theme tokens, these will compile to no CSS, impacting truncation and the separator dot size. Use arbitrary values (e.g. max-w-[70px], w-[3px]) or add theme tokens that define these steps.
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,10 @@ | ||||||
| export interface Member { | ||||||
| user_id: string; | ||||||
| role: string; | ||||||
| name: string | null; | ||||||
|
||||||
| name: string | null; | |
| name?: string | null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typing the Supabase response as
{ error: any }loses useful type safety and can hide real handling issues. Prefer usingPostgrestError | null(from@supabase/supabase-js) orunknownand narrowing, so error handling remains strongly typed.