structure + sidebar

2025-04-28 10:15:35 +03:30
parent 2ef02e0b6b
commit 53212445c6
25 changed files with 1144 additions and 19 deletions
@@ -0,0 +1,40 @@
+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: Props) => {
+
+    const buttonClass = clx(
+        'flex rounded-xl items-center justify-center text-center h-10 text-sm  bg-primary text-white w-full',
+        props.disabled && 'cursor-not-allowed opacity-60',
+        props.className
+    );
+
+    return (
+        <button {...props} className={`${buttonClass} ${props.className}`} >
+            {
+                props.isLoading ?
+                    <div className='flex gap-2 items-center'>
+                        {
+                            !props.percentage ?
+                                <MoonLoader size={20} color='#fff' />
+                                :
+                                <span>{props.percentage}%</span>
+                        }
+                    </div>
+                    :
+                    props.label || props.children
+            }
+        </button>
+    )
+})
+
+export default Button