root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: tab switch

Browse Source
This commit is contained in:
hamster1963 2024-10-24 21:51:42 +08:00
parent 260bbb5081
commit 7f4f8d142a
2 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/(main)/[id]/page.tsx
View File

@ -5,13 +5,10 @@ import ServerDetailChartClient from "@/app/(main)/ClientComponents/ServerDetailC
import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient"; import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient";
import TabSwitch from "@/components/TabSwitch"; import TabSwitch from "@/components/TabSwitch";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { useTranslations } from "next-intl";
import { useState } from "react"; import { useState } from "react";
export default function Page({ params }: { params: { id: string } }) { export default function Page({ params }: { params: { id: string } }) {
const t = useTranslations("TabSwitch"); const tabs = ["Detail", "Network"];
const tabs = [t("Detail"), t("Network")];
const [currentTab, setCurrentTab] = useState(tabs[0]); const [currentTab, setCurrentTab] = useState(tabs[0]);
return ( return (
<div className="mx-auto grid w-full max-w-5xl gap-2"> <div className="mx-auto grid w-full max-w-5xl gap-2">

6
components/TabSwitch.tsx
View File

@ -2,7 +2,8 @@
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import React, { useState } from "react"; import { useTranslations } from "next-intl";
import React from "react";
export default function TabSwitch({ export default function TabSwitch({
tabs, tabs,
@ -13,6 +14,7 @@ export default function TabSwitch({
currentTab: string; currentTab: string;
setCurrentTab: (tab: string) => void; setCurrentTab: (tab: string) => void;
}) { }) {
const t = useTranslations("TabSwitch");
return ( return (
<div className="z-50 flex flex-col items-start rounded-[50px]"> <div className="z-50 flex flex-col items-start rounded-[50px]">
<div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800"> <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
@ -38,7 +40,7 @@ export default function TabSwitch({
/> />
)} )}
<div className="relative z-20 flex items-center gap-1"> <div className="relative z-20 flex items-center gap-1">
<p className="whitespace-nowrap">{tab}</p> <p className="whitespace-nowrap">{t(tab)}</p>
</div> </div>
</div> </div>
))} ))}