59 lines
1.1 KiB
TypeScript
59 lines
1.1 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import type { ReactNode } from "react";
|
||
|
||
type Tone = "default" | "accent" | "danger";
|
||
|
||
const toneClass: Record<Tone, string> = {
|
||
default: "",
|
||
accent: "is-accent",
|
||
danger: "is-danger",
|
||
};
|
||
|
||
/** 32px 圆形行内操作；hover/focus 走 CSS，禁止 JS 改 style */
|
||
export default function AdminIconButton({
|
||
children,
|
||
tip,
|
||
ariaLabel,
|
||
tone = "default",
|
||
className = "",
|
||
href,
|
||
disabled,
|
||
onClick,
|
||
type = "button",
|
||
}: {
|
||
children: ReactNode;
|
||
tip?: string;
|
||
ariaLabel: string;
|
||
tone?: Tone;
|
||
className?: string;
|
||
href?: string;
|
||
disabled?: boolean;
|
||
onClick?: () => void;
|
||
type?: "button" | "submit";
|
||
}) {
|
||
const cls = `admin-icon-btn ${toneClass[tone]} ${className}`.trim();
|
||
|
||
if (href && !disabled) {
|
||
return (
|
||
<Link href={href} className={cls} aria-label={ariaLabel} data-tip={tip}>
|
||
{children}
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<button
|
||
type={type}
|
||
className={cls}
|
||
aria-label={ariaLabel}
|
||
data-tip={tip}
|
||
disabled={disabled}
|
||
onClick={onClick}
|
||
>
|
||
{children}
|
||
</button>
|
||
);
|
||
}
|