70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import type { ButtonConfig } from '@/types/invyone-component';
|
|
|
|
interface FcButtonProps {
|
|
config: ButtonConfig;
|
|
onClick?: () => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const VARIANT_CLASSES: Record<string, string> = {
|
|
primary: 'bg-[var(--v5-primary)] text-white hover:opacity-90 shadow-[var(--v5-glow-sm)]',
|
|
default: 'bg-[var(--v5-surface)] text-[var(--v5-text)] border border-[var(--v5-border)] hover:border-[var(--v5-primary)]',
|
|
destructive: 'bg-[var(--v5-red)] text-white hover:opacity-90',
|
|
outline: 'bg-transparent text-[var(--v5-text)] border border-[var(--v5-border)] hover:bg-[var(--v5-surface-hover)]',
|
|
ghost: 'bg-transparent text-[var(--v5-text-sec)] hover:bg-[var(--v5-surface-hover)]',
|
|
};
|
|
|
|
export function FcButton({ config, onClick, disabled }: FcButtonProps) {
|
|
const [confirming, setConfirming] = useState(false);
|
|
|
|
const handleClick = () => {
|
|
if (config.confirm && !confirming) {
|
|
setConfirming(true);
|
|
return;
|
|
}
|
|
setConfirming(false);
|
|
onClick?.();
|
|
};
|
|
|
|
const handleCancel = () => setConfirming(false);
|
|
|
|
const variantClass = VARIANT_CLASSES[config.variant] ?? VARIANT_CLASSES.default;
|
|
|
|
if (confirming) {
|
|
return (
|
|
<div className="inline-flex items-center gap-1">
|
|
<span className="text-[0.65rem] text-[var(--v5-red)]">{config.confirm}</span>
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
className="px-2 py-0.5 rounded text-[0.65rem] bg-[var(--v5-red)] text-white"
|
|
>
|
|
확인
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleCancel}
|
|
className="px-2 py-0.5 rounded text-[0.65rem] border border-[var(--v5-border)] text-[var(--v5-text-sec)]"
|
|
>
|
|
취소
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
disabled={disabled}
|
|
className={`px-3 py-1 rounded text-xs font-medium transition-all
|
|
disabled:opacity-40 disabled:cursor-not-allowed ${variantClass}`}
|
|
>
|
|
{config.text}
|
|
</button>
|
|
);
|
|
}
|