ticket

2024-12-29 11:27:56 +03:30
parent 44d739c061
commit 7756e20a9f
11 changed files with 345 additions and 3 deletions
@@ -0,0 +1,38 @@
+import { FC, ReactNode } from 'react'
+import { clx } from '../helpers/utils'
+
+type Item = {
+    icon: ReactNode,
+    label: string,
+    value: string,
+}
+
+type Props = {
+    items: Item[],
+    onChange: (value: string) => void,
+    active: string,
+}
+
+const Tabs: FC<Props> = (props: Props) => {
+    return (
+        <div className='px-10  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'>
+            {
+                props.items.map((item: Item) => {
+                    return (
+                        <div onClick={() => props.onChange(item.value)} key={item.value} className={clx(
+                            'flex flex-col items-center gap-2 cursor-pointer',
+                            props.active === item.value && 'text-black'
+                        )}>
+                            {item.icon}
+                            <div className='text-xs'>
+                                {item.label}
+                            </div>
+                        </div>
+                    )
+                })
+            }
+        </div>
+    )
+}
+
+export default Tabs