PaneButton 尺寸类名改用查表
- export/tabs/common/PaneButton.tsx 用 SIZING_CLASS 映射替换 sizing 的嵌套三元
This commit is contained in:
+8
-6
@@ -18,6 +18,13 @@ const TONE_CLASS: Record<'primary' | 'ghost' | 'brand', string> = {
|
||||
'border-[#e2cbb8] bg-white/80 text-[#6f5848] hover:border-[#c7653d] hover:text-[#c7653d]',
|
||||
};
|
||||
|
||||
/** 尺寸 → 类名,理由同 [`TONE_CLASS`]。 */
|
||||
const SIZING_CLASS: Record<'sm' | 'lg' | 'hero', string> = {
|
||||
hero: 'w-full justify-center gap-2 rounded-xl px-6 py-4 text-lg font-bold tracking-wide shadow-md',
|
||||
lg: 'justify-center gap-2 rounded-xl px-6 py-3 text-base font-semibold shadow-sm',
|
||||
sm: 'gap-1.5 rounded-[10px] px-3.5 py-2 text-xs font-semibold',
|
||||
};
|
||||
|
||||
export function PaneButton({
|
||||
children,
|
||||
variant = 'ghost',
|
||||
@@ -38,12 +45,7 @@ export function PaneButton({
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const tone = TONE_CLASS[variant];
|
||||
const sizing =
|
||||
size === 'hero'
|
||||
? 'w-full justify-center gap-2 rounded-xl px-6 py-4 text-lg font-bold tracking-wide shadow-md'
|
||||
: size === 'lg'
|
||||
? 'justify-center gap-2 rounded-xl px-6 py-3 text-base font-semibold shadow-sm'
|
||||
: 'gap-1.5 rounded-[10px] px-3.5 py-2 text-xs font-semibold';
|
||||
const sizing = SIZING_CLASS[size];
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user