make page setting + add tabs

src/App.tsx

@@ -1,6 +1,6 @@
 import { type FC, useEffect, useState } from 'react'
 import { BrowserRouter } from 'react-router-dom'
-// import 'swiper/swiper-bundle.css';
+import 'swiper/swiper-bundle.css';
 // import 'rc-rate/assets/index.css';
 // import "react-multi-date-picker/styles/layouts/mobile.css"
 import './assets/fonts/irancell/style.css'

src/components/Tabs.tsx

@@ -25,14 +25,14 @@ const Tabs: FC<Props> = (props: Props) => {
         <Swiper
             slidesPerView='auto'
             spaceBetween={30}
-            className='px-10 max-w-full w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'>
+            className='px-10 max-w-full w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white/45'>
             {
                 props.items.map((item: Item, index: number) => {
                     return (
                         <SwiperSlide style={SWIPER_SLIDE_STYLE} onClick={() => props.onChange(item.value)} key={item.value} className={clx(
                             'flex flex-col max-w-fit mt-[15px] items-center gap-2 cursor-pointer',
                             index === 0 && 'pr-[30px]',
-                            index === props.items.length - 1 && 'pl-[30px]',
+                            // index === props.items.length - 1 && 'pl-[30px]',
                             props.active === item.value && 'text-black'
                         )}>
                             {item.icon}

src/pages/settings/Setting.tsx

@@ -0,0 +1,46 @@
+import Tabs from '@/components/Tabs'
+import { Card, KeySquare, Setting4, TruckFast } from 'iconsax-react'
+import { useState, type FC } from 'react'
+import { SettingTabEnum } from './enum/Enum'
+
+const Setting: FC = () => {
+
+    const [activeTab, setActiveTab] = useState<SettingTabEnum>(SettingTabEnum.GENERAL)
+
+    return (
+        <div className='mt-5'>
+            <h1 className='text-lg font-light'>تنظیمات</h1>
+
+            <div className='mt-8'>
+                <Tabs
+                    items={[
+                        {
+                            icon: <Setting4 color={activeTab === SettingTabEnum.GENERAL ? 'black' : '#8C90A3'} size={24} />,
+                            label: 'عمومی',
+                            value: SettingTabEnum.GENERAL,
+                        },
+                        {
+                            icon: <KeySquare color={activeTab === SettingTabEnum.PASSWORD ? 'black' : '#8C90A3'} size={24} />,
+                            label: 'رمز عبور',
+                            value: SettingTabEnum.PASSWORD,
+                        },
+                        {
+                            icon: <Card color={activeTab === SettingTabEnum.FINANCIAL ? 'black' : '#8C90A3'} size={24} />,
+                            label: 'مالی',
+                            value: SettingTabEnum.FINANCIAL,
+                        },
+                        {
+                            icon: <TruckFast color={activeTab === SettingTabEnum.DELIVERY ? 'black' : '#8C90A3'} size={24} />,
+                            label: 'روش های ارسال',
+                            value: SettingTabEnum.DELIVERY,
+                        },
+                    ]}
+                    onChange={(value: string) => setActiveTab(value as SettingTabEnum)}
+                    active={activeTab}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default Setting

src/pages/settings/enum/Enum.ts

@@ -0,0 +1,6 @@
+export const enum SettingTabEnum {
+  GENERAL = "general",
+  PASSWORD = "password",
+  FINANCIAL = "financial",
+  DELIVERY = "delivery",
+}

src/router/Main.tsx

@@ -23,6 +23,7 @@ import RolesList from '@/pages/roles/List'
 import CreateRole from '@/pages/roles/Create'
 import UpdateRole from '@/pages/roles/Update'
 import UpdateSchedule from '@/pages/schedule/Update'
+import Setting from '@/pages/settings/Setting'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -57,6 +58,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.roles.list} element={<RolesList />} />
                             <Route path={Pages.roles.add} element={<CreateRole />} />
                             <Route path={Pages.roles.update + ':id'} element={<UpdateRole />} />
+                            <Route path={Pages.setting} element={<Setting />} />
                         </Routes>
                     </div>
                 </div>

tsconfig.app.json

@@ -3,10 +3,13 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2022",
     "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -14,20 +17,22 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
+    "erasableSyntaxOnly": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
-
     /* Path Mapping */
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["src"]
-}
+  "include": [
+    "src"
+  ]
+}

tsconfig.node.json

@@ -2,25 +2,29 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2023",
-    "lib": ["ES2023"],
+    "lib": [
+      "ES2023"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-    "types": ["node"],
-
+    "types": [
+      "node"
+    ],
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
+    "erasableSyntaxOnly": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
-}
+  "include": [
+    "vite.config.ts"
+  ]
+}