79 lines
1.6 KiB
TypeScript
79 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import clsx from "clsx";
|
|
|
|
interface GreenBtnProps {
|
|
text: string | boolean;
|
|
mt?: string;
|
|
onEventBtn?: () => void;
|
|
border?: boolean;
|
|
px?: boolean;
|
|
}
|
|
|
|
export const GreenBtn = ({ text, mt, onEventBtn, px }: GreenBtnProps) => {
|
|
return (
|
|
<button
|
|
onClick={onEventBtn}
|
|
className={clsx(
|
|
`${mt} py-[17px] text-[14px] rounded-[4px] bg-green text-[#346560] hover:bg-opacity-90 font-medium transition-all`,
|
|
{
|
|
"px-[43px]": !px,
|
|
"px-[70px]": px,
|
|
}
|
|
)}
|
|
>
|
|
{text}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
interface BorderProps {
|
|
onEventBtn?: () => void;
|
|
text: string;
|
|
mt?: string;
|
|
px?: boolean;
|
|
full?: boolean;
|
|
}
|
|
|
|
export const BorderBtn = ({ onEventBtn, text, mt, px, full }: BorderProps) => {
|
|
return (
|
|
<button
|
|
className={clsx(`mt-[${mt}] border-btn py-[17px]`, {
|
|
"px-[43px]": px,
|
|
"px-[17px]": !px,
|
|
"w-full sm:w-fit": full,
|
|
})}
|
|
onClick={onEventBtn}
|
|
>
|
|
{text}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
interface MobBtnProps {
|
|
text: string;
|
|
}
|
|
|
|
export const GreenBtnMob = ({ text }: MobBtnProps) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="p-3 rounded-sm bg-green w-[140px] mx-auto cursor-pointer hover:bg-lightGreen transition-all"
|
|
>
|
|
{text}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export const SimpleGreenBtn = ({ text }: MobBtnProps) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="bg-green py-[17px] px-[70px] leading-[100%] rounded-sm hover:bg-lightGreen transition-all"
|
|
>
|
|
{text}
|
|
</button>
|
|
);
|
|
};
|