Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-02-05 13:10:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: refactor overview button

Browse Source
This commit is contained in:
hamster1963
2024-12-06 22:55:13 +08:00
parent 1d9e59a9df
commit a3bbd7b2eb
10 changed files with 170 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ServerDetailChart.tsx
View File

@@ -110,8 +110,8 @@ export default function ServerDetailChart({
gpuName={`#${index + 1}`}
key={index}
/>
)
)) : (
))
) : (
<></>
)}
<ProcessChart now={nezhaWsData.now} data={server} />

39
src/components/ServerOverview.tsx
View File

@@ -6,6 +6,8 @@ import {
ArrowDownCircleIcon,
ArrowUpCircleIcon,
} from "@heroicons/react/20/solid";
import { useStatus } from "@/hooks/use-status";
import useFilter from "@/hooks/use-filter";
type ServerOverviewProps = {
online: number;
@@ -27,11 +29,19 @@ export default function ServerOverview({
downSpeed,
}: ServerOverviewProps) {
const { t } = useTranslation();
const { status, setStatus } = useStatus();
const { filter, setFilter } = useFilter();
return (
<>
<section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Card className={cn("hover:border-blue-500 transition-all")}>
<Card
onClick={() => {
setFilter(false);
setStatus("all");
}}
className={cn("hover:border-blue-500 cursor-pointer transition-all")}
>
<CardContent className="flex h-full items-center px-6 py-3">
<section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base">
@@ -47,8 +57,15 @@ export default function ServerOverview({
</CardContent>
</Card>
<Card
onClick={() => {
setFilter(false);
setStatus("online");
}}
className={cn(
" hover:ring-green-500 ring-1 ring-transparent transition-all",
"cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
{
"ring-green-500 ring-2 border-transparent": status === "online",
},
)}
>
<CardContent className="flex h-full items-center px-6 py-3">
@@ -68,8 +85,15 @@ export default function ServerOverview({
</CardContent>
</Card>
<Card
onClick={() => {
setFilter(false);
setStatus("offline");
}}
className={cn(
" hover:ring-red-500 ring-1 ring-transparent transition-all",
"cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
{
"ring-red-500 ring-2 border-transparent": status === "offline",
},
)}
>
<CardContent className="flex h-full items-center px-6 py-3">
@@ -88,8 +112,15 @@ export default function ServerOverview({
</CardContent>
</Card>
<Card
onClick={() => {
setStatus("all");
setFilter(true);
}}
className={cn(
" hover:ring-purple-500 ring-1 ring-transparent transition-all",
"cursor-pointer hover:ring-purple-500 ring-1 ring-transparent transition-all",
{
"ring-purple-500 ring-2 border-transparent": filter === true,
},
)}
>
<CardContent className="flex h-full items-center relative px-6 py-3">