import { ActionButton } from "@/components/ui/action-button-lucis";
export const settings = {
variant: 'cta',
size: 'lg',
isLoading: false,
isError: false,
rounded: false,
disabled: false,
};
export default function Demo(props: Partial<typeof settings>) {
const current = { ...settings, ...props };
return (
<div className="flex min-h-[300px] w-full items-center justify-center font-sans">
<div className="flex flex-col items-center gap-6">
<ActionButton
variant={current.variant as any}
size={current.size as any}
isLoading={current.isLoading}
isError={current.isError}
rounded={current.rounded}
disabled={current.disabled}
>
{/* If micro, show an arrow icon. Otherwise, show text! */}
{current.size === 'micro' ? (
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
) : current.isLoading ? (
'Authenticating...'
) : current.isError ? (
'Authentication Failed'
) : (
'Start Session'
)}
</ActionButton>
</div>
</div>
);
}
