added tons of features

components/shared/search/form.tsx

@@ -0,0 +1,33 @@
+import {SearchIcon} from 'lucide-react'
+import {getTranslations} from 'next-intl/server'
+import Form from 'next/form'
+
+import {Button} from '@/ui/button'
+import {Input} from '@/ui/input'
+
+export default async function SearchForm({query}: {query?: string}) {
+	const t = await getTranslations('UI')
+
+	return (
+		<Form
+			action='/search'
+			scroll={false}
+			className='border-stone flex h-10 w-full overflow-hidden rounded-[10px] border-2'
+		>
+			<Input
+				className='h-full flex-1 rounded-none border-0 bg-white text-base text-stone-600 outline-0 dark:border-gray-200'
+				placeholder={t('search-placeholder')}
+				name='query'
+				defaultValue={query}
+				type='text'
+			/>
+			<Button
+				type='submit'
+				className='h-full rounded-none border-none bg-neutral-200 px-3 py-2 text-stone-600'
+			>
+				{/*<SearchIcon className='size-5' />*/}
+				{t('search-button')}
+			</Button>
+		</Form>
+	)
+}