first commit

resources/js/Components/LegacyComponents/AdminFormButton.vue

@@ -0,0 +1,20 @@
+<script>
+export default {
+	name: "AdminFormButton",
+	inheritAttrs: false,
+	props: [
+		'title',
+	]
+}
+</script>
+
+<template>
+	<button class="text-white inline-flex items-center bg-blue-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+		<svg class="mr-1 -ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
+		{{ title }}
+	</button>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminFormCheckbox.vue

@@ -0,0 +1,27 @@
+<!-- AdminFormCheckbox.vue -->
+<template>
+  <div class="flex mb-4">
+    <input
+        :checked="modelValue"
+        @change="$emit('update:modelValue', $event.target.checked)"
+        type="checkbox"
+        class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
+        id="hs-checked-checkbox"
+    >
+    <label for="hs-checked-checkbox" class="text-sm text-gray-500 ml-3 dark:text-gray-400">{{ label }}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AdminFormCheckbox",
+  props: {
+    modelValue: Boolean,
+    label: String
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminFormDropZone.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="w-full pb-4">
+		<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="multiple_files">{{ label }}</label>
+		<div class="bg-gray-50 text-center py-10 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" ref="dropzone">
+		</div>
+	</div>
+</template>
+
+<script>
+import { Dropzone } from "dropzone";
+export default {
+	name: "AdminFormDropZone",
+	data() {
+		return {
+			dropzone: null,
+			images: null,
+		};
+	},
+	methods: {
+		saveImages() {
+			this.images = this.dropzone.getAcceptedFiles();
+			this.$emit('get-images', this.images);
+		},
+
+	},
+	props: ["label", "modelValue"],
+	mounted() {
+		this.dropzone = new Dropzone(this.$refs.dropzone, {
+			url: "adgdagssdgag",
+			autoProcessQueue: false,
+			dictDefaultMessage: "Put your custom message here",
+			resizeHeight: 800,
+			addRemoveLinks: true,
+		});
+	},
+};
+</script>

resources/js/Components/LegacyComponents/AdminFormEditorJs.vue

@@ -0,0 +1,87 @@
+<script>
+// import EditorJS from "@editorjs/editorjs";
+// import Header from "@editorjs/header";
+// import List from "@editorjs/list";
+// import AttachesTool from "@editorjs/attaches";
+// import ImageTool from "@editorjs/image";
+import {data} from "autoprefixer";
+
+export default {
+	name: "AdminFormEditorJs",
+	data() {
+		return {
+			editor: null,
+			content: null,
+		}
+	},
+	methods: {
+		saveEditor() {
+			this.editor.save().then((outputData) => {
+				this.content = outputData
+				this.$emit('get-content', this.content);
+			}).catch((error) => {
+				console.log('Saving failed: ', error)
+			});
+		},
+
+	},
+	mounted() {
+		this.editor = new EditorJS({
+			holder: this.$refs.editor,
+			minHeight: 150,
+			data: this.contentData,
+			placeholder: "Заполните контентом",
+			tools: {
+				header: {
+					class: Header,
+					inlineToolbar: ['link'],
+				},
+				list: {
+					class: List,
+					inlineToolbar: ['link', 'bold'],
+				},
+				attaches: {
+					class: AttachesTool,
+					config: {
+						endpoint: '/upload-file'
+					}
+				},
+				image: {
+					class: ImageTool,
+					config: {
+						endpoints: {
+							byFile: '/upload-image', // Your backend file uploader endpoint
+						}
+					}
+				},
+			},
+			onChange: () => {
+				this.saveEditor()
+			}
+		});
+	},
+
+	props: [
+		'error',
+		'contentData'
+	]
+}
+</script>
+
+<template>
+	<div class="mb-4">
+		<div class="sm:col-span-2">
+			<div :class="{'border-red-600 dark:border-red-500 transition-colors duration-500': error}"
+				 class="block p-2.5 w-full text-sm text-gray-900 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
+				<div class="sm:col-span-12">
+					<div class="" ref="editor"></div>
+				</div>
+			</div>
+			<p v-if="error" id="outlined_error_help" class="mt-2 text-xs text-red-600 dark:text-red-400">{{ error }}</p>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminFormHeader.vue

@@ -0,0 +1,20 @@
+<script>
+export default {
+	name: "AdminFormHeader",
+	props: [
+		'title'
+	]
+}
+</script>
+
+<template>
+	<div class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5 dark:border-gray-600">
+		<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+			{{ title }}
+		</h3>
+	</div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminFormInput.vue

@@ -0,0 +1,52 @@
+<script>
+export default {
+	name: "AdminFormInput",
+	data() {
+		return {
+			'uniq': (Math.random().toString(36)),
+		}
+	},
+	props: {
+		modelValue: {
+		},
+		error: {
+			type: Array
+		},
+		placeholder: {
+			default: '',
+			type: String
+		},
+		disable: {
+			default: false,
+			type: Boolean
+		},
+		type: {
+			default: 'text',
+			type: String
+		},
+		required: {
+			default: false,
+			type: Boolean
+		}
+	}
+}
+</script>
+
+<template>
+	<div>
+		<div class="relative">
+			<input :disabled="disable" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :required="this.required" autocomplete="off" :type="this.type" :id="'floating_' + this.uniq"
+				   :class="{'border-red-600 dark:border-red-500 transition-colors duration-500': error}"
+				   class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-1 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
+				   placeholder=" " />
+			<label :for="'floating_' + this.uniq"
+				   :class="{'text-red-600 dark:text-red-500 transition-colors duration-500': error}"
+				   class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-2 z-2 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1">{{ placeholder }}</label>
+		</div>
+		<p v-if="error" id="outlined_error_help" class="mt-2 text-xs text-red-600 dark:text-red-400">{{ error }}</p>
+	</div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminFormLayout.vue

@@ -0,0 +1,15 @@
+<script>
+export default {
+	name: "AdminFormLayout"
+}
+</script>
+
+<template>
+	<div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminFormList.vue

@@ -0,0 +1,54 @@
+<script>
+export default {
+	name: "AdminFormList",
+	props: [
+		'label',
+		'items',
+		'checked_ids'
+	],
+	data() {
+		return {
+			selectedItems: this.checked_ids ? this.checked_ids : [],
+		}
+	},
+	methods: {
+		handleData() {
+			setTimeout(() => {
+				this.$emit('get-data', this.selectedItems)
+			}, 10);
+
+		}
+	}
+}
+</script>
+
+<template>
+	<div>
+		<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="multiple_files">{{ label }}</label>
+		<ul class="max-w-sm flex flex-col">
+			<template v-for="item in items">
+				<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
+					<div class="relative flex items-start w-full">
+						<div class="flex items-center h-5">
+							<input :id="item.id" type="checkbox"
+									class="border-gray-200 rounded disabled:opacity-50 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
+									v-model="selectedItems"
+									:value="item.id"
+									@input="handleData"
+								   checked
+							>
+						</div>
+						<label :for="item.id" class="ms-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
+							{{ item.title }}
+						</label>
+					</div>
+				</li>
+			</template>
+		</ul>
+	</div>
+</template>
+
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminFormListItem.vue

@@ -0,0 +1,20 @@
+<script>
+export default {
+	name: "AdminFormListItem",
+	props: [
+		'item'
+	],
+	data() {
+		return {
+			selectedItems: []
+		};
+	}
+}
+</script>
+
+<template>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminFormPageEditorJs.vue

@@ -0,0 +1,119 @@
+<script>
+import EditorJS from "@editorjs/editorjs";
+import Header from "@editorjs/header";
+import List from "@editorjs/list";
+import AttachesTool from "@editorjs/attaches";
+import ImageTool from "@editorjs/image";
+import editorjsColumns from "@calumk/editorjs-columns";
+import LinkTool from '@editorjs/link';
+
+export default {
+	name: "AdminFormPageEditorJs",
+	data() {
+		return {
+			editor: null,
+			content: null,
+		}
+	},
+	methods: {
+		saveEditor() {
+			this.editor.save().then((outputData) => {
+				this.content = outputData
+				this.$emit('get-content', this.content);
+			}).catch((error) => {
+				console.log('Saving failed: ', error)
+			});
+		},
+
+	},
+	mounted() {
+		const columnTools = {
+			header: Header,
+			list: List,
+			image: {
+				class: ImageTool,
+				config: {
+					endpoints: {
+						byFile: '/upload-image', // Your backend file uploader endpoint
+					}
+				}
+			},
+		};
+		const mainTools = {
+			image: {
+				class: ImageTool,
+				config: {
+					endpoints: {
+						byFile: '/upload-image', // Your backend file uploader endpoint
+					}
+				}
+			},
+			header: {
+				class: Header,
+				inlineToolbar: ['link'],
+				levels: [2],
+				defaultLevel: 2
+			},
+			list: {
+				class: List,
+				inlineToolbar: ['link', 'bold'],
+			},
+			attaches: {
+				class: AttachesTool,
+				config: {
+					endpoint: '/upload-file'
+				}
+			},
+			columns: {
+				class: editorjsColumns,
+				config: {
+					EditorJsLibrary: EditorJS, // Pass the library instance to the columns instance.
+					tools: columnTools // IMPORTANT! ref the columnTools
+				}
+			},
+			linkTool: {
+				class: LinkTool,
+				config: {
+					endpoint: '/getInfoForLink', // Your backend endpoint for url data fetching,
+				}
+			}
+		};
+		this.editor = new EditorJS({
+			holder: this.$refs.editor,
+			minHeight: 150,
+			data: this.contentData,
+			placeholder: "Заполните контент страницы",
+			tools: mainTools,
+			onChange: () => {
+				this.saveEditor()
+			}
+		});
+	},
+
+	props: [
+		'error',
+		'contentData'
+	]
+}
+</script>
+
+<template>
+	<div class="mb-4">
+		<div class="sm:col-span-2">
+			<div :class="{'border-red-600 dark:border-red-500 transition-colors duration-500': error}"
+				 class="block p-2.5 w-full text-sm text-gray-900 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
+				<div class="sm:col-span-12">
+					<div class="" ref="editor"></div>
+				</div>
+			</div>
+			<p v-if="error" id="outlined_error_help" class="mt-2 text-xs text-red-600 dark:text-red-400">{{ error }}</p>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.ce-block__content {
+	max-width: 650px !important;
+}
+
+</style>

resources/js/Components/LegacyComponents/AdminFormSelect.vue

@@ -0,0 +1,25 @@
+<script>
+export default {
+	name: "AdminFormSelect",
+	props: [
+		'modelValue',
+		'items',
+		'required'
+	],
+}
+</script>
+
+<template>
+<div>
+	<select v-if="items" :required="this.required" :value="modelValue" @change="$emit('update:modelValue', $event.target.value)" id="countries" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+		<slot />
+		<template v-for="item in items.data" :key="item.id">
+			<option :value="item.id">{{ item.title }}</option>
+		</template>
+	</select>
+</div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminFormTextarea.vue

@@ -0,0 +1,22 @@
+<script>
+export default {
+	name: "AdminFormTextarea",
+	props: [
+		'modelValue',
+		'error',
+		'label'
+	]
+}
+</script>
+
+<template>
+	<div class="mb-4">
+		<label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
+		<textarea :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"></textarea>
+		<p v-if="error" id="outlined_error_help" class="mt-2 text-xs text-red-600 dark:text-red-400">{{ error }}</p>
+	</div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexFilter.vue

@@ -0,0 +1,74 @@
+<template>
+	<div class="sm:col-span-2 md:grow">
+		<!--Фильтр-->
+		<div class="flex justify-end gap-x-2">
+			<div class="hs-dropdown relative inline-block [--placement:bottom-right]"
+				 data-hs-dropdown-auto-close="inside">
+				<button id="hs-as-table-table-filter-dropdown" type="button"
+						class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
+					<svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="16"
+						 height="16" fill="currentColor" viewBox="0 0 16 16">
+						<path
+								d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+					</svg>
+					Фильтр
+					<span
+							class="pl-2 text-xs font-semibold text-blue-600 border-l border-gray-200 dark:border-gray-700 dark:text-blue-500">
+                                                    1
+                                                </span>
+				</button>
+				<div
+						class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden mt-2 divide-y divide-gray-200 min-w-[12rem] z-10 bg-white shadow-md rounded-lg mt-2 dark:divide-gray-700 dark:bg-gray-800 dark:border dark:border-gray-700"
+						aria-labelledby="hs-as-table-table-filter-dropdown">
+					<div class="divide-y divide-gray-200 dark:divide-gray-700">
+						<label for="hs-radio-group-1" class="flex py-2.5 px-3">
+							<input type="radio" name="hs-radio-group"
+								   class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
+								   id="hs-radio-group-1" checked>
+							<span class="ml-3 text-sm text-gray-800 dark:text-gray-200">Все</span>
+						</label>
+						<label for="hs-radio-group-2" class="flex py-2.5 px-3">
+							<input type="radio" name="hs-radio-group"
+								   class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
+								   id="hs-radio-group-2">
+							<span class="ml-3 text-sm text-gray-800 dark:text-gray-200">Опубликованы</span>
+						</label>
+						<label for="hs-radio-group-3" class="flex py-2.5 px-3">
+							<input disabled type="radio" name="hs-radio-group"
+								   class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
+								   id="hs-radio-group-3">
+							<span class="ml-3 text-sm text-gray-800 dark:text-gray-200">На рассмотрении</span>
+						</label>
+						<label for="hs-radio-group-4" class="flex py-2.5 px-3">
+							<input type="radio" name="hs-radio-group"
+								   class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
+								   id="hs-radio-group-4">
+							<span class="ml-3 text-sm text-gray-800 dark:text-gray-200">Не активны</span>
+						</label>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!--Конец Фильтра-->
+	</div>
+
+</template>
+
+<script>
+
+export default {
+	name: "AdminIndexFilter",
+	data() {
+		return {
+		}
+	},
+	methods: {
+	},
+	props: [
+	],
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexFooter.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-t border-gray-200 dark:border-gray-700">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: "AdminIndexFooter",
+	data() {
+		return {
+		}
+	},
+
+}
+
+
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexHeader.vue

@@ -0,0 +1,16 @@
+<template>
+	<div class="px-6 py-4 gap-3 flex md:justify-start md:items-center border-gray-200 dark:border-gray-700">
+		<slot />
+	</div>
+
+</template>
+
+<script>
+export default {
+	name: "AdminIndexHeader"
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexHeaderTitle.vue

@@ -0,0 +1,21 @@
+<template>
+	<div>
+		<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+			{{ title }}
+		</h2>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "AdminIndexHeaderTitle",
+	props: [
+		'title'
+	]
+
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexLayout.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+		<!-- Card -->
+		<div class="flex flex-col">
+			<div class="-m-1.5 overflow-x-auto">
+				<div class="p-1.5 min-w-full inline-block align-middle">
+					<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:bg-slate-900 dark:border-gray-700">
+						<slot />
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- End Card -->
+	</div>
+
+</template>
+
+<script>
+
+export default {
+	name: "AdminIndexLayout"
+}</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexPageStateBadge.vue

@@ -0,0 +1,40 @@
+<template>
+	<td class="h-px w-px whitespace-nowrap">
+		<div class="px-6 py-2">
+			<span v-if="code === 200"
+												  class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                                                <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+													 fill="currentColor" viewBox="0 0 16 16">
+                                                    <path
+															d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                                                </svg>
+                                                Опубликовано
+                                            </span>
+			<span v-if="code === 404"
+				  class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-green-200">
+                                                    <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                                        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
+                                                    </svg>
+                                                    Неопубликовано
+                                                </span>
+			<span v-if="code === 401"
+				  class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-green-200">
+                                                    <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                                        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
+                                                    </svg>
+                                                    Требуется авторизация
+                                                </span>
+		</div>
+	</td>
+</template>
+<script>
+export default {
+	name: "AdminIndexPageStateBadge",
+	props: [
+		'code'
+	]
+}
+</script>
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexPaginate.vue

@@ -0,0 +1,49 @@
+<template>
+	<div>
+		<div class="inline-flex gap-x-2">
+			<Link v-if="links.prev" :href="links.prev"
+				  class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
+				<svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="16"
+					 height="16" fill="currentColor" viewBox="0 0 16 16">
+					<path fill-rule="evenodd"
+						  d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+				</svg>
+				Prev
+			</Link>
+
+			<Link v-if="links.next" :href="links.next"
+				  class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
+				Next
+				<svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="16"
+					 height="16" fill="currentColor" viewBox="0 0 16 16">
+					<path fill-rule="evenodd"
+						  d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+				</svg>
+			</Link>
+		</div>
+	</div>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexPaginate",
+	data() {
+		return {}
+	},
+	props: [
+		'links'
+	],
+	components: {
+		Link,
+	},
+
+}
+
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexSearch.vue

@@ -0,0 +1,68 @@
+<template>
+	<div class="sm:col-span-1 w-full">
+		<label for="hs-as-table-product-review-search" class="sr-only">Поиск</label>
+		<div class="relative">
+			<input 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-2 px-3 pl-11 block flex-1 w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400"
+				   placeholder="Поиск">
+			<div
+					class="absolute inset-y-0 left-0 flex items-center pointer-events-none pl-4">
+				<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg"
+					 width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+					<path
+							d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+				</svg>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { debounce } from "lodash/function.js";
+
+export default {
+	name: "AdminIndexSearch",
+	data() {
+		return {
+			searchInput: this.$page.props.filters.search,
+		}
+	},
+	methods: {
+		search: debounce(function () {
+            if(this.searchInput == "") {
+                let url = new URL(window.location.href);
+                url.searchParams.delete('search');
+                let newUrl = url.toString();
+                this.$inertia.visit(newUrl,{
+				    method: 'get',
+				preserveState: true,
+				replace: true,
+			    });
+            } else {
+            let url = new URL(window.location.href);
+            url.searchParams.delete('page');
+            let newUrl = url.toString();
+			this.$inertia.visit(newUrl,{
+				method: 'get',
+				data: {
+					search: this.searchInput,
+				},
+				preserveState: true,
+				replace: true,
+			})
+            }
+		}, 500),
+        
+	},
+	props: [
+		'filters'
+	],
+
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexSelectPerPage.vue

@@ -0,0 +1,49 @@
+<template>
+	<div class="max-w-sm space-y-3">
+		<select v-model="perPage" v-on:change="updatePerPage"
+				class="py-2 px-3 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
+			<option>1</option>
+			<option>2</option>
+			<option>3</option>
+			<option>4</option>
+			<option selected>9</option>
+			<option>20</option>
+		</select>
+	</div>
+
+</template>
+
+<script>
+
+
+export default {
+	name: "AdminIndexSelectPerPage",
+	data() {
+		return {
+			perPage: this.itemLength,
+		}
+	},
+	methods: {
+		updatePerPage() {
+			this.$inertia.reload({
+				method: 'get',
+				data: {
+					perPage: this.perPage
+				},
+			})
+		},
+	},
+	components: {
+	},
+	props: [
+		'itemLength'
+	]
+
+}
+
+
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTable.vue

@@ -0,0 +1,18 @@
+<template>
+	<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+		<slot />
+	</table>
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTable",
+	components: {Link}
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableBody.vue

@@ -0,0 +1,18 @@
+<template>
+	<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+		<slot />
+	</tbody>
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableBody",
+	components: {Link}
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableButtonGroup.vue

@@ -0,0 +1,22 @@
+<template>
+
+	<td class="h-px w-px whitespace-nowrap">
+		<div class="px-6 py-1.5 flex justify-end">
+			<div class="group inline-flex items-center divide-x divide-gray-300 border border-gray-300 bg-white shadow-sm rounded-md transition-all dark:divide-gray-700 dark:bg-slate-700 dark:border-gray-700">
+				<slot />
+			</div>
+		</div>
+	</td>
+
+</template>
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableButtonGroup",
+	components: {Link}
+}
+</script>
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableButtonView.vue

@@ -0,0 +1,35 @@
+<template>
+	<div class="hs-tooltip inline-block">
+		<Link class="hs-tooltip-toggle py-1.5 px-2 inline-flex justify-center items-center gap-2 rounded-l-md bg-white text-gray-700 align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800"
+			  :href="link">
+			<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.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
+				<path stroke-linecap="round" stroke-linejoin="round"
+					  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+			</svg>
+
+			<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700"
+				  role="tooltip">
+				{{ title }}
+			</span>
+		</Link>
+	</div>
+
+</template>
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableButtonView",
+	components: {Link},
+	props: [
+		'title',
+		'link'
+	]
+}
+</script>
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableCell.vue

@@ -0,0 +1,37 @@
+<template>
+	<td class="h-px w-px whitespace-nowrap">
+		<div class="px-6 py-2">
+			<div class="flex items-center gap-x-2">
+                <span class="text-sm text-gray-600 dark:text-gray-400">
+					{{ value != null ? textLimit(value, textLimitValue) : '' }}
+				</span>
+			</div>
+		</div>
+	</td>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableCell",
+	components: {Link},
+	props: ['value', 'textLimitValue'],
+	methods: {
+		textLimit(text, symbols) {
+			if (text.length > symbols) {
+				let LimitedText
+				LimitedText = text.substring(0, symbols)
+				return LimitedText + "..."
+			}
+			return text
+		},
+
+	}
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableCellisOnlined.vue

@@ -0,0 +1,51 @@
+<template>
+	<td class="h-px w-px whitespace-nowrap">
+		<div class="px-6 py-2">
+			<span v-if="value"
+						class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                                                <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" width="16"
+																										 height="16"
+																										 fill="currentColor" viewBox="0 0 16 16">
+                                                    <path
+																												d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                                                </svg>
+                                                Онлайн
+                                            </span>
+			<span v-if="!value"
+						class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-green-200">
+                                                    <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg"
+																												 width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                                        <path
+																														d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
+                                                    </svg>
+                                                    Оффлайн
+                                                </span>
+		</div>
+	</td>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableCellisOnlined",
+	components: {Link},
+	props: ['value', 'textLimitValue'],
+	methods: {
+		textLimit(text, symbols) {
+			if (text.length > symbols) {
+				let LimitedText
+				LimitedText = text.substring(0, symbols)
+				return LimitedText + "..."
+			}
+			return text
+		},
+
+	}
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableCellisPublished.vue

@@ -0,0 +1,51 @@
+<template>
+	<td class="h-px w-px whitespace-nowrap">
+		<div class="px-6 py-2">
+			<span v-if="value"
+						class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                                                <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" width="16"
+																										 height="16"
+																										 fill="currentColor" viewBox="0 0 16 16">
+                                                    <path
+																												d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                                                </svg>
+                                                Опубликовано
+                                            </span>
+			<span v-if="!value"
+						class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-green-200">
+                                                    <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg"
+																												 width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                                        <path
+																														d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
+                                                    </svg>
+                                                    Не опубликовано
+                                                </span>
+		</div>
+	</td>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableCellisPublished",
+	components: {Link},
+	props: ['value', 'textLimitValue'],
+	methods: {
+		textLimit(text, symbols) {
+			if (text.length > symbols) {
+				let LimitedText
+				LimitedText = text.substring(0, symbols)
+				return LimitedText + "..."
+			}
+			return text
+		},
+
+	}
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableDropdownButton.vue

@@ -0,0 +1,36 @@
+<template>
+	<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
+		<button id="hs-table-dropdown-1" type="button"
+				class="hs-dropdown-toggle py-1.5 px-2 inline-flex justify-center items-center gap-2 rounded-r-md text-gray-700 align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
+			<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg"
+				 width="16" height="16" fill="currentColor"
+				 viewBox="0 0 16 16">
+				<path
+						d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+			</svg>
+		</button>
+		<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden mt-2 divide-y divide-gray-200 min-w-[10rem] z-10 bg-white shadow-2xl rounded-lg p-2 mt-2 dark:divide-gray-700 dark:bg-gray-800 dark:border dark:border-gray-700" aria-labelledby="hs-table-dropdown-1">
+			<div class="py-2 first:pt-0 last:pb-0">
+				<span class="block py-2 px-3 text-xs font-medium uppercase text-gray-400 dark:text-gray-600">
+					{{ title }}
+				</span>
+				<slot />
+			</div>
+		</div>
+	</div>
+
+</template>
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableDropdownButton",
+	components: {Link},
+	props: [
+		'title'
+	]
+}
+</script>
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableDropdownElement.vue

@@ -0,0 +1,23 @@
+<template>
+	<Link class="flex w-full items-center gap-x-3 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+		  :href="link" :method="method" as="button" type="button">
+
+		{{ title }}
+	</Link>
+</template>
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableDropdownElement",
+	components: {Link},
+	props: [
+		'title',
+		'link',
+		'method'
+	]
+}
+</script>
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableHead.vue

@@ -0,0 +1,20 @@
+<template>
+	<thead class="bg-gray-50 dark:bg-slate-800">
+		<tr>
+			<slot />
+		</tr>
+	</thead>
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableHead",
+	components: {Link}
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminIndexTableRow.vue

@@ -0,0 +1,24 @@
+<template>
+	<th scope="col" class="pl-6 py-3 text-left">
+		<div class="flex items-center gap-x-2">
+			<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200">
+				{{ name }}
+			</span>
+		</div>
+	</th>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	name: "AdminIndexTableRow",
+	components: {Link},
+	props: ['name']
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminListItem.vue

@@ -0,0 +1,45 @@
+<template>
+	<li class="hs-accordion" id="posts-accordion">
+		<span class="hs-accordion-toggle select-none cursor-default flex items-center gap-x-3.5 py-2 px-2.5 hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:hs-accordion-active:text-white"
+			  href="javascript:;">
+<!--                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"-->
+			<!--							 stroke="currentColor" class="w-3.5 h-3.5">-->
+			<!--                            <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 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.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 002.25 2.25h13.5M6 7.5h3v3H6v-3z"/>-->
+			<!--                        </svg>-->
+                        {{ title }}
+                        <svg class="hs-accordion-active:block ml-auto hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+							 width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
+								  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                        </svg>
+                        <svg class="hs-accordion-active:hidden ml-auto block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+							 width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
+								  stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                        </svg>
+                    </span>
+		<div id="account-accordion-sub"
+			 class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden">
+			<ul class="pt-2 pl-2">
+				<slot/>
+			</ul>
+		</div>
+	</li>
+</template>
+
+<script>
+
+export default {
+	data() {
+		return []
+	},
+	props: [
+		'title',
+	]
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/Components/LegacyComponents/AdminSubListItem.vue

@@ -0,0 +1,32 @@
+<template>
+	<li>
+		<Link :href="route(routeName)"
+			  class="flex select-none cursor-default items-center gap-x-2 py-2 px-2.5 text-sm text-slate-700 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:text-slate-400 dark:hover:text-slate-300">
+			{{ title }}
+		</Link>
+	</li>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+
+export default {
+	data() {
+		return [
+
+		]
+	},
+	props: [
+		'title',
+		'routeName'
+	],
+	components: {
+		Link,
+	}
+}
+</script>
+
+<style scoped>
+
+</style>