85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import type { ReactElement, ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { TableCell, TableRow } from "@/components/ui/table";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const NOTDATA_IMAGE = "/notdata.png";
|
|
|
|
export function AdminNoResourceState({
|
|
className,
|
|
message,
|
|
compact = false,
|
|
imageClassName,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
/** 默认「暂无资源」 */
|
|
message?: string;
|
|
compact?: boolean;
|
|
imageClassName?: string;
|
|
children?: ReactNode;
|
|
}): ReactElement {
|
|
const { t } = useTranslation("common");
|
|
const label = message ?? t("states.noResource", { defaultValue: "暂无资源" });
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex w-full flex-col items-center justify-center text-center",
|
|
compact ? "min-h-[120px] gap-2 py-4" : "min-h-[200px] gap-3 py-8",
|
|
className,
|
|
)}
|
|
role="status"
|
|
>
|
|
<Image
|
|
src={NOTDATA_IMAGE}
|
|
alt=""
|
|
width={compact ? 120 : 160}
|
|
height={compact ? 120 : 160}
|
|
style={{ width: "auto", height: "auto" }}
|
|
className={cn(
|
|
"h-auto w-auto object-contain self-center object-center -mt-4",
|
|
compact ? "max-h-24 max-w-[120px]" : "max-h-40 max-w-[160px]",
|
|
imageClassName,
|
|
)}
|
|
/>
|
|
<p
|
|
className={cn(
|
|
"text-muted-foreground self-center",
|
|
compact ? "text-[11px] leading-snug" : "text-sm",
|
|
)}
|
|
>
|
|
{label}
|
|
</p>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 表格无数据行（图片 + 暂无资源，竖排居中） */
|
|
export function AdminTableNoResourceRow({
|
|
colSpan,
|
|
className,
|
|
cellClassName,
|
|
message,
|
|
compact,
|
|
}: {
|
|
colSpan: number;
|
|
className?: string;
|
|
cellClassName?: string;
|
|
message?: string;
|
|
compact?: boolean;
|
|
}): ReactElement {
|
|
return (
|
|
<TableRow className={className}>
|
|
<TableCell colSpan={colSpan} className={cn("text-muted-foreground", cellClassName)}>
|
|
<AdminNoResourceState message={message} compact={compact} />
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|