update recent search component

src/app/ui/search/recent-searches.tsx

@@ -1,5 +1,22 @@
+'use client'
+
 import { IconImageFile, IconDocument, IconAudioFile, IconVideoFile } from '@/app/ui/icons/icons';
+import { useQuery } from '@tanstack/react-query';
+import { getSearchStats } from '@/app/actions/searchActions';
+
 export function RecentSearches() {
+	const {
+		data: userSearchData,
+		isLoading,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['userSearchData'],
+		queryFn: () => {
+			return getSearchStats();
+		},
+	});
+
 	return (
 		<div className="recent-searches">
 			<div className="recent-title">
@@ -9,7 +26,7 @@ export function RecentSearches() {
 				<span className="recent-type document">
 					<IconDocument /> document</span>
 				<div>
-					<div>0 поисков</div>
+					<div>{userSearchData?.document?.count ? userSearchData?.document?.count : 0} поисков</div>
 					<div className="recent-date">
 						date
 					</div>
@@ -19,7 +36,7 @@ export function RecentSearches() {
 				<span className="recent-type image">
 					<IconImageFile /> image</span>
 				<div>
-					<div>0 поисков</div>
+					<div>{userSearchData?.image?.count ? userSearchData?.image?.count : 0} поисков</div>
 					<div className="recent-date">
 						date
 					</div>
@@ -29,7 +46,7 @@ export function RecentSearches() {
 				<span className="recent-type audio">
 					<IconAudioFile /> audio</span>
 				<div>
-					<div>0 поисков</div>
+					<div>{userSearchData?.audio?.count ? userSearchData?.audi?.count : 0} поисков</div>
 					<div className="recent-date">
 						date
 					</div>
@@ -39,7 +56,7 @@ export function RecentSearches() {
 				<span className="recent-type video">
 					<IconVideoFile /> video</span>
 				<div>
-					<div>0 поисков</div>
+					<div>{userSearchData?.video?.count ? userSearchData?.video?.count : 0} поисков</div>
 					<div className="recent-date">
 						date
 					</div>