fix: image z-index

This commit is contained in:
hamster1963 2024-12-15 21:21:44 +08:00
parent 941406acbe
commit c3668402d5

View File

@ -1,5 +1,4 @@
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
import useFilter from "@/hooks/use-filter"
import { useStatus } from "@/hooks/use-status" import { useStatus } from "@/hooks/use-status"
import { formatBytes } from "@/lib/format" import { formatBytes } from "@/lib/format"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
@ -27,7 +26,6 @@ export default function ServerOverview({
}: ServerOverviewProps) { }: ServerOverviewProps) {
const { t } = useTranslation() const { t } = useTranslation()
const { status, setStatus } = useStatus() const { status, setStatus } = useStatus()
const { filter, setFilter } = useFilter()
// @ts-expect-error DisableAnimatedMan is a global variable // @ts-expect-error DisableAnimatedMan is a global variable
const disableAnimatedMan = window.DisableAnimatedMan === "true" const disableAnimatedMan = window.DisableAnimatedMan === "true"
@ -37,7 +35,6 @@ export default function ServerOverview({
<section className="grid grid-cols-2 gap-4 lg:grid-cols-4"> <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Card <Card
onClick={() => { onClick={() => {
setFilter(false)
setStatus("all") setStatus("all")
}} }}
className={cn("hover:border-blue-500 cursor-pointer transition-all")} className={cn("hover:border-blue-500 cursor-pointer transition-all")}
@ -56,7 +53,6 @@ export default function ServerOverview({
</Card> </Card>
<Card <Card
onClick={() => { onClick={() => {
setFilter(false)
setStatus("online") setStatus("online")
}} }}
className={cn( className={cn(
@ -84,7 +80,6 @@ export default function ServerOverview({
</Card> </Card>
<Card <Card
onClick={() => { onClick={() => {
setFilter(false)
setStatus("offline") setStatus("offline")
}} }}
className={cn( className={cn(
@ -110,15 +105,8 @@ export default function ServerOverview({
</CardContent> </CardContent>
</Card> </Card>
<Card <Card
onClick={() => {
setStatus("all")
setFilter(true)
}}
className={cn( className={cn(
"cursor-pointer hover:ring-purple-500 ring-1 ring-transparent transition-all", "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"> <CardContent className="flex h-full items-center relative px-6 py-3">
@ -126,7 +114,7 @@ export default function ServerOverview({
<div className="flex items-center w-full justify-between"> <div className="flex items-center w-full justify-between">
<p className="text-sm font-medium md:text-base">{t("serverOverview.network")}</p> <p className="text-sm font-medium md:text-base">{t("serverOverview.network")}</p>
</div> </div>
<section className="flex items-start flex-row z-[999] pr-0 gap-1"> <section className="flex items-start flex-row z-10 pr-0 gap-1">
<p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400 text-nowrap font-medium"> <p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400 text-nowrap font-medium">
{formatBytes(up)} {formatBytes(up)}
</p> </p>
@ -147,7 +135,7 @@ export default function ServerOverview({
</section> </section>
{!disableAnimatedMan && ( {!disableAnimatedMan && (
<img <img
className="absolute right-3 top-[-85px] z-10 w-20 scale-90 group-hover:opacity-50 md:scale-100 transition-all" className="absolute right-3 top-[-85px] z-50 w-20 scale-90 group-hover:opacity-50 md:scale-100 transition-all"
alt={"animated-man"} alt={"animated-man"}
src={"/animated-man.webp"} src={"/animated-man.webp"}
loading="eager" loading="eager"