header + navigation and menu

2025-08-03 15:53:06 +03:30
parent 61a934074c
commit 76500fb337
46 changed files with 1042 additions and 154 deletions
@@ -0,0 +1,46 @@
+import Input from '@/components/Input'
+import { Separator } from '@/components/ui/separator'
+import { DocumentText, Home, Profile, ShoppingCart } from 'iconsax-react'
+import { FC } from 'react'
+import Menu from './components/Menu'
+
+const Header: FC = () => {
+    return (
+        <div className='fixed top-0 bg-white w-full'>
+            <div className='flex items-center justify-between px-6 py-[18px]'>
+                <div className='flex gap-[30px] items-center'>
+                    <div>LOGO</div>
+                    <Input className='w-[500px]' variant='search' placeholder='جستجو' />
+                </div>
+
+                <div className='flex items-center gap-6'>
+                    <div className='h-10 border border-border py-3 px-4 rounded-[12px] flex items-center gap-2.5'>
+                        <Profile size={20} color='#333333' />
+                        <div className='text-sm text-[#333333]'>حساب کاربری</div>
+                    </div>
+
+                    <Separator style={{ height: 25 }} orientation='vertical' />
+
+                    <div className='h-10 p-3 rounded-[12px] border border-border flex items-center gap-2.5'>
+                        <ShoppingCart size={20} color='#333333' />
+                    </div>
+                </div>
+            </div>
+            <div className='mt-7 text-sm px-6 flex items-center gap-7'>
+                <Menu />
+                <Separator style={{ height: 20 }} orientation='vertical' />
+
+                <div className='flex items-center gap-2.5'>
+                    <Home size={20} color='#333333' />
+                    <div className='text-[#333333]'>صفحه نخست</div>
+                </div>
+                <div className='flex items-center gap-2.5'>
+                    <DocumentText size={20} color='#333333' />
+                    <div className='text-[#333333]'>مجله</div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Header