remove RecentSearches and change styles for serachStat block

src/app/ui/search/search-stats.tsx

@@ -3,6 +3,7 @@
 import { useUserSearchData } from '@/app/hooks/react-query/useUserSearchData';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
+import { IconImageFile, IconAudioFile, IconVideoFile, IconDocument } from '@/app/ui/icons/icons';
 
 export function SearchStats() {
 	const { data: userSearchData, isLoading, isError, error } = useUserSearchData();
@@ -19,28 +20,48 @@ export function SearchStats() {
 			</div>
 
 			<div className="stat-item">
-				<span className="stat-label">{t('images')}</span>
+				<div
+					className="stat-item-header image"
+				>
+					<IconImageFile />
+					<span className="stat-label">{t('images')}</span>
+				</div>
 				<span className="stat-value">
 					{userSearchData?.image?.count ? userSearchData?.image?.count : 0}
 				</span>
 			</div>
 
 			<div className="stat-item">
-				<span className="stat-label">{t('videos')}</span>
+				<div
+					className="stat-item-header video"
+				>
+					<IconVideoFile />
+					<span className="stat-label">{t('videos')}</span>
+				</div>
 				<span className="stat-value">
 					{userSearchData?.video?.count ? userSearchData?.video?.count : 0}
 				</span>
 			</div>
 
 			<div className="stat-item">
-				<span className="stat-label">{t('audios')}</span>
+				<div
+					className="stat-item-header audio"
+				>
+					<IconAudioFile />
+					<span className="stat-label">{t('audios')}</span>
+				</div>
 				<span className="stat-value">
 					{userSearchData?.audio?.count ? userSearchData?.audio?.count : 0}
 				</span>
 			</div>
 
 			<div className="stat-item">
-				<span className="stat-label">{t('documents')}</span>
+				<div
+					className="stat-item-header document"
+				>
+					<IconDocument />
+					<span className="stat-label">{t('documents')}</span>
+				</div>
 				<span className="stat-value">
 					{userSearchData?.document?.count ? userSearchData?.document?.count : 0}
 				</span>