feat(stats): flexible size stat on large screen

This commit is contained in:
kunish 2023-09-01 16:55:50 +08:00
parent 346a196f99
commit f5866dcd9d
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430

View File

@ -49,7 +49,7 @@ const defaultChartOptions: ApexOptions = {
} }
const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => ( const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
<div class="stat"> <div class="stat flex-1">
<div class="stat-title text-secondary-content">{props.label}</div> <div class="stat-title text-secondary-content">{props.label}</div>
<div class="stat-value text-primary-content"> <div class="stat-value text-primary-content">
{children(() => props.children)()} {children(() => props.children)()}
@ -169,7 +169,7 @@ export default () => {
return ( return (
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="stats stats-vertical w-full bg-primary shadow sm:stats-horizontal"> <div class="stats stats-vertical w-full bg-primary shadow lg:stats-horizontal lg:flex">
<TrafficWidget label="Upload"> <TrafficWidget label="Upload">
{byteSize(traffic()?.up || 0).toString()}/s {byteSize(traffic()?.up || 0).toString()}/s
</TrafficWidget> </TrafficWidget>