announcement and criticisms and wallet and learning and setting

src/components/Select.tsx

@@ -16,9 +16,12 @@ type Props = {
 const Select: FC<Props> = (props: Props) => {
     return (
         <div className='w-full relative'>
-            <label className='text-sm'>
-                {props.label}
-            </label>
+            {
+                props.label &&
+                <label className='text-sm'>
+                    {props.label}
+                </label>
+            }
             <select {...props} className={clx(
                 'w-full text-black block border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
                 props.className,

src/components/StatusWithText.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+import { clx } from '../helpers/utils'
+
+type Props = {
+    variant: 'success' | 'error' | 'warning',
+    text: string,
+}
+
+const StatusWithText: FC<Props> = (props: Props) => {
+    return (
+        <div className={clx(
+            'w-fit py-1 px-2 text-xs h-fit rounded-full',
+            props.variant === 'success' && 'bg-green-100 text-success',
+            props.variant === 'error' && 'bg-red-100 text-red-400',
+            props.variant === 'warning' && 'bg-yellow-100 text-yellow-400',
+        )}>
+            {props.text}
+        </div>
+    )
+}
+
+export default StatusWithText

src/components/Switch.tsx

@@ -0,0 +1,50 @@
+import { Fragment } from 'react'
+import { Switch } from '@headlessui/react'
+import ReactLoading from 'react-loading'
+
+interface Props {
+    active: boolean,
+    onChange: (value: boolean) => void,
+    isLoading?: boolean,
+    label?: string,
+}
+
+const SwitchComponent = (props: Props) => {
+
+    const handleChange = (value: boolean) => {
+        props.onChange(value)
+    }
+
+    if (props.isLoading) {
+        return (
+            <ReactLoading type='spin' color='black' width={20} height={20} className='ml-4' />
+        )
+    }
+
+    return (
+        <div className='dltr w-fit flex gap-2 items-center'>
+            <Switch checked={props.active} onChange={handleChange} as={Fragment}>
+                {({ checked }) => (
+                    <button
+                        className={`${checked ? 'bg-primary' : 'bg-gray-200'
+                            } relative inline-flex h-6 w-11 items-center rounded-full`}
+                    >
+                        <span className="sr-only">Enable notifications</span>
+                        <span
+                            className={`${checked ? 'translate-x-6' : 'translate-x-1'
+                                } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+                        />
+                    </button>
+                )}
+            </Switch>
+            {
+                props.label &&
+                <div className='text-sm'>
+                    : {props.label}
+                </div>
+            }
+        </div>
+    )
+}
+
+export default SwitchComponent