Skip to content

Commit

Permalink
style: temperature list collapsible display
Browse files Browse the repository at this point in the history
  • Loading branch information
hamster1963 committed Dec 13, 2024
1 parent 1b7fc8d commit aaa4b1a
Show file tree
Hide file tree
Showing 8 changed files with 95 additions and 11 deletions.
Binary file modified bun.lockb
Binary file not shown.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
23 changes: 15 additions & 8 deletions src/components/ServerDetailOverview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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">
Expand Down
51 changes: 51 additions & 0 deletions src/components/ui/accordion.tsx
Original file line number Diff line number Diff line change
@@ -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 }
3 changes: 2 additions & 1 deletion src/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@
"system": "System",
"upload": "Upload",
"download": "Download",
"lastActive": "Last active time"
"lastActive": "Last active time",
"temperature": "Temperature"
},
"serverDetailChart": {
"process": "Process",
Expand Down
3 changes: 2 additions & 1 deletion src/locales/zh-CN/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@
"system": "系统",
"upload": "上传",
"download": "下载",
"lastActive": "最后上报时间"
"lastActive": "最后上报时间",
"temperature": "温度"
},
"serverDetailChart": {
"process": "进程数",
Expand Down
3 changes: 2 additions & 1 deletion src/locales/zh-TW/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@
"system": "系統",
"upload": "上傳",
"download": "下載",
"lastActive": "最後上報時間"
"lastActive": "最後上報時間",
"temperature": "溫度"
},
"serverDetailChart": {
"process": "進程數",
Expand Down
22 changes: 22 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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")],
Expand Down

0 comments on commit aaa4b1a

Please sign in to comment.