mirror of
https://github.com/Buriburizaem0n/nezha-dash-v1.git
synced 2026-05-06 05:48:41 +00:00
hamster1963
746f890d65
- Adjusted hover shadow effects in CycleTransferStatsClient for better visual feedback. - Fixed aspect ratio class in GlobalMap for consistent rendering. - Updated font weight in GroupSwitch for improved readability. - Modified Separator width class in Header for consistency across components. - Enhanced button hover effects in NetworkChartClient for better user interaction. - Adjusted margin class in ServerDetailOverview for better alignment. - Updated margin classes in ServerOverview for consistent spacing. - Refined background gradient classes in ServiceTrackerClient for better color management. - Standardized font weight in TabSwitch for consistency. - Corrected stroke color class in AnimatedCircularProgressBar for better theming. - Improved focus outline handling in badge and button components for better accessibility. - Updated chart component styles for improved visual hierarchy. - Adjusted checkbox focus outline for better accessibility. - Enhanced command dialog styles for improved usability. - Updated dialog close button focus outline for better accessibility. - Refined dropdown menu styles for improved usability and consistency. - Adjusted input focus outline for better accessibility. - Improved popover content styles for better visibility. - Updated select component styles for improved usability. - Refined separator height classes for consistency. - Enhanced switch component focus outline for better accessibility. - Updated table footer styles for improved visual consistency. - Refactored global CSS to use new Tailwind CSS configuration and improved theming. - Removed outdated Tailwind configuration file.
80 lines
3.0 KiB
TypeScript
80 lines
3.0 KiB
TypeScript
import { formatBytes } from "@/lib/format"
|
|
import { cn } from "@/lib/utils"
|
|
import React from "react"
|
|
import { useTranslation } from "react-i18next"
|
|
|
|
interface CycleTransferStatsClientProps {
|
|
name: string
|
|
from: string
|
|
to: string
|
|
max: number
|
|
serverStats: Array<{
|
|
serverId: string
|
|
serverName: string
|
|
transfer: number
|
|
nextUpdate: string
|
|
}>
|
|
className?: string
|
|
}
|
|
|
|
export const CycleTransferStatsClient: React.FC<CycleTransferStatsClientProps> = ({ name, from, to, max, serverStats, className }) => {
|
|
const { t } = useTranslation()
|
|
const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"w-full bg-white px-4 py-3.5 rounded-lg border bg-card text-card-foreground hover:shadow-xs transition-all duration-200 dark:shadow-none",
|
|
className,
|
|
{
|
|
"bg-card/70": customBackgroundImage,
|
|
},
|
|
)}
|
|
>
|
|
{serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {
|
|
const progress = (transfer / max) * 100
|
|
|
|
return (
|
|
<div key={serverId} className="space-y-3">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-800 dark:text-neutral-200">{serverName}</span>
|
|
<div className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 px-2 py-0.5 rounded text-xs font-medium">{name}</div>
|
|
</div>
|
|
|
|
{/* Progress Section */}
|
|
<div className="space-y-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-sm font-medium text-neutral-800 dark:text-neutral-200">{formatBytes(transfer)}</span>
|
|
<span className="text-xs text-neutral-500 dark:text-neutral-400">/ {formatBytes(max)}</span>
|
|
</div>
|
|
<span className="text-xs font-medium text-neutral-600 dark:text-neutral-300">{progress.toFixed(1)}%</span>
|
|
</div>
|
|
|
|
<div className="relative h-1.5">
|
|
<div className="absolute inset-0 bg-neutral-100 dark:bg-neutral-800 rounded-full" />
|
|
<div
|
|
className="absolute inset-0 bg-emerald-500 rounded-full transition-all duration-300"
|
|
style={{ width: `${Math.min(progress, 100)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-between text-[11px] text-neutral-500 dark:text-neutral-400">
|
|
<span>
|
|
{new Date(from).toLocaleDateString()} - {new Date(to).toLocaleDateString()}
|
|
</span>
|
|
<span>
|
|
{t("cycleTransfer.nextUpdate")}: {new Date(nextUpdate).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CycleTransferStatsClient
|