Changes

2024-10-04 12:48:19 +05:00
parent 21a6e9073b
commit cebc584a14
303 changed files with 8224 additions and 2563 deletions
@@ -0,0 +1,39 @@
+<template>
+
+</template>
+
+<script>
+export default {
+	name: "BaseMetaHead",
+	data() {
+		return {
+		}
+	},
+	methods: {
+	},
+	props: {
+		title: {
+			type: String,
+		},
+		description: {
+			type: String,
+		},
+		robots: {
+			type: Array,
+		},
+		og_title: {
+			type: String
+		},
+		og_description: {
+			type: String
+		},
+		og_image: {
+			type: String
+		},
+	},
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -4,8 +4,6 @@
 			<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
 				<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
 			</div>
-
-
 			<div class="ms-4 mt-2 w-full">
 				<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
 				<ul class="mt-5 space-y-3 flex flex-col">
@@ -16,12 +14,8 @@
 					<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
 				</ul>
 			</div>
-
 		</div>
-
-
 	</div>
-
 	<div v-else>
 		<FormBuilder :blocks="form" />
 	</div>
@@ -34,8 +28,6 @@ import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
 import axios from "axios";
 import {Link} from "@inertiajs/vue3";
 import FormBuilder from "@/Components/BuilderUi/Pages/FormBuilder.vue";
-
-
 export default {
 	name: "FormBlock",
 	components: {FormBuilder, axios, Link },
@@ -26,7 +26,6 @@

 		</div>

-
 		<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
 				<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.data.slug)">
 					<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
@@ -0,0 +1,49 @@
+<template>
+	<div class="mb-4 sm:mb-8">
+		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
+		<div class="relative">
+			<input
+					:required="block.data.rules.required"
+					:name="block.data.name_field"
+					type="date"
+					:id="block.data.name_field + '-id'"
+					:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
+					class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
+					:placeholder="block.data.title_field"
+			>
+			<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
+				<svg class="shrink-0 size-4 text-red-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="12" cy="12" r="10"></circle>
+					<line x1="12" x2="12" y1="8" y2="12"></line>
+					<line x1="12" x2="12.01" y1="16" y2="16"></line>
+				</svg>
+			</div>
+		</div>
+		<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
+		<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
+
+	</div>
+
+
+</template>
+
+<script>
+export default {
+	name: "DateBlock",
+	data() {
+		return {
+		}
+	},
+	methods: {},
+	props: {
+		block: {
+			type: Object,
+		},
+		error: {
+			type: Object,
+		}
+
+	},
+}
+</script>
+
@@ -2,17 +2,18 @@
 	<div class="mb-4 sm:mb-8">
 		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="relative">
-			<input
+			<textarea
+					v-model="textarea"
 					:required="block.data.rules.required"
 					:name="block.data.name_field"
-					:min="block.data.rules.min"
-					:max="block.data.rules.max"
+					:minlength="block.data.rules.min"
+					:maxlength="block.data.rules.max"
 					type="text"
 					:id="block.data.name_field + '-id'"
 					:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
 					class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
 					:placeholder="block.data.title_field"
-			>
+			/>
 			<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
 				<svg class="shrink-0 size-4 text-red-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 					<circle cx="12" cy="12" r="10"></circle>
@@ -21,7 +22,13 @@
 				</svg>
 			</div>
 		</div>
-		<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
+		<div class="flex items-center mt-2 justify-between flex-wrap">
+			<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
+				{{ block.data.description }}
+			</p>
+			<p class="text-sm text-primaryBlue">{{ textarea.length }} / {{ block.data.rules.max }}</p>
+		</div>
+
 		<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>

 	</div>
@@ -32,7 +39,9 @@
 export default {
 	name: "TextAreaBlock",
 	data() {
-		return {}
+		return {
+			textarea: "",
+		}
 	},
 	methods: {},
 	props: {
@@ -3,10 +3,11 @@
 		<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
 		<div class="relative">
 			<input
+					v-model="text"
 					:required="block.data.rules.required"
 					:name="block.data.name_field"
-					:min="block.data.rules.min"
-					:max="block.data.rules.max"
+					:minlength="block.data.rules.min"
+					:maxlength="block.data.rules.max"
 					type="text"
 					:id="block.data.name_field + '-id'"
 					:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
@@ -21,7 +22,12 @@
 				</svg>
 			</div>
 		</div>
-		<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
+		<div class="flex items-center mt-2 justify-between flex-wrap">
+			<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
+				{{ block.data.description }}
+			</p>
+			<p class="text-sm text-primaryBlue">{{ text.length }} / {{ block.data.rules.max }}</p>
+		</div>
 		<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>

 	</div>
@@ -34,6 +40,7 @@ export default {
 	name: "TextBlock",
 	data() {
 		return {
+			text: "",
 		}
 	},
 	methods: {},
@@ -1,6 +1,4 @@
 <template>
-
-
 	<div v-if="success" class="bg-teal-50 border-t-2 border-teal-500 rounded-lg p-4 dark:bg-teal-800/30" role="alert" tabindex="-1" aria-labelledby="hs-bordered-success-style-label">
 		<div class="flex">
 			<div class="shrink-0">
@@ -34,7 +32,7 @@
 				</h2>
 			</div>
 			<!-- Card -->
-			<div class="mt-5 p-4 relative z-10 bg-white border rounded-xl sm:mt-10 md:p-10">
+			<div class="mt-5 p-4 relative z-1000 bg-white border rounded-xl sm:mt-10 md:p-10">
 				<form @submit="submitForm">
 					<component
 							v-for="(block, index) in blocks.data.columns"
@@ -50,28 +48,23 @@
 		</div>
 	</div>

+	<transition name="fade">
+		<SuccessNotification v-if="success" :text="message" />
+	</transition>
+
 </template>

 <script>
-import TextBlock from "@/Components/BuilderUi/Pages/FormBlocks/TextBlock.vue";
-import PhoneBlock from "@/Components/BuilderUi/Pages/FormBlocks/PhoneBlock.vue";
-import EmailBlock from "@/Components/BuilderUi/Pages/FormBlocks/EmailBlock.vue";
 import SubmitBlock from "@/Components/BuilderUi/Pages/FormBlocks/SubmitBlock.vue";
 import axios from "axios";
-import TextAreaBlock from "@/Components/BuilderUi/Pages/FormBlocks/TextAreaBlock.vue";
-import MultipleChoiceBlock from "@/Components/BuilderUi/Pages/FormBlocks/MultipleChoiceBlock.vue";
-import SingleChoiceBlock from "@/Components/BuilderUi/Pages/FormBlocks/SingleChoiceBlock.vue";
+import SuccessNotification from "@/Components/Notifications/SuccessNotification.vue";
+import {defineAsyncComponent} from "vue";

 export default {
 	name: "FormBuilder",
 	components: {
+		SuccessNotification,
 		SubmitBlock,
-		TextBlock,
-		PhoneBlock,
-		EmailBlock,
-		TextAreaBlock,
-		MultipleChoiceBlock,
-		SingleChoiceBlock
 	},
 	data() {
 		return {
@@ -81,61 +74,96 @@ export default {
 			message: null,
 		};
 	},
+
 	methods: {
 		getComponent(type) {
 			const componentMap = {
-				text: 'TextBlock',
-				phone: 'PhoneBlock',
-				email: 'EmailBlock',
-				textarea: 'TextAreaBlock',
-				multiple_choice: 'MultipleChoiceBlock',
-				single_choice: 'SingleChoiceBlock',
-
+				text: () => import('@/Components/BuilderUi/Pages/FormBlocks/TextBlock.vue'),
+				phone: () => import('@/Components/BuilderUi/Pages/FormBlocks/PhoneBlock.vue'),
+				email: () => import('@/Components/BuilderUi/Pages/FormBlocks/EmailBlock.vue'),
+				textarea: () => import('@/Components/BuilderUi/Pages/FormBlocks/TextAreaBlock.vue'),
+				multiple_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/MultipleChoiceBlock.vue'),
+				single_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/SingleChoiceBlock.vue'),
+				date: () => import('@/Components/BuilderUi/Pages/FormBlocks/DateBlock.vue')
 			};
-			return componentMap[type] || null;
+			return defineAsyncComponent(componentMap[type] || null);
 		},
 		submitForm(event) {
 			event.preventDefault();
+			this.formData = this.getFormData(event.target.elements);
+			this.sendDataToServer();
+		},

-			const formElements = event.target.elements;
-			this.formData = {};
+		getFormData(formElements) {
+			const formData = {};
 			for (let i = 0; i < formElements.length; i++) {
 				const element = formElements[i];
-				if (element.tagName === 'INPUT') {
-					// Убираем квадратные скобки из имени поля
-					const fieldName = element.name.endsWith('[]') ? element.name.slice(0, -2) : element.name;
+				if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+					const fieldName = this.normalizeFieldName(element.name);

-					if (element.type === 'checkbox') {
-						if (!this.formData[fieldName]) {
-							this.formData[fieldName] = [];
+					if (element.tagName === 'INPUT') {
+						if (element.type === 'checkbox') {
+							this.handleCheckbox(formData, fieldName, element);
+						} else if (fieldName && fieldName !== 'choices') {
+							formData[fieldName] = element.value;
 						}
-						if (element.checked) {
-							this.formData[fieldName].push(element.value);
-						}
-					} else if (fieldName && fieldName !== 'choices') {
-						this.formData[fieldName] = element.value;
+					} else if (element.tagName === 'TEXTAREA') {
+						formData[fieldName] = element.value;
 					}
 				}
 			}
+			return formData;
+		},

-			// Отправляем данные на сервер
+		normalizeFieldName(name) {
+			return name.endsWith('[]') ? name.slice(0, -2) : name;
+		},
+
+		handleCheckbox(formData, fieldName, element) {
+			if (!formData[fieldName]) {
+				formData[fieldName] = [];
+			}
+			if (element.checked) {
+				formData[fieldName].push(element.value);
+			}
+		},
+
+		sendDataToServer() {
 			axios.post(route('client.widget.form.submit', this.blocks.data.id), this.formData)
-					.then(response => {
-						if (response.data.status === 'ok') {
-							this.success = true;
-							this.message = response.data.message;
-							this.errors = null; // Сбрасываем ошибки при успешной отправке
-						}
-					})
-					.catch(error => {
-						this.errors = error.response.data || ['Неизвестная ошибка']; // Обработка ошибок
-						this.success = false; // Сбрасываем успешное состояние
-					});
-		}	},
+					.then(this.handleResponse)
+					.catch(this.handleError);
+		},
+
+		handleResponse(response) {
+			if (response.data.status === 'ok') {
+				this.success = true;
+				this.message = response.data.message;
+				this.errors = null; // Сбрасываем ошибки при успешной отправке
+			}
+		},
+
+		handleError(error) {
+			this.errors = error.response.data || ['Неизвестная ошибка']; // Обработка ошибок
+			this.success = false; // Сбрасываем успешное состояние
+		}
+	},
 	props: {
 		blocks: {
 			type: Object,
 		},
 	},
 }
-</script>
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: all 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+	transform: translateY(30px);
+}
+</style>
@@ -1,75 +1,45 @@
- <template>
-		<component
-				v-for="(block, index) in blocks"
-				:key="index"
-				:is="getComponent(block.type)"
-				:block="block"
-		/>
+<template>
+	<component
+			v-for="(block, index) in blocks"
+			:key="index"
+			:is="getComponent(block.type)"
+			:block="block"
+	/>
 </template>

 <script>
-import HeadingBlock from "@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue";
-import ParagraphBlock from "@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue";
-import ClientImageSlider from "@/Components/ClientImageSlider.vue";
-import ImageBlock from "@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue";
-import FileBlock from "@/Components/BuilderUi/Pages/Blocks/FileBlock.vue";
-import PersonBlock from "@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue";
-import StepperBlock from "@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue";
-import VideoBlock from "@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue";
-import TabBlock from "@/Components/BuilderUi/Pages/Blocks/TabBlock.vue";
-import PostListBlock from "@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue";
-import PageItemBlock from "@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue";
-import PostItemBlock from "@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue";
-import FormBlock from "@/Components/BuilderUi/Pages/Blocks/FormBlock.vue";
-
+import { defineAsyncComponent } from 'vue';
 export default {
 	name: "PageBuilder",
-	components: {
-		FileBlock,
-		ImageBlock,
-		ClientImageSlider,
-		ParagraphBlock,
-		HeadingBlock,
-		PersonBlock,
-		StepperBlock,
-		VideoBlock,
-		TabBlock,
-		PostListBlock,
-		PageItemBlock,
-		PostItemBlock,
-		FormBlock
-	},
 	methods: {
 		getComponent(type) {
 			const componentMap = {
-				heading: 'HeadingBlock',
-				paragraph: 'ParagraphBlock',
-				images: 'ClientImageSlider',
-				image: 'ImageBlock',
-				files: 'FileBlock',
-				person: 'PersonBlock',
-				stepper: 'StepperBlock',
-				video: 'VideoBlock',
-				tabs: 'TabBlock',
-				postsList: 'PostListBlock',
-				postItem: 'PostItemBlock',
-				pageItem: 'PageItemBlock',
-				customForm: 'FormBlock'
+				heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
+				paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
+				images: () => import('@/Components/ClientImageSlider.vue'),
+				image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
+				files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
+				person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
+				stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
+				video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
+				tabs: () => import('@/Components/BuilderUi/Pages/Blocks/TabBlock.vue'),
+				postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
+				postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
+				pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
+				customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue')
 			};
-			return componentMap[type] || null;
+
+			return defineAsyncComponent(componentMap[type] || null);
 		},
 	},
-
 	props: {
 		blocks: {
-			type: Object,
+			type: Array,
+			required: true,
 		},
 	},
 }
-
 </script>

-
 <style scoped>
-
 </style>
@@ -1,179 +1,106 @@
 <template>
-
 	<div class="border-b">
-		<div v-if="result !== null && result.length !== 0" class="relative px-3 pt-3 flex justify-start items-center overflow-x-auto whitespace-nowrap hide-scrollbar">
-			<button :class="selectedCategory === 'All' ? 'bg-blue-50 text-blue-500 border-blue-300' : ''" @click="selectedCategory = 'All'" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button">Все</button>
-			<button v-if="result && result.Post" :class="selectedCategory === 'Post' ? 'bg-blue-50 text-blue-500 border-blue-300' : ''" @click="selectedCategory = 'Post'" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button"><span class="hidden">{{ result.Post.length }}</span> Новости</button>
-			<button v-if="result && result.Page" :class="selectedCategory === 'Page' ? 'bg-blue-50 text-blue-500 border-blue-300' : ''" @click="selectedCategory = 'Page'" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button"><span class="hidden">{{ result.Page.length }}</span> Страницы</button>
-			<button v-if="result && result.EducationalGroup"
-							:class="selectedCategory === 'EducationalGroup' ? 'bg-blue-50 text-blue-500 border-blue-300' : ''"
-							@click="selectedCategory = 'EducationalGroup'"
-							class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2"
-							type="button"><span class="hidden">{{ result.EducationalGroup.length }}</span> Расписание
-			</button>
-			<button v-if="result && result.EducationalProgram" :class="selectedCategory === 'EducationalProgram' ? 'bg-blue-50 text-blue-500 border-blue-300' : ''" @click="selectedCategory = 'EducationalProgram'" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button"><span class="hidden">{{ result.EducationalProgram.length }}</span> Образовательная программа</button>
-			<button v-if="result && result.Event" :class="selectedCategory === 'Event' ? 'bg-blue-50 text-blue-500 border-blue-300' : ''" @click="selectedCategory = 'Event'" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button"><span class="hidden">{{ result.Event.length }}</span> Мероприятия</button>
-			<button v-if="result && result.AdditionalEducation" :class="selectedCategory === 'AdditionalEducation' ? 'bg-blue-50 text-blue-500 border-blue-300' : ''" @click="selectedCategory = 'AdditionalEducation'" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button"><span class="hidden">{{ result.AdditionalEducation.length }}</span> Дополнительное образование</button>
-		</div>
-		<div class="relative px-1 py-2 flex justify-between items-center">
-			<input autofocus="autofocus" autocomplete="off" @input="search" v-model="searchInput" type="text"
-						 id="hs-as-table-product-review-search"
-						 name="hs-as-table-product-review-search"
-						 class="py-1 placeholder-[#8F8F8F] font-light px-2 block flex-1 w-full border-none text-lg focus:z-10 border-transparent focus:border-transparent focus:ring-0"
-						 placeholder="Поиск по сайту">
-			<button :data-hs-overlay="'#' + open_id" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-4" type="button">Esc</button>
-		</div>
-	</div>
-	<div class="overflow-y-auto">
-		<div v-if="result === null" class="px-2 font-light">
-			<Link data-hs-overlay="#hs-basic-modal" :href="route('client.post.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
-				</svg>
-				<span class="text-sm">Новости</span>
-			</Link>
-			<Link data-hs-overlay="#hs-basic-modal" :href="route('client.event.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
-				</svg>
-
-				<span class="text-sm">Мероприятия</span>
-			</Link>
-			<Link data-hs-overlay="#hs-basic-modal" :href="route('client.program.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
-				</svg>
-
-				<span class="text-sm">Приемная компания</span>
-			</Link>
-			<Link data-hs-overlay="#hs-basic-modal" :href="route('client.program.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" />
-				</svg>
-
-				<span class="text-sm">Образовательные программы</span>
-			</Link>
-			<Link data-hs-overlay="#hs-basic-modal" :href="route('client.additionalEducation.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z" />
-				</svg>
-
-				<span class="text-sm">Курсы дополнительного образования</span>
-			</Link>
-
-		</div>
-		<div v-else-if="result.length !== 0" class="px-2 font-light">
-			<template v-for="(elements, tag) in result">
-				<template v-for="item in elements">
-					<template v-if="selectedCategory === 'All' || selectedCategory === tag">
-						<Link v-if="item.tag === 'Post'" data-hs-overlay="#hs-basic-modal" :href="route('client.post.show', item.data.slug)" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
-							</svg>
-							<span class="text-sm">{{ item.data.title }}</span>
-						</Link>
-					</template>
-					<template v-if="selectedCategory === 'All' || selectedCategory === tag">
-						<div v-if="item.tag === 'EducationalGroup'" data-hs-overlay="#hs-basic-modal" class="my-1 flex gap-3 px-2 py-2 items-center rounded-lg">
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
-							</svg>
-							<span class="text-sm">{{ item.data.title }}</span>
-						</div>
-						<template v-for="schedule in item.data.schedules">
-							<div class="mb-2">
-								<div class="flex gap-3 px-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-									<Link :href="rou" class="ml-[8px] flex h-12 w-full items-center gap-2 overflow-hidden border-l border-gray-200 px-4 pl-[22px] text-sm text-gray-900 md:h-10">
-										<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />
-										</svg>
-										<p class="truncate">{{ schedule.title }}</p>
-									</Link>
-								</div>
-							</div>
-						</template>
-					</template>
-					<template v-if="selectedCategory === 'All' || selectedCategory === tag">
-						<Link v-if="item.tag === 'Page' && item.data.is_url == false" data-hs-overlay="#hs-basic-modal" :href="route('page.view', item.data.path) + '/'" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
-							</svg>
-							<span class="text-sm">{{ item.data.title }}</span>
-						</Link>
-						<a v-if="item.tag === 'Page' && item.data.is_url == true" data-hs-overlay="#hs-basic-modal" :href="item.data.path" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
-							</svg>
-							<span class="text-sm">{{ item.data.title }}</span>
-						</a>
-					</template>
-					<template v-if="selectedCategory === 'All' || selectedCategory === tag">
-						<Link v-if="item.tag === 'EducationalProgram'" data-hs-overlay="#hs-basic-modal" :href="route('client.program.show', item.data.id)" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
-							</svg>
-
-							<span class="text-sm">{{ item.data.name }}</span>
-						</Link>
-					</template>
-					<template v-if="selectedCategory === 'All' || selectedCategory === tag">
-						<Link v-if="item.tag === 'Event'" data-hs-overlay="#hs-basic-modal" :href="route('client.event.show', item.data.slug)" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 2.994v2.25m10.5-2.25v2.25m-14.252 13.5V7.491a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v11.251m-18 0a2.25 2.25 0 0 0 2.25 2.25h13.5a2.25 2.25 0 0 0 2.25-2.25m-18 0v-7.5a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v7.5m-6.75-6h2.25m-9 2.25h4.5m.002-2.25h.005v.006H12v-.006Zm-.001 4.5h.006v.006h-.006v-.005Zm-2.25.001h.005v.006H9.75v-.006Zm-2.25 0h.005v.005h-.006v-.005Zm6.75-2.247h.005v.005h-.005v-.005Zm0 2.247h.006v.006h-.006v-.006Zm2.25-2.248h.006V15H16.5v-.005Z" />
-							</svg>
-
-							<span class="text-sm">{{ item.data.title }}</span>
-						</Link>
-					</template>
-					<template v-if="selectedCategory === 'All' || selectedCategory === tag">
-						<Link v-if="item.tag === 'AdditionalEducation'" data-hs-overlay="#hs-basic-modal" :href="route('client.additionalEducation.show', item.data.id)" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
-							</svg>
-
-
-							<span class="text-sm">{{ item.data.title }}</span>
-						</Link>
-					</template>
-
-					<div v-if="item.matches.length != 0 && selectedCategory === 'All' || selectedCategory === tag" class="">
-						<template v-for="match in item.matches.slice(0,3)">
-							<div class="flex gap-3 px-2 items-center hover:bg-[#F2F2F2] rounded-lg">
-								<div class="ml-[8px] flex h-12 w-full items-center gap-2 overflow-hidden border-l border-gray-200 px-4 pl-[22px] text-sm text-gray-900 md:h-10">
-									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-										<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />
-									</svg>
-									<p class="truncate">{{ match }}</p>
-								</div>
-							</div>
-						</template>
-					</div>
+			<div v-if="result !== null && result.length !== 0" class="relative px-3 pt-3 flex justify-start items-center overflow-x-auto whitespace-nowrap hide-scrollbar">
+				<button @click="categorySort(null)"
+								:class="{
+  									'bg-blue-50': selectedCategory === null,
+  									'text-blue-500': selectedCategory === null,
+  									'border-blue-300': selectedCategory === null,
+  									'animate-pulse': loading === true
+									}"
+								class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button">Все</button>
+				<template v-for="category in categories">
+					<button @click="categorySort(category)"
+									:class="{
+  									'bg-blue-50': selectedCategory === category,
+  									'text-blue-500': selectedCategory === category,
+  									'border-blue-300': selectedCategory === category,
+  									'animate-pulse': loading === true
+									}"
+									class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button">{{ ruCategories[category] }}</button>
 				</template>
-			</template>
+			</div>
+			<div class="relative px-1 py-2 flex justify-between items-center">
+				<input autofocus="autofocus" autocomplete="off" @input="search" v-model="searchInput" type="text"
+							 id="hs-as-table-product-review-search"
+							 name="hs-as-table-product-review-search"
+							 class="py-1 placeholder-[#8F8F8F] font-light px-2 block flex-1 w-full border-none text-lg focus:z-10 border-transparent focus:border-transparent focus:ring-0"
+							 placeholder="Поиск по сайту">
+				<button :data-hs-overlay="'#' + open_id" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-4" type="button">Esc</button>
+			</div>
 		</div>
-
-
+	<div class="overflow-y-auto relative">
+		<ResultList :result="result" :loading="loading" :selected-category="selectedCategory" />
 	</div>
+	<nav v-if="paginate" class="bg-white border border-gray-100 flex items-center gap-x-1 fixed bottom-4 w-[200px] justify-center left-0 right-0 mx-auto py-2 rounded-xl " aria-label="Pagination">
+		<button @click="prev(paginate.prev_page)" :disabled="!paginate.prev_page" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
+			<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<path d="m15 18-6-6 6-6"></path>
+			</svg>
+			<span class="sr-only">Previous</span>
+		</button>
+		<div class="flex items-center gap-x-1">
+			<span class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 py-2 px-3 text-sm rounded-lg focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">{{ paginate.current_page }}</span>
+			<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">из</span>
+			<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">{{ paginate.last_page }}</span>
+		</div>
+		<button @click="next(paginate.next_page)" :disabled="!paginate.next_page" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
+			<span class="sr-only">Next</span>
+			<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<path d="m9 18 6-6-6-6"></path>
+			</svg>
+		</button>
+	</nav>
 </template>

 <script>
 import {debounce} from "lodash/function.js";
 import {Link} from "@inertiajs/vue3";
 import {Inertia} from "@inertiajs/inertia";
+import ResultList from "@/Components/Search/ResultList.vue";
+import CategoryList from "@/Components/Search/CategorySearchList.vue";
+import CategorySearchList from "@/Components/Search/CategorySearchList.vue";
 export default {
 	name: "ClientGlobalSearch",
 	data() {
 		return {
 			searchInput: "",
 			result: null,
-			selectedCategory: 'All',
+			paginate: null,
+			selectedCategory: null,
+			categories: null,
+			ruCategories: { Post: "Новости", Page: "Страницы", Event: "Мероприятия" },
+			loading: false,
 		}
 	},
 	components: {
+		CategorySearchList,
+		CategoryList,
+		ResultList,
 		Link,
 	},
 	methods: {
+		categorySort: debounce(function(category) {
+			this.toggleLoadingState(true);
+			axios({
+				method: "get",
+				url: route('client.search.index'),
+				params: {
+					search: this.searchInput.toLowerCase(),
+					category: category
+				}
+			}).then((response) => {
+				console.log(response.data.searchRes);
+				this.paginate = response.data.paginate;
+				this.result = response.data.searchRes;
+				this.categories = response.data.result_type;
+				this.selectedCategory = response.data.selectedCategory;
+				this.toggleLoadingState(false);
+			}).catch((error) => {
+				console.error("Ошибка при получении данных:", error);
+				this.toggleLoadingState(false);
+			});
+		}, 500),
 		search: debounce(function () {
 			axios({
 				method: "get",
@@ -182,10 +109,53 @@ export default {
 					search: this.searchInput.toLowerCase(),
 				}
 			}).then((response) => {
+				console.log(response.data.searchRes)
+				this.paginate = response.data.paginate
 				this.result = response.data.searchRes;
-				console.log(this.result)
+				this.categories = response.data.result_type
 			});
 		}, 500),
+
+		next: debounce(function (page) {
+			this.toggleLoadingState(true);
+			axios({
+				method: "get",
+				url: route('client.search.index'),
+				params: {
+					search: this.searchInput.toLowerCase(),
+					page: page,
+					category: this.selectedCategory
+				}
+			}).then((response) => {
+				this.paginate = response.data.paginate
+				this.result = response.data.searchRes;
+				this.toggleLoadingState(false);
+
+			});
+		}, 500),
+
+		prev: debounce(function (page) {
+			this.toggleLoadingState(true);
+			axios({
+				method: "get",
+				url: route('client.search.index'),
+				params: {
+					search: this.searchInput.toLowerCase(),
+					page: page,
+					category: this.selectedCategory
+				}
+			}).then((response) => {
+				this.paginate = response.data.paginate
+				this.result = response.data.searchRes;
+				this.toggleLoadingState(false);
+			});
+		}, 500),
+
+		toggleLoadingState(state) {
+			this.loading = state
+		},
+
+
 		textLimit(text, symbols) {
 			if (text.length > symbols) {
 				let LimitedText
@@ -54,9 +54,7 @@
                            >
                              <a
                                  :href="route('client.post.show', post.slug)"
-                              >It is a cliche philosophical question, but it touches on
-                                something fundamental about how humans relate to the world
-                                around them.
+                              >{{ post.preview_text }}
                              </a>
                            </p>
                          </div>
@@ -1,8 +1,8 @@
 <template>

 	<div :id="open_id" class="hs-overlay hidden [--overlay-backdrop:false] size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" :aria-labelledby="open_id + '-label'">
-		<div class="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-10 opacity-0 transition-all max-w-full max-h-full h-full md:hs-overlay-open:mt-10 md:mt-0 md:max-w-lg md:max-h-none md:h-auto md:mx-auto">
-			<div class="flex flex-col bg-white pointer-events-auto max-w-full max-h-full h-full md:max-w-lg md:max-h-none md:h-auto md:border md:rounded-xl md:shadow-sm dark:bg-neutral-800 md:dark:border-neutral-700">
+		<div class="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-10 opacity-0 transition-all max-w-full max-h-full h-full md:mt-0 md:mx-auto">
+			<div class="flex flex-col bg-white pointer-events-auto max-w-full max-h-full h-full md:max-h-full">
 				<ClientGlobalSearch :open_id="open_id" ></ClientGlobalSearch>
 			</div>
 		</div>
@@ -0,0 +1,50 @@
+<template>
+	<div id="dismiss-alert" class="fixed bottom-10 left-3 right-3 md:w-[500px] md:left-auto md:right-5 z-10000 hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-teal-50 border border-teal-200 text-sm text-teal-800 rounded-lg p-4" role="alert" tabindex="-1" aria-labelledby="hs-dismiss-button-label">
+		<div class="flex">
+			<div class="shrink-0">
+				<svg class="shrink-0 size-4 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
+					<path d="m9 12 2 2 4-4"></path>
+				</svg>
+			</div>
+			<div class="ms-2">
+				<h3 id="hs-dismiss-button-label" class="text-sm font-medium">
+					{{ text }}
+				</h3>
+			</div>
+			<div class="ps-3 ms-auto">
+				<div class="-mx-1.5 -my-1.5">
+					<button type="button" class="inline-flex bg-teal-50 rounded-lg p-1.5 text-teal-500 hover:bg-teal-100 focus:outline-none focus:bg-teal-100" data-hs-remove-element="#dismiss-alert">
+						<span class="sr-only">Dismiss</span>
+						<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<path d="M18 6 6 18"></path>
+							<path d="m6 6 12 12"></path>
+						</svg>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+
+<script>
+export default {
+	name: "SuccessNotification",
+	data() {
+		return {
+		}
+	},
+	props: {
+		text: {
+			type: String,
+			default: "Успех!",
+		}
+	}
+}
+</script>
+
+
+<style scoped>
+
+</style>
@@ -0,0 +1,62 @@
+<template>
+	<div class="relative px-3 pt-3 flex justify-start items-center overflow-x-auto whitespace-nowrap hide-scrollbar">
+		<button @click="categorySort(null)" :class="selectedCategory === null ? 'bg-blue-50 text-blue-500 border-blue-300' : ''" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button">Все</button>
+		<template v-for="category in categories">
+			<button @click="categorySort(category)"
+							:class="{
+  							'bg-blue-50': selectedCategory === category,
+  							'text-blue-500': selectedCategory === category,
+  							'border-blue-300': selectedCategory === category,
+							}"
+							class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button">{{ category }}</button>
+		</template>
+	</div>
+</template>
+
+<script>
+import {debounce} from "lodash/function.js";
+
+export default {
+	name: "CategorySearchList",
+	data() {
+		return {
+			selectedCategory: null,
+			categories: null,
+			paginate: null,
+			loading: false,
+		}
+	},
+	methods: {
+		categorySort: debounce(function (category) {
+			this.loading = true
+			this.selectedCategory = category; // Устанавливаем выбранную категорию
+			this.$emit('update:selected-category', this.selectedCategory, this.categories, this.paginate); // Эмитируем событие
+			axios({
+				method: "get",
+				url: route('client.search.index'),
+				params: {
+					search: this.search.toLowerCase(),
+					category: category
+				}
+			}).then((response) => {
+				this.paginate = response.data.paginate;
+				this.result = response.data.searchRes;
+				this.categories = response.data.result_type;
+				this.loading = false;
+			});
+		}, 500),
+	},
+	props: {
+		categories: {
+			type: Array,
+		},
+		search: {
+			type: String,
+		}
+	}
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,48 @@
+<template>
+	<Link v-if="item.tag === 'AdditionalEducation'" data-hs-overlay="#hs-basic-modal" :href="route('client.additionalEducation.show', item.data.id)" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
+		</svg>
+
+
+		<span class="text-sm">{{ item.data.title }}</span>
+	</Link>
+	<div v-if="item.matches.length !== 0" class="">
+		<template v-for="match in item.matches.slice(0,3)">
+			<div class="flex gap-3 px-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+				<div class="ml-[8px] flex h-12 w-full items-center gap-2 overflow-hidden border-l border-gray-200 px-4 pl-[22px] text-sm text-gray-900 md:h-10">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />
+					</svg>
+					<p class="truncate">{{ match }}</p>
+				</div>
+			</div>
+		</template>
+	</div>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import PreSearchLinkList from "@/Components/Search/PreSearchLinkList.vue";
+
+export default {
+	name: "ResultAdditionalEducationItem",
+	components: {PreSearchLinkList, Link},
+	data() {
+		return {
+			selectedCategory: 'All',
+		}
+	},
+
+	props: {
+		item: {
+			type: Object,
+		}
+	},
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,51 @@
+<template>
+	<div v-if="item.tag === 'EducationalGroup'" data-hs-overlay="#hs-basic-modal"
+			 class="my-1 flex gap-3 px-2 py-2 items-center rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+				 class="w-5 h-5 flex-shrink-0">
+			<path stroke-linecap="round" stroke-linejoin="round"
+						d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
+		</svg>
+		<span class="text-sm">{{ item.data.title }}</span>
+	</div>
+	<template v-for="schedule in item.data.schedules">
+		<div class="mb-2">
+			<div class="flex gap-3 px-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+				<Link :href="rou"
+							class="ml-[8px] flex h-12 w-full items-center gap-2 overflow-hidden border-l border-gray-200 px-4 pl-[22px] text-sm text-gray-900 md:h-10">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+							 stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5"/>
+					</svg>
+					<p class="truncate">{{ schedule.title }}</p>
+				</Link>
+			</div>
+		</div>
+	</template>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import PreSearchLinkList from "@/Components/Search/PreSearchLinkList.vue";
+
+export default {
+	name: "ResultEducationalGroupItem",
+	components: {PreSearchLinkList, Link},
+	data() {
+		return {
+			selectedCategory: 'All',
+		}
+	},
+
+	props: {
+		item: {
+			type: Object,
+		}
+	},
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,48 @@
+<template>
+	<Link v-if="item.tag === 'EducationalProgram'" data-hs-overlay="#hs-basic-modal" :href="route('client.program.show', item.data.id)" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
+		</svg>
+
+		<span class="text-sm">{{ item.data.name }}</span>
+	</Link>
+	<div v-if="item.matches.length !== 0" class="">
+		<template v-for="match in item.matches.slice(0,3)">
+			<div class="flex gap-3 px-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+				<div class="ml-[8px] flex h-12 w-full items-center gap-2 overflow-hidden border-l border-gray-200 px-4 pl-[22px] text-sm text-gray-900 md:h-10">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />
+					</svg>
+					<p class="truncate">{{ match }}</p>
+				</div>
+			</div>
+		</template>
+	</div>
+
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import PreSearchLinkList from "@/Components/Search/PreSearchLinkList.vue";
+
+export default {
+	name: "ResultEducationalProgramItem",
+	components: {PreSearchLinkList, Link},
+	data() {
+		return {
+			selectedCategory: 'All',
+		}
+	},
+
+	props: {
+		item: {
+			type: Object,
+		}
+	},
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,47 @@
+<template>
+	<Link v-if="item.tag === 'Event'" data-hs-overlay="#hs-basic-modal" :href="route('client.event.show', item.data.slug)" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 2.994v2.25m10.5-2.25v2.25m-14.252 13.5V7.491a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v11.251m-18 0a2.25 2.25 0 0 0 2.25 2.25h13.5a2.25 2.25 0 0 0 2.25-2.25m-18 0v-7.5a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v7.5m-6.75-6h2.25m-9 2.25h4.5m.002-2.25h.005v.006H12v-.006Zm-.001 4.5h.006v.006h-.006v-.005Zm-2.25.001h.005v.006H9.75v-.006Zm-2.25 0h.005v.005h-.006v-.005Zm6.75-2.247h.005v.005h-.005v-.005Zm0 2.247h.006v.006h-.006v-.006Zm2.25-2.248h.006V15H16.5v-.005Z" />
+		</svg>
+
+		<span class="text-sm">{{ item.data.title }}</span>
+	</Link>
+	<div v-if="item.matches.length !== 0" class="">
+		<template v-for="match in item.matches.slice(0,3)">
+			<div class="flex gap-3 px-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+				<div class="ml-[8px] flex h-12 w-full items-center gap-2 overflow-hidden border-l border-gray-200 px-4 pl-[22px] text-sm text-gray-900 md:h-10">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />
+					</svg>
+					<p class="truncate">{{ match }}</p>
+				</div>
+			</div>
+		</template>
+	</div>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import PreSearchLinkList from "@/Components/Search/PreSearchLinkList.vue";
+
+export default {
+	name: "ResultEventItem",
+	components: {PreSearchLinkList, Link},
+	data() {
+		return {
+			selectedCategory: 'All',
+		}
+	},
+
+	props: {
+		item: {
+			type: Object,
+		}
+	},
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,52 @@
+<template>
+	<Link v-if="item.tag === 'Page' && item.data.is_url == false" data-hs-overlay="#hs-basic-modal" :href="route('page.view', item.data.path) + '/'" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+		</svg>
+		<span class="text-sm">{{ item.data.title }}</span>
+	</Link>
+	<a v-if="item.tag === 'Page' && item.data.is_url == true" data-hs-overlay="#hs-basic-modal" :href="item.data.path" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+		</svg>
+		<span class="text-sm">{{ item.data.title }}</span>
+	</a>
+<!--	<div v-if="item.matches.length !== 0" class="">-->
+<!--		<template v-for="match in item.matches.slice(0,3)">-->
+<!--			<div class="flex gap-3 px-2 items-center hover:bg-[#F2F2F2] rounded-lg">-->
+<!--				<div class="ml-[8px] flex h-12 w-full items-center gap-2 overflow-hidden border-l border-gray-200 px-4 pl-[22px] text-sm text-gray-900 md:h-10">-->
+<!--					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">-->
+<!--						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />-->
+<!--					</svg>-->
+<!--					<p class="truncate">{{ match }}</p>-->
+<!--				</div>-->
+<!--			</div>-->
+<!--		</template>-->
+<!--	</div>-->
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import PreSearchLinkList from "@/Components/Search/PreSearchLinkList.vue";
+
+export default {
+	name: "ResultPageItem",
+	components: {PreSearchLinkList, Link},
+	data() {
+		return {
+			selectedCategory: 'All',
+		}
+	},
+
+	props: {
+		item: {
+			type: Object,
+		}
+	},
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,47 @@
+<template>
+	<a v-if="item.tag === 'Post'" data-hs-overlay="#hs-basic-modal" :href="route('client.post.show', item.data.slug)" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
+		</svg>
+		<span class="text-sm">{{ item.data.title }}</span>
+	</a>
+<!--	<div v-if="item.matches.length !== 0" class="">-->
+<!--		<template v-for="match in item.matches.slice(0,3)">-->
+<!--			<div class="flex gap-3 px-2 items-center hover:bg-[#F2F2F2] rounded-lg">-->
+<!--				<div class="ml-[8px] flex h-12 w-full items-center gap-2 overflow-hidden border-l border-gray-200 px-4 pl-[22px] text-sm text-gray-900 md:h-10">-->
+<!--					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">-->
+<!--						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />-->
+<!--					</svg>-->
+<!--					<p class="truncate">{{ match }}</p>-->
+<!--				</div>-->
+<!--			</div>-->
+<!--		</template>-->
+<!--	</div>-->
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import PreSearchLinkList from "@/Components/Search/PreSearchLinkList.vue";
+
+export default {
+	name: "ResultPostItem",
+	components: {PreSearchLinkList, Link},
+	data() {
+		return {
+			selectedCategory: 'All',
+		}
+	},
+	methods: {
+
+	},
+	props: {
+		item: {
+			type: Object,
+		}
+	},
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,50 @@
+<template>
+	<Link data-hs-overlay="#hs-basic-modal" :href="route('client.post.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
+		</svg>
+		<span class="text-sm">Новости</span>
+	</Link>
+	<Link data-hs-overlay="#hs-basic-modal" :href="route('client.event.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+		</svg>
+
+		<span class="text-sm">Мероприятия</span>
+	</Link>
+	<Link data-hs-overlay="#hs-basic-modal" :href="route('client.program.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
+		</svg>
+
+		<span class="text-sm">Приемная компания</span>
+	</Link>
+	<Link data-hs-overlay="#hs-basic-modal" :href="route('client.program.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" />
+		</svg>
+
+		<span class="text-sm">Образовательные программы</span>
+	</Link>
+	<Link data-hs-overlay="#hs-basic-modal" :href="route('client.additionalEducation.index')" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z" />
+		</svg>
+
+		<span class="text-sm">Курсы дополнительного образования</span>
+	</Link>
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "PreSearchLinkList",
+	components: {Link},
+
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,73 @@
+<template>
+	<PreSearchLinkList v-if="result === null" class="px-2 font-light" />
+	<div v-else-if="result.length !== 0"
+			 :class="{'filter': loading === true}"
+			 class="px-2 font-light duration-300">
+		<template v-for="(elements, tag) in result">
+			<component
+					v-for="(item, index) in elements"
+					:key="index"
+					:is="getComponent(tag)"
+					:item="item"
+					v-if="selectedCategory === null || selectedCategory === tag"
+			/>
+		</template>
+	</div>
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import PreSearchLinkList from "@/Components/Search/PreSearchLinkList.vue";
+import ResultPostItem from "@/Components/Search/Items/ResultPostItem.vue";
+import ResultPageItem from "@/Components/Search/Items/ResultPagetItem.vue";
+import ResultEducationalProgramItem from "@/Components/Search/Items/ResultEducationalProgramItem.vue";
+import ResultEventItem from "@/Components/Search/Items/ResultEventItem.vue";
+import ResultAdditionalEducationItem from "@/Components/Search/Items/ResultAdditionalEducationalItem.vue";
+import ResultEducationalGroupItem from "@/Components/Search/Items/ResultEducationalGroupItem.vue";
+
+export default {
+	name: "ResultList",
+	components: {
+		ResultEducationalGroupItem,
+		ResultAdditionalEducationItem,
+		ResultEventItem, ResultEducationalProgramItem, ResultPageItem, ResultPostItem, PreSearchLinkList, Link},
+	data() {
+		return {
+		}
+	},
+	methods: {
+		getComponent(type) {
+			const componentMap = {
+				Post: 'ResultPostItem',
+				Page: 'ResultPageItem',
+				Event: 'ResultEventItem',
+				EducationalProgram: 'ResultEducationalProgramItem',
+				AdditionalEducational: 'ResultAdditionalEducationItem',
+				EducationalGroup: 'ResultEducationalGroupItem',
+			};
+			return componentMap[type] || null;
+		},
+	},
+
+
+	props: {
+		result: {
+			type: Object,
+		},
+		selectedCategory: {
+			type: String,
+		},
+		loading: {
+			type: Boolean,
+		}
+	},
+}
+</script>
+
+<style scoped>
+
+.filter {
+	filter: saturate(100%) blur(3px);
+}
+
+</style>
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+	name: "PostSearchCategory"
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -54,5 +54,12 @@ export default {
        fill: 'none',
        stroke_width: 1.5,
        stroke: 'currentColor',
-}
+    },
+    heart: {
+        path: '<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke_width: 1.5,
+        stroke: 'currentColor',
+    },
 }