Updated sidebar
This commit is contained in:
@@ -25,102 +25,155 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
|
||||
const levelMultiplierVal = levelMultiplier.value
|
||||
const levelMultiplierText = levelMultiplier.level === true ? `(Level ${level.toFixed(1).split(".")[0]})` : `(${levelMultiplier.name})`
|
||||
|
||||
function General() {
|
||||
return (
|
||||
<div className="flex justify-between px-8">
|
||||
<div className="text-center">
|
||||
<p>Hypixel level</p>
|
||||
<p>{level.toFixed(2)}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p>Karma</p>
|
||||
<p className="text-mc-light-purple">{formatNumber(player.karma)}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Coins() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Coin multiplier: "}</span>
|
||||
<span>{`x${levelMultiplierVal} ${levelMultiplierText}`}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Total coins: "}</span>
|
||||
<span className="text-mc-gold">
|
||||
{formatNumber(getTotalCoins(player.stats as Record<string, Record<"coins", number | undefined>>))}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Other() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span>
|
||||
<Link href={`/achievements/${ign}`} className="font-bold underline">
|
||||
Achievement Points
|
||||
</Link>
|
||||
</span>
|
||||
<span className="font-bold">{": "}</span>
|
||||
<span>{formatNumber(player.achievementPoints ?? 0)}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>
|
||||
<Link href={`/quests/${ign}`} className="font-bold underline">
|
||||
Quests Completed
|
||||
</Link>
|
||||
</span>
|
||||
<span className="font-bold">{": "}</span>
|
||||
<span>{formatNumber(getTotalQuests(player.quests))}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Challenges Completed: "}</span>
|
||||
<span>{formatNumber(getTotalChallenges(player.challenges))}</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DailyRewards() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Today's Reward: "}</span>
|
||||
<span
|
||||
className={`${rewardClaimed(player.lastClaimedReward) === true ? "font-bold text-mc-green" : undefined}`}
|
||||
>
|
||||
{rewardClaimed(player.lastClaimedReward) ? "Claimed" : "Unclaimed"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Rewards Claimed: "}</span>
|
||||
<span>{player.totalRewards}</span>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
function Gifting() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Gifts Given: "}</span>
|
||||
<span>{player.giftingMeta?.giftsGiven ?? 0}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Ranks Given: "}</span>
|
||||
<span>{player.giftingMeta?.ranksGiven ?? 0}</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Logins() {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"First Login: "}</span>
|
||||
<span>{formatDate(player.firstLogin ?? 0)}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Last Login: "}</span>
|
||||
<span>{formatDate(player.lastLogin ?? 0)}</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SoicalLinks() {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-xl font-bold underline">Social Links</h1>
|
||||
<div className="flex gap-2">
|
||||
<SocialIcons
|
||||
discord={player?.socialMedia?.links?.DISCORD}
|
||||
twitch={player?.socialMedia?.links?.TWITCH}
|
||||
youtube={player?.socialMedia?.links?.YOUTUBE}
|
||||
twitter={player?.socialMedia?.links?.TWITCH}
|
||||
hypixel={player?.socialMedia?.links?.HYPIXEL}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-1/4">
|
||||
<CardContent>
|
||||
<div className="flex justify-between px-8">
|
||||
<div className="text-center">
|
||||
<p>Hypixel level</p>
|
||||
<p>{level.toFixed(2)}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p>Karma</p>
|
||||
<p className="text-mc-light-purple">{formatNumber(player.karma)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<General />
|
||||
<Separator className="my-4" />
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Coin multiplier: "}</span>
|
||||
<span>{`x${levelMultiplierVal} ${levelMultiplierText}`}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Total coins: "}</span>
|
||||
<span className="text-mc-gold">
|
||||
{formatNumber(getTotalCoins(player.stats as Record<string, Record<"coins", number | undefined>>))}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<Coins />
|
||||
<Separator className="my-4" />
|
||||
<div>
|
||||
<p>
|
||||
<span>
|
||||
<Link href={`/achievements/${ign}`} className="font-bold underline">
|
||||
Achievement Points
|
||||
</Link>
|
||||
</span>
|
||||
<span className="font-bold">{": "}</span>
|
||||
<span>{formatNumber(player.achievementPoints ?? 0)}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>
|
||||
<Link href={`/quests/${ign}`} className="font-bold underline">
|
||||
Quests Completed
|
||||
</Link>
|
||||
</span>
|
||||
<span className="font-bold">{": "}</span>
|
||||
<span>{formatNumber(getTotalQuests(player.quests))}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Challenges Completed: "}</span>
|
||||
<span>{formatNumber(getTotalChallenges(player.challenges))}</span>
|
||||
</p>
|
||||
</div>
|
||||
<Other />
|
||||
<Separator className="my-4" />
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Today's Reward: "}</span>
|
||||
<span
|
||||
className={`${rewardClaimed(player.lastClaimedReward) === true ? "font-bold text-mc-green" : undefined}`}
|
||||
>
|
||||
{rewardClaimed(player.lastClaimedReward) ? "Claimed" : "Unclaimed"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Rewards Claimed: "}</span>
|
||||
<span>{player.totalRewards}</span>
|
||||
</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>
|
||||
<DailyRewards />
|
||||
<Separator className="my-4" />
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"Gifts Given: "}</span>
|
||||
<span>{player.giftingMeta?.giftsGiven ?? 0}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Ranks Given: "}</span>
|
||||
<span>{player.giftingMeta?.ranksGiven ?? 0}</span>
|
||||
</p>
|
||||
</div>
|
||||
<Gifting />
|
||||
<Separator className="my-4" />
|
||||
<div>
|
||||
<p>
|
||||
<span className="font-bold">{"First Login: "}</span>
|
||||
<span>{formatDate(player.firstLogin ?? 0)}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">{"Last Login: "}</span>
|
||||
<span>{formatDate(player.lastLogin ?? 0)}</span>
|
||||
</p>
|
||||
</div>
|
||||
<Logins />
|
||||
<Separator className="my-4" />
|
||||
{guild && (
|
||||
<>
|
||||
@@ -163,18 +216,7 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
|
||||
<Separator className="my-4" />
|
||||
</>
|
||||
)}
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-xl font-bold underline">Social Links</h1>
|
||||
<div className="flex gap-2">
|
||||
<SocialIcons
|
||||
discord={player?.socialMedia?.links?.DISCORD}
|
||||
twitch={player?.socialMedia?.links?.TWITCH}
|
||||
youtube={player?.socialMedia?.links?.YOUTUBE}
|
||||
twitter={player?.socialMedia?.links?.TWITCH}
|
||||
hypixel={player?.socialMedia?.links?.HYPIXEL}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SoicalLinks />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user