Skip to content

Commit

Permalink
fix: cycle card grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@hamster1963
hamster1963 committed Dec 3, 2024
1 parent 20b4f47 commit 8811904
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 79 deletions.
47 changes: 25 additions & 22 deletions src/components/CycleTransferStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,32 +14,35 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
return (
<section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
{Object.entries(cycleStats).map(([cycleId, cycleData]) => {
const serverStats = cycleData.server_name
? Object.entries(cycleData.server_name).map(
([serverId, serverName]) => ({
serverId,
serverName,
transfer: cycleData.transfer?.[serverId] || 0,
nextUpdate: cycleData.next_update?.[serverId],
})
)
: [];
if (!cycleData.server_name) {
return null;
}

return Object.entries(cycleData.server_name).map(([serverId, serverName]) => {
const transfer = cycleData.transfer?.[serverId] || 0;
const nextUpdate = cycleData.next_update?.[serverId];

if (serverStats.length === 0) {
if (!transfer && !nextUpdate) {
return null;
}

return (
<CycleTransferStatsClient
key={cycleId}
name={cycleData.name}
from={cycleData.from}
to={cycleData.to}
max={cycleData.max}
serverStats={serverStats}
className={className}
/>
);
return (
<CycleTransferStatsClient
key={`${cycleId}-${serverId}`}
name={cycleData.name}
from={cycleData.from}
to={cycleData.to}
max={cycleData.max}
serverStats={[{
serverId,
serverName,
transfer,
nextUpdate: nextUpdate || "",
}]}
className={className}
/>
);
});
})}
</section>
);
Expand Down
112 changes: 55 additions & 57 deletions src/components/CycleTransferStatsClient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,70 +24,68 @@ export const CycleTransferStatsClient: React.FC<
return (
<div
className={cn(
"w-full space-y-2 bg-white px-4 py-3 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
"w-full bg-white px-4 py-3 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
className,
)}
>
<div className="space-y-1">
<div className="space-y-2">
{serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {
const progress = (transfer / max) * 100;
{serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {
const progress = (transfer / max) * 100;

return (
<div key={serverId} className="space-y-2">
<section className="flex justify-between items-center">
<div className=" bg-green-600 w-fit text-white px-1.5 py-0.5 rounded-full text-[10px]">
{name}
</div>
<span className="text-stone-600 dark:text-stone-400 text-xs">
{new Date(from).toLocaleDateString()} -{" "}
{new Date(to).toLocaleDateString()}
</span>
</section>
<section className="flex justify-between items-center">
<div className="flex gap-1 items-center">
<CircleStackIcon className="size-3 text-neutral-400 dark:text-neutral-600" />
<span className="text-sm font-semibold">{serverName}</span>
</div>
<div className="flex items-center gap-1">
<p className="text-xs text-end w-10 font-medium">
{progress.toFixed(0)}%
</p>
<AnimatedCircularProgressBar
className="size-4 text-[0px]"
max={100}
min={0}
value={progress}
primaryColor="hsl(var(--chart-5))"
/>
</div>
</section>
<div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5">
<div
className="bg-green-600 h-2.5 rounded-full"
style={{ width: `${Math.min(progress, 100)}%` }}
/>
</div>
return (
<div key={serverId}>
<section className="flex justify-between items-center">
<div className="bg-green-600 w-fit text-white px-1.5 py-0.5 rounded-full text-[10px]">
{name}
</div>
<span className="text-stone-600 dark:text-stone-400 text-xs">
{new Date(from).toLocaleDateString()} -{" "}
{new Date(to).toLocaleDateString()}
</span>
</section>

<section className="flex justify-between items-center mt-2">
<div className="flex gap-1 items-center">
<CircleStackIcon className="size-3 text-neutral-400 dark:text-neutral-600" />
<span className="text-sm font-semibold">{serverName}</span>
</div>
<div className="flex items-center gap-1">
<p className="text-xs text-end w-10 font-medium">
{progress.toFixed(0)}%
</p>
<AnimatedCircularProgressBar
className="size-4 text-[0px]"
max={100}
min={0}
value={progress}
primaryColor="hsl(var(--chart-5))"
/>
</div>
</section>

<div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5 mt-2">
<div
className="bg-green-600 h-2.5 rounded-full"
style={{ width: `${Math.min(progress, 100)}%` }}
/>
</div>

<section className="flex justify-between items-center">
<span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium">
{formatBytes(transfer)} used
</span>
<span className="text-xs text-stone-500 dark:text-stone-400 font-normal">
{formatBytes(max)} total
</span>
</section>
<section className="flex justify-between items-center mt-2">
<span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium">
{formatBytes(transfer)} used
</span>
<span className="text-xs text-stone-500 dark:text-stone-400 font-normal">
{formatBytes(max)} total
</span>
</section>

<section className="flex justify-between items-center">
<div className="text-xs text-stone-500 dark:text-stone-400">
Next update: {new Date(nextUpdate).toLocaleString()}
</div>
</section>
<section className="flex justify-between items-center mt-2">
<div className="text-xs text-stone-500 dark:text-stone-400">
Next update: {new Date(nextUpdate).toLocaleString()}
</div>
);
})}
</div>
</div>
</section>
</div>
);
})}
</div>
);
};
Expand Down

0 comments on commit 8811904

Please sign in to comment.