Error063/actaeon
1
0
Fork 0
forked from sk1982/actaeon
Code Pull Requests 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>
<div className="text-lg font-semibold px-4 pt-4 border-t border-gray-500 md:hidden">Recent Plays</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"> <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> </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 }))}> {data.playlog.length ? <Accordion selectedKeys={expanded[i]} onSelectionChange={k => setExpanded(e => ({ ...e, [i]: k as any }))}>
<AccordionItem key="1" title="Play History"> <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"> <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> </div>
</AccordionItem> </AccordionItem>
</Accordion> : null </Accordion> : null

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

@ -12,7 +12,8 @@ import { Ticker, TickerHoverProvider } from '@/components/ticker';
export type ChuniPlaylogCardProps = { export type ChuniPlaylogCardProps = {
playlog: Awaited<ReturnType<typeof getPlaylog>>['data'][number], playlog: Awaited<ReturnType<typeof getPlaylog>>['data'][number],
className?: string className?: string,
badgeClass?: string
}; };
const getChangeSign = (val: number) => { const getChangeSign = (val: number) => {
@ -27,7 +28,7 @@ const getChangeColor = (val: number) => {
return 'text-blue-500'; 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)} 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 ?? ''}`}> className={`rounded-md bg-content1 relative flex flex-col p-2 pt-1 border border-black/25 ${className ?? ''}`}>
<div className="flex"> <div className="flex">
@ -61,7 +62,7 @@ export const ChuniPlaylogCard = ({ playlog, className }: ChuniPlaylogCardProps)
</div> </div>
</div> </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"> <ChuniScoreBadge variant={getVariantFromRank(playlog.rank ?? 0)} className="h-full">
{playlog.score?.toLocaleString()} {playlog.score?.toLocaleString()}
</ChuniScoreBadge> </ChuniScoreBadge>