structure and heropage

src/components/Button.tsx

@@ -0,0 +1,36 @@
+import { ButtonHTMLAttributes, FC, memo, ReactNode } from 'react'
+import MoonLoader from "react-spinners/MoonLoader"
+import { XOR } from '../helpers/types'
+import { clx } from '../helpers/utils'
+
+type Props = {
+    className?: string;
+    isLoading?: boolean;
+    percentage?: number;
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+    XOR<{ children: ReactNode }, { label: string }>;
+
+const Button: FC<Props> = memo((props) => {
+    const { isLoading, percentage, label, children, className, ...rest } = props;
+
+    const buttonClass = clx(
+        'flex rounded-xl items-center justify-center text-center h-10 text-sm bg-primary text-white w-full',
+        rest.disabled && 'cursor-not-allowed opacity-60'
+    );
+
+    return (
+        <button {...rest} className={`${buttonClass} ${className || ''}`} >
+            {isLoading ? (
+                <div className='flex gap-2 items-center'>
+                    {percentage && percentage > 0 ? <span>{percentage}%</span> : <MoonLoader size={20} color='#fff' />}
+                </div>
+            ) : (
+                label ?? children
+            )}
+        </button>
+    )
+})
+
+Button.displayName = 'Button'
+
+export default Button;