add search setting interface

src/app/ui/search/supported-formats.tsx

@@ -1,20 +1,18 @@
+'use client'
+
 import { IconImageFile, IconVideoFile, IconAudioFile, IconDocument } from '@/app/ui/icons/icons';
 import { useTranslations } from 'next-intl';
+import { useAllFilesExtensions } from '@/app/hooks/react-query/useAllFilesExtensions';
 
-interface supportedFormats {
-	extensionVideo: string[]
-	extensionAudio: string[]
-	extensionImage: string[]
-	extensionDocument: string[]
-}
-
-export function SupportedFormats({ extensionVideo, extensionAudio, extensionImage, extensionDocument }: supportedFormats) {
+export function SupportedFormats() {
 	const t = useTranslations('Global');
 
+	const { data: allFilesExtensions, isLoading, isError } = useAllFilesExtensions();
+
 	return (
 		<div className="supported-formats">
 			<div className="formats-title">
-				Поддерживаемые форматы
+				{t('supported-formats')}
 			</div>
 
 			<div className="format-group">
@@ -22,7 +20,7 @@ export function SupportedFormats({ extensionVideo, extensionAudio, extensionImag
 					<IconImageFile /> {t('images')}
 				</div>
 				<div className="format-list">
-					{extensionImage.join(', ')}
+					{allFilesExtensions?.images?.join(', ')}
 				</div>
 			</div>
 
@@ -31,7 +29,7 @@ export function SupportedFormats({ extensionVideo, extensionAudio, extensionImag
 					<IconVideoFile /> {t('videos')}
 				</div>
 				<div className="format-list">
-					{extensionVideo.join(', ')}
+					{allFilesExtensions?.videos?.join(', ')}
 				</div>
 			</div>
 
@@ -40,7 +38,7 @@ export function SupportedFormats({ extensionVideo, extensionAudio, extensionImag
 					<IconAudioFile /> {t('audios')}
 				</div>
 				<div className="format-list">
-					{extensionAudio.join(', ')}
+					{allFilesExtensions?.audios?.join(', ')}
 				</div>
 			</div>
 
@@ -49,7 +47,7 @@ export function SupportedFormats({ extensionVideo, extensionAudio, extensionImag
 					<IconDocument /> {t('documents')}
 				</div>
 				<div className="format-list">
-					{extensionDocument.join(', ')}
+					{allFilesExtensions?.documents?.join(', ')}
 				</div>
 			</div>
 		</div>