header

src/components/Input.tsx

@@ -1,11 +1,12 @@
 import { FC, InputHTMLAttributes, useState } from 'react'
 import { clx } from '../helpers/utils';
 import EyeIcon from '../assets/images/eye.svg'
+import { SearchNormal } from 'iconsax-react';
 
 type Variant = "floating_outlined" | "primary" | "search";
 
 type Props = {
-    label: string;
+    label?: string;
     className?: string;
     variant?: Variant;
     error_text?: string;
@@ -22,6 +23,7 @@ const Input: FC<Props> = (props: Props) => {
     const inputClass = clx(
         'w-full h-10 text-black block px-4 text-xs rounded-xl mt-1 border border-border',
         props.readOnly && 'bg-gray-100',
+        props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
         props.className
     );
 
@@ -39,6 +41,11 @@ const Input: FC<Props> = (props: Props) => {
                     props.type === 'password' &&
                     <img onClick={() => setShowPassword((oldValue) => !oldValue)} src={EyeIcon} className='w-5 absolute top-0 bottom-0 cursor-pointer my-auto left-3' />
                 }
+
+                {
+                    props.variant === 'search' &&
+                    <SearchNormal size={20} color='#8C90A3' className='absolute top-0 w-5 bottom-0 my-auto right-3' />
+                }
             </div>
         </div>
     )

src/langs/fa.json

@@ -54,5 +54,8 @@
     "learning": "آموزش",
     "setting": "تنظیمات",
     "logout": "خروج"
+  },
+  "header": {
+    "search": "جستجو"
   }
 }

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>
     )
 }