sk1982/actaeon
2
5
Fork 3
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

chuni: separate playlog card badge class

Browse Source
This commit is contained in:
sk1982 2024-03-18 22:03:29 -04:00
parent d69d3a2a87
commit 4e5ade3e6b
3 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(with-header)/chuni/dashboard/page.tsx
View File

@ -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>);

4
src/components/chuni/music-playlog.tsx
View File

@ -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

7
src/components/chuni/playlog-card.tsx
View File

@ -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>