change password + setting + notification + header

2025-07-20 12:59:04 +03:30
parent 4f3976bfe8
commit 1106952e22
12 changed files with 470 additions and 60 deletions
@@ -0,0 +1,43 @@
+import { Fragment } from 'react'
+import { Switch } from '@headlessui/react'
+
+interface Props {
+    active: boolean,
+    onChange: (value: boolean) => void,
+    isLoading?: boolean,
+    label?: string,
+}
+
+const SwitchComponent = (props: Props) => {
+
+    const handleChange = (value: boolean) => {
+        props.onChange(value)
+    }
+
+    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
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+
+type Props = {
+    title: string,
+}
+
+const TitleLine: FC<Props> = (props: Props) => {
+    return (
+        <div className='w-full text-sm flex items-center gap-4'>
+            <div className='whitespace-nowrap'>{props.title}</div>
+            <svg style={{ width: '100%', height: 1 }} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+                <line x1="0" y1="0" x2="100%" y2="0" stroke="#aaa" strokeWidth="1" strokeDasharray="5 3" />
+            </svg>
+        </div>
+    )
+}
+
+export default TitleLine