From 4e5ade3e6b08355c0cdbb68563072ee3c2b72ea8 Mon Sep 17 00:00:00 2001
From: sk1982 <sk1982@noreply.gitea.tendokyu.moe>
Date: Mon, 18 Mar 2024 22:03:29 -0400
Subject: [PATCH] chuni: separate playlog card badge class

---
 src/app/(with-header)/chuni/dashboard/page.tsx | 4 +++-
 src/components/chuni/music-playlog.tsx         | 4 +++-
 src/components/chuni/playlog-card.tsx          | 7 ++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/(with-header)/chuni/dashboard/page.tsx b/src/app/(with-header)/chuni/dashboard/page.tsx
index 39803a9..12fd7f9 100644
--- a/src/app/(with-header)/chuni/dashboard/page.tsx
+++ b/src/app/(with-header)/chuni/dashboard/page.tsx
@@ -31,7 +31,9 @@ export default async function ChuniDashboard() {
 			</div>
 			<div className="text-lg font-semibold px-4 pt-4 border-t border-gray-500 md:hidden">Recent Plays</div>
 			<div className="my-4 w-full flex-grow grid gap-2 grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 5xl:grid-cols-6 6xl:grid-cols-8">
-				{playlog.data.map((entry, i) => <ChuniPlaylogCard className="w-full h-48" playlog={entry} key={i} />)}
+				{playlog.data.map((entry, i) => <ChuniPlaylogCard className="w-full h-48"
+					badgeClass="h-5 lg:h-[1.125rem] xl:h-6 2xl:h-[1.125rem] 4xl:h-6 5xl:h-[1.125rem]"
+					playlog={entry} key={i} />)}
 			</div>
 		</div>
 	</div>);
diff --git a/src/components/chuni/music-playlog.tsx b/src/components/chuni/music-playlog.tsx
index 20e134e..aa18b5e 100644
--- a/src/components/chuni/music-playlog.tsx
+++ b/src/components/chuni/music-playlog.tsx
@@ -78,7 +78,9 @@ export const ChuniMusicPlaylog = ({ music, playlog }: ChuniMusicPlaylogProps) =>
 				{data.playlog.length ? <Accordion selectedKeys={expanded[i]} onSelectionChange={k => setExpanded(e => ({ ...e, [i]: k as any }))}>
 					<AccordionItem key="1" title="Play History">
 						<div className="grid  grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 5xl:grid-cols-6 6xl:grid-cols-8 gap-2">
-							{data.playlog.map(p => <ChuniPlaylogCard key={p.id} playlog={p} className="h-48" />)}
+							{data.playlog.map(p => <ChuniPlaylogCard key={p.id}
+								badgeClass="h-5 sm:h-6 md:h-5 lg:h-[1.125rem] 3xl:h-5"
+								playlog={p} className="h-48" />)}
 						</div>
 					</AccordionItem>
 					</Accordion> : null
diff --git a/src/components/chuni/playlog-card.tsx b/src/components/chuni/playlog-card.tsx
index f2bb9e5..09f4383 100644
--- a/src/components/chuni/playlog-card.tsx
+++ b/src/components/chuni/playlog-card.tsx
@@ -12,7 +12,8 @@ import { Ticker, TickerHoverProvider } from '@/components/ticker';
 
 export type ChuniPlaylogCardProps = {
 	playlog: Awaited<ReturnType<typeof getPlaylog>>['data'][number],
-	className?: string
+	className?: string,
+	badgeClass?: string
 };
 
 const getChangeSign = (val: number) => {
@@ -27,7 +28,7 @@ const getChangeColor = (val: number) => {
 	return 'text-blue-500';
 };
 
-export const ChuniPlaylogCard = ({ playlog, className }: ChuniPlaylogCardProps) => {
+export const ChuniPlaylogCard = ({ playlog, className, badgeClass }: ChuniPlaylogCardProps) => {
 	return (<TickerHoverProvider>{setHover => <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
 		className={`rounded-md bg-content1 relative flex flex-col p-2 pt-1 border border-black/25 ${className ?? ''}`}>
 		<div className="flex">
@@ -61,7 +62,7 @@ export const ChuniPlaylogCard = ({ playlog, className }: ChuniPlaylogCardProps)
 			</div>
 		</div>
 		<div
-			className="h-5 lg:h-[1.125rem] xl:h-6 2xl:h-[1.125rem] 4xl:h-6 5xl:h-[1.125rem] my-auto flex gap-0.5 overflow-hidden">
+			className={`${badgeClass ? badgeClass : 'h-5'} my-auto flex gap-0.5 overflow-hidden`}>
 			<ChuniScoreBadge variant={getVariantFromRank(playlog.rank ?? 0)} className="h-full">
 				{playlog.score?.toLocaleString()}
 			</ChuniScoreBadge>