style: temperature list collapsible display

hamster1963 · Dec 13, 2024 · aaa4b1a · aaa4b1a
1 parent 1b7fc8d
commit aaa4b1a
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 11 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@fontsource/inter": "^5.1.0",
     "@heroicons/react": "^2.2.0",
+    "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",

diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
@@ -10,6 +10,8 @@ import { NezhaWebsocketResponse } from "@/types/nezha-api"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion"
+
 export default function ServerDetailOverview({ server_id }: { server_id: string }) {
   const { t } = useTranslation()
   const navigate = useNavigate()
@@ -228,24 +230,29 @@ export default function ServerDetailOverview({ server_id }: { server_id: string
           </Card>
         ) : null}
       </section>
+      <section className="flex flex-wrap gap-2 mt-1">
       {server?.state.temperatures && server?.state.temperatures.length > 0 && (
-        <section className="flex flex-wrap gap-2 mt-1">
-          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-xs text-muted-foreground">{"温度"}</p>
+        <section className="flex flex-wrap gap-2 ml-1.5">
+          <Accordion type="single" collapsible className="w-fit">
+            <AccordionItem value="item-1" className="border-none">
+              <AccordionTrigger className="text-xs py-0 text-muted-foreground font-normal">
+                {t("serverDetail.temperature")}
+              </AccordionTrigger>
+              <AccordionContent className="pb-0">
                 <section className="flex items-start flex-wrap gap-2">
                   {server?.state.temperatures.map((item, index) => (
                     <div className="text-xs flex items-center" key={index}>
                       <p className="font-semibold">{item.Name}</p>: {item.Temperature.toFixed(2)} °C
                     </div>
                   ))}
                 </section>
-              </section>
-            </CardContent>
-          </Card>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
         </section>
       )}
+      </section>
+
       <section className="flex flex-wrap gap-2 mt-1">
         <Card className="rounded-[10px] bg-transparent border-none shadow-none">
           <CardContent className="px-1.5 py-1">

diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+import * as React from "react"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-start py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -61,7 +61,8 @@
     "system": "System",
     "upload": "Upload",
     "download": "Download",
-    "lastActive": "Last active time"
+    "lastActive": "Last active time",
+    "temperature": "Temperature"
   },
   "serverDetailChart": {
     "process": "Process",

diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
@@ -61,7 +61,8 @@
     "system": "系统",
     "upload": "上传",
     "download": "下载",
-    "lastActive": "最后上报时间"
+    "lastActive": "最后上报时间",
+    "temperature": "温度"
   },
   "serverDetailChart": {
     "process": "进程数",

diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
@@ -61,7 +61,8 @@
     "system": "系統",
     "upload": "上傳",
     "download": "下載",
-    "lastActive": "最後上報時間"
+    "lastActive": "最後上報時間",
+    "temperature": "溫度"
   },
   "serverDetailChart": {
     "process": "進程數",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -53,6 +53,28 @@ module.exports = {
           5: "hsl(var(--chart-5))",
         },
       },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],