no-copy-frontend/src/app/ui/search/search-stats.tsx

'use client'

import { useQuery } from '@tanstack/react-query';
import { getSearchStats } from '@/app/actions/searchActions';
import { useEffect } from 'react';

export function SearchStats() {
	const {
		data: userSearchData,
		isLoading,
		isError,
		error,
	} = useQuery({
		queryKey: ['userSearchData'],
		queryFn: () => {
			return getSearchStats();
		},
	});

	return (
		<div className="stats-search">
			<div className="stats-title">
				Статистика поиска
			</div>

			<div className="stat-item">
				<span className="stat-label">Изображения</span>
				<span className="stat-value">
					{userSearchData?.image?.count ? userSearchData?.image?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">Видео</span>
				<span className="stat-value">
					{userSearchData?.video?.count ? userSearchData?.video?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">Аудио</span>
				<span className="stat-value">
					{userSearchData?.audio?.count ? userSearchData?.audi?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">Документы</span>
				<span className="stat-value">
					{userSearchData?.document?.count ? userSearchData?.document?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">Всего поисков</span>
				<span className="stat-value">
					{userSearchData?.allCountForPeriod ? userSearchData?.allCountForPeriod : 0}
				</span>
			</div>
		</div>
	)
}