projects/hypixel-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated sidebars with their own component

Browse Source
This commit is contained in:
Taken
2025-09-27 20:01:16 +02:00
parent 0b4747da4a
commit ff1b00ff58
3 changed files with 77 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/(stats)/_components/sidebar.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { cn } from "@/lib/utils"
import { ReactNode } from "react"
export function BasicSidebarItem({ title, value, className }: { title: string, value: string | number, className?: string }) {
return (
<p>
<span className="font-bold">{title}</span>
<span className={cn("text-muted-foreground", className)}>{value}</span>
</p>
)
}
export function SidebarItem({ title, children }: { title: string, children: ReactNode }) {
return (
<div>
<span className="font-bold">{title}</span>
{children}
</div>
)
}

45
src/app/(stats)/guild/[value]/_components/sidebar.tsx
View File

@@ -1,3 +1,4 @@
import { BasicSidebarItem, SidebarItem } from "@/app/(stats)/_components/sidebar"
import { GenericProgress } from "@/app/(stats)/player/[ign]/_components/generic-progress" import { GenericProgress } from "@/app/(stats)/player/[ign]/_components/generic-progress"
import { ReplaceLinks } from "@/components/link-replace" import { ReplaceLinks } from "@/components/link-replace"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -22,7 +23,7 @@ export default function Sidebar({ guild }: SidebarProps) {
const nextXp = getGuildExp(Math.floor(level) + 1) const nextXp = getGuildExp(Math.floor(level) + 1)
return ( return (
<div> <div>
<p className="font-bold">Leveling Progress</p> <SidebarItem title="Leveling Progress">
<div className="flex gap-2 items-center mt-2"> <div className="flex gap-2 items-center mt-2">
<p className={textColor}>{Math.floor(level)}</p> <p className={textColor}>{Math.floor(level)}</p>
<GenericProgress <GenericProgress
@@ -33,6 +34,7 @@ export default function Sidebar({ guild }: SidebarProps) {
/> />
<p className={textColor}>{Math.floor(level) + 1}</p> <p className={textColor}>{Math.floor(level) + 1}</p>
</div> </div>
</SidebarItem>
</div> </div>
) )
} }
@@ -40,18 +42,9 @@ export default function Sidebar({ guild }: SidebarProps) {
function GeneralInfo() { function GeneralInfo() {
return ( return (
<div> <div>
<p> <BasicSidebarItem title="Level: " value={formatNumber(level)} />
<span className="font-bold">{"Level: "}</span> <BasicSidebarItem title="Created: " value={formatDate(guild.created)} />
<span>{formatNumber(level)}</span> <BasicSidebarItem title="Legacy Rank: " value={guild.legacyRanking !== undefined ? formatNumber(guild.legacyRanking) : "None"} />
</p>
<p>
<span className="font-bold">{"Created: "}</span>
<span>{formatDate(guild.created)}</span>
</p>
<p>
<span className="font-bold">{"Legacy Rank: "}</span>
<span>{guild.legacyRanking !== undefined ? formatNumber(guild.legacyRanking) : "None"}</span>
</p>
</div> </div>
) )
} }
@@ -59,18 +52,9 @@ export default function Sidebar({ guild }: SidebarProps) {
function Other() { function Other() {
return ( return (
<div> <div>
<p> <BasicSidebarItem title="Members: " value={guild.members.length} />
<span className="font-bold">{"Members: "}</span> <BasicSidebarItem title="Publicly Listed: " value={guild.publiclyListed === true ? "Yes" : "No"} />
<span>{guild.members.length}</span> <BasicSidebarItem title="Publicly Joinable: " value={guild.joinable === true ? "Yes" : "No"} />
</p>
<p>
<span className="font-bold">{"Publicly Listed: "}</span>
<span>{guild.publiclyListed === true ? "Yes" : "No"}</span>
</p>
<p>
<span className="font-bold">{"Publicly Joinable: "}</span>
<span>{guild.joinable === true ? "Yes" : "No"}</span>
</p>
</div> </div>
) )
} }
@@ -78,17 +62,18 @@ export default function Sidebar({ guild }: SidebarProps) {
function PreferedGames() { function PreferedGames() {
return ( return (
<div> <div>
<p> <SidebarItem title="Preferred Games: ">
<span className="font-bold">{"Preferred Games: "}</span> {guild.preferredGames === undefined ?
{guild.preferredGames === undefined ? <span>No prefered games</span> : ( <span className="text-muted-foreground">No prefered games</span> :
<span> (
<span className="text-muted-foreground">
{guild.preferredGames.map(g => { {guild.preferredGames.map(g => {
const game = getGame(g) const game = getGame(g)
return game?.name || null return game?.name || null
}).filter(g => g !== null).sort().join(", ")} }).filter(g => g !== null).sort().join(", ")}
</span> </span>
)} )}
</p> </SidebarItem>
</div> </div>
) )
} }

112
src/app/(stats)/player/[ign]/_components/sidebar.tsx
View File

@@ -1,3 +1,4 @@
import { BasicSidebarItem, SidebarItem } from "@/app/(stats)/_components/sidebar"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator" import { Separator } from "@/components/ui/separator"
@@ -47,16 +48,12 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
function Coins() { function Coins() {
return ( return (
<div> <div>
<p> <BasicSidebarItem title="Coin multiplier: " value={`x${levelMultiplierVal} ${levelMultiplierText}`} />
<span className="font-bold">{"Coin multiplier: "}</span> <SidebarItem title="Total coins: ">
<span>{`x${levelMultiplierVal} ${levelMultiplierText}`}</span>
</p>
<p>
<span className="font-bold">{"Total coins: "}</span>
<span className="text-mc-gold"> <span className="text-mc-gold">
{formatNumber(getTotalCoins(player.stats))} {formatNumber(getTotalCoins(player.stats))}
</span> </span>
</p> </SidebarItem>
</div> </div>
) )
} }
@@ -82,10 +79,7 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
<span className="font-bold">{": "}</span> <span className="font-bold">{": "}</span>
<span>{formatNumber(getTotalQuests(player.quests))}</span> <span>{formatNumber(getTotalQuests(player.quests))}</span>
</p> </p>
<p> <BasicSidebarItem title="Challenges Completed: " value={formatNumber(getTotalChallenges(player.challenges))} />
<span className="font-bold">{"Challenges Completed: "}</span>
<span>{formatNumber(getTotalChallenges(player.challenges))}</span>
</p>
</div> </div>
) )
} }
@@ -93,26 +87,16 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
function DailyRewards() { function DailyRewards() {
return ( return (
<div> <div>
<p> <SidebarItem title="Today's Reward: ">
<span className="font-bold">{"Today's Reward: "}</span>
<span <span
className={`${rewardClaimed(player.lastClaimedReward) === true ? "font-bold text-mc-green" : undefined}`} className={`${rewardClaimed(player.lastClaimedReward) === true ? "font-bold text-mc-green" : undefined}`}
> >
{rewardClaimed(player.lastClaimedReward) ? "Claimed" : "Unclaimed"} {rewardClaimed(player.lastClaimedReward) ? "Claimed" : "Unclaimed"}
</span> </span>
</p> </SidebarItem>
<p> <BasicSidebarItem title="Rewards Claimed: " value={player.totalRewards ?? 0} />
<span className="font-bold">{"Rewards Claimed: "}</span> <BasicSidebarItem title="Reward Streak: " value={player.rewardStreak ?? 0} />
<span>{player.totalRewards}</span> <BasicSidebarItem title="Top Reward Streak: " value={player.rewardHighScore ?? 0} />
</p>
<p>
<span className="font-bold">{"Reward Streak: "}</span>
<span>{player.rewardStreak}</span>
</p>
<p>
<span className="font-bold">{"Top Reward Streak: "}</span>
<span>{player.rewardHighScore}</span>
</p>
</div> </div>
) )
} }
@@ -120,14 +104,8 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
function Gifting() { function Gifting() {
return ( return (
<div> <div>
<p> <BasicSidebarItem title="Gifts Given: " value={player.giftingMeta?.giftsGiven ?? 0} />
<span className="font-bold">{"Gifts Given: "}</span> <BasicSidebarItem title="Ranks Given: " value={player.giftingMeta?.ranksGiven ?? 0} />
<span>{player.giftingMeta?.giftsGiven ?? 0}</span>
</p>
<p>
<span className="font-bold">{"Ranks Given: "}</span>
<span>{player.giftingMeta?.ranksGiven ?? 0}</span>
</p>
</div> </div>
) )
} }
@@ -135,14 +113,8 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
function Logins() { function Logins() {
return ( return (
<div> <div>
<p> <BasicSidebarItem title="First Login: " value={formatDate(player.firstLogin ?? 0)} />
<span className="font-bold">{"First Login: "}</span> <BasicSidebarItem title="Last Login: " value={formatDate(player.lastLogin ?? 0)} />
<span>{formatDate(player.firstLogin ?? 0)}</span>
</p>
<p>
<span className="font-bold">{"Last Login: "}</span>
<span>{formatDate(player.lastLogin ?? 0)}</span>
</p>
</div> </div>
) )
} }
@@ -167,35 +139,21 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
<Link href={`/guild/${ign}`}> <Link href={`/guild/${ign}`}>
<h1 className="text-xl font-bold underline">Guild</h1> <h1 className="text-xl font-bold underline">Guild</h1>
</Link> </Link>
<p> <SidebarItem title="Name: ">
<span className="font-bold">{"Name: "}</span>
<span className={getColor(guild.tagColor, "text", "gray")}>{guild.name}</span> <span className={getColor(guild.tagColor, "text", "gray")}>{guild.name}</span>
</p> </SidebarItem>
<p> <BasicSidebarItem title="Members: " value={guild.members.length} />
<span className="font-bold">{"Members: "}</span>
<span>{guild.members.length}</span>
</p>
</div> </div>
<div> <div>
<p> <SidebarItem title="Rank: ">
<span className="font-bold">{"Rank: "}</span>
<span>{`${getGuildMember(guild, player.uuid)?.rank} `}</span> <span>{`${getGuildMember(guild, player.uuid)?.rank} `}</span>
<span className={getColor(guild.tagColor, "text", "gray")}> <span className={getColor(guild.tagColor, "text", "gray")}>
{getGuildRankTag(guild, player.uuid)} {getGuildRankTag(guild, player.uuid)}
</span> </span>
</p> </SidebarItem>
<p> <BasicSidebarItem title="Daily GEXP: " value={formatNumber(getMemberGEXP(guild, player.uuid, 0) ?? 0)} />
<span className="font-bold">{"Daily GEXP: "}</span> <BasicSidebarItem title="Weekly GEXP: " value={formatNumber(getMemberWeeklyGEXP(guild, player.uuid) ?? 0)} />
<span>{formatNumber(getMemberGEXP(guild, player.uuid, 0) ?? 0)}</span> <BasicSidebarItem title="Joined: " value={formatDate(getGuildMember(guild, player.uuid)?.joined ?? 0)} />
</p>
<p>
<span className="font-bold">{"Weekly GEXP: "}</span>
<span>{formatNumber(getMemberWeeklyGEXP(guild, player.uuid) ?? 0)}</span>
</p>
<p>
<span className="font-bold">{"Joined: "}</span>
<span>{formatDate(getGuildMember(guild, player.uuid)?.joined ?? 0)}</span>
</p>
</div> </div>
</div> </div>
<Separator className="my-4" /> <Separator className="my-4" />
@@ -209,10 +167,7 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
<> <>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h2 className="text-xl font-bold">Online Status</h2> <h2 className="text-xl font-bold">Online Status</h2>
<p> <BasicSidebarItem title="Status: " value="Offline" />
<span className="font-bold">{"Status: "}</span>
<span>Offline</span>
</p>
</div> </div>
<Separator className="my-4" /> <Separator className="my-4" />
</> </>
@@ -247,24 +202,9 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h2 className="text-xl font-bold">Online Status</h2> <h2 className="text-xl font-bold">Online Status</h2>
<div> <div>
{session.gameType && ( {session.gameType && <BasicSidebarItem title="Game: " value={getGame(session.gameType)?.name || "Unknown"} />}
<p> {showMode && <BasicSidebarItem title="Mode: " value={mode || "Unknown"} />}
<span className="font-bold">{"Game: "}</span> {showMap && <BasicSidebarItem title="Map: " value={session.map || "Unknown"} />}
<span>{getGame(session.gameType)?.name || "Unknown"}</span>
</p>
)}
{showMode && (
<p>
<span className="font-bold">{"Mode: "}</span>
<span>{mode || "Unknown"}</span>
</p>
)}
{showMap && (
<p>
<span className="font-bold">{"Map: "}</span>
<span>{session.map}</span>
</p>
)}
</div> </div>
</div> </div>
<Separator className="my-4" /> <Separator className="my-4" />