header

src/shared/Header.tsx

@@ -1,9 +1,36 @@
 import { FC } from 'react'
+import Input from '../components/Input'
+import { ArrowDown2, Element3, Notification, Wallet } from 'iconsax-react'
+import AvatarImage from '../assets/images/Avatar.png'
+import { useTranslation } from 'react-i18next'
 
 const Header: FC = () => {
-    return (
-        <div className='fixed right-[280px] top-4 h-20 bg-white rounded-[32px]  w-full'>
 
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='fixed left-4 right-[285px] top-4 h-16 flex items-center px-6 bg-white justify-between rounded-[32px] w-[calc(100%-305px)]'>
+
+            <div className='min-w-[270px]'>
+                <Input
+                    variant='search'
+                    placeholder={t('header.search')}
+                />
+            </div>
+            <div className='flex gap-6 items-center'>
+                <Element3 size={18} color='black' />
+                <Wallet size={18} color='black' />
+                <Notification size={18} color='black' />
+                <div className='flex gap-2 items-center'>
+                    <div className='size-7 rounded-full bg-description overflow-hidden'>
+                        <img src={AvatarImage} className='size-full object-cover' />
+                    </div>
+                    <div className='flex gap-1 items-center'>
+                        <div className='text-xs'>مهرداد مظفری</div>
+                        <ArrowDown2 size={14} color='#8C90A3' />
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }