AmirReza Jamali
634de17f23
This commit introduces the second step in the marketing page's stepper, which allows users to create a chart. The previous placeholder content has been replaced with the new `ChartStep` component. To support form functionality within this new step, the `Button` component has been updated to accept a `type` attribute (`button`, `submit`, `reset`), enabling proper form submission handling.
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { cva, VariantProps } from "class-variance-authority";
|
|
import type { HTMLAttributes } from "react";
|
|
|
|
const buttonVariants = cva(
|
|
"inline-flex items-center justify-center gap-2.5 text-center font-medium hover:bg-opacity-90 font-medium transition focus:outline-none",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
primary: "bg-primary text-white",
|
|
green: "bg-green text-white",
|
|
dark: "bg-dark text-white dark:bg-white/10",
|
|
outlinePrimary:
|
|
"border border-primary hover:bg-primary/10 text-primary",
|
|
outlineGreen: "border border-green hover:bg-green/10 text-green",
|
|
outlineDark:
|
|
"border border-dark hover:bg-dark/10 text-dark dark:hover:bg-white/10 dark:border-white/25 dark:text-white",
|
|
},
|
|
shape: {
|
|
default: "",
|
|
rounded: "rounded-[5px]",
|
|
full: "rounded-full",
|
|
},
|
|
size: {
|
|
default: "py-3.5 px-10 py-3.5 lg:px-8 xl:px-10",
|
|
small: "py-[11px] px-6",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "primary",
|
|
shape: "default",
|
|
size: "default",
|
|
},
|
|
},
|
|
);
|
|
|
|
type ButtonProps = HTMLAttributes<HTMLButtonElement> &
|
|
VariantProps<typeof buttonVariants> & {
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
type?: "button" | "submit" | "reset";
|
|
};
|
|
|
|
export function Button({
|
|
label,
|
|
icon,
|
|
variant,
|
|
shape,
|
|
size,
|
|
className,
|
|
...props
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
className={buttonVariants({ variant, shape, size, className })}
|
|
{...props}
|
|
>
|
|
{icon && <span>{icon}</span>}
|
|
{label}
|
|
</button>
|
|
);
|
|
}
|