remove RecentSearches and change styles for serachStat block

src/app/[locale]/pages/search/page.tsx

@@ -30,7 +30,7 @@ export default async function Page() {
 						extensionDocument={extensionDocument}
 					/>
 					<SearchStats />
-					<RecentSearches />
+					{/* <RecentSearches /> */}
 				</div>
 			</div>
 		</>

src/app/styles/pages-styles.scss

@@ -320,7 +320,6 @@
 	background: v.$white;
 	border-radius: 20px;
 	padding: 30px;
-	margin-bottom: 30px;
 	box-shadow: 0 4px 20px v.$shadow-1;
 
 	h3 {
@@ -3908,6 +3907,35 @@
 		padding: 8px 0;
 		border-bottom: 1px solid v.$b-color-2;
 
+		&-header {
+			display: flex;
+			align-self: center;
+			gap: 5px;
+			&.image {
+				svg {
+					color: v.$color-image;
+				}
+			}
+
+			&.audio {
+				svg {
+					color: v.$color-audio;
+				}
+			}
+
+			&.video {
+				svg {
+					color: v.$color-video;
+				}
+			}
+
+			&.document {
+				svg {
+					color: v.$color-document;
+				}
+			}
+		}
+
 		&:last-child {
 			border-bottom: none;
 		}
@@ -3918,6 +3946,7 @@
 			opacity: 0.9;
 			position: relative;
 			z-index: 1;
+			padding-top: 2px;
 		}
 
 		.stat-value {

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>