Rework frontend

resources/js/componentss/ui/buttons/BackButton.vue

@@ -0,0 +1,46 @@
+<template>
+
+	<Link :href="route(link)" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
+		<svg class="flex-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="m15 18-6-6 6-6"/></svg>
+		{{ title }}
+	</Link>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import slugify from "slugify";
+
+export default {
+	name: "BackButton",
+	components: {Link},
+	data() {
+		return {}
+	},
+	methods: {
+		textLimit(text, symbols) {
+			if (text.length > symbols) {
+				let LimitedText
+				LimitedText = text.substring(0, symbols)
+				return LimitedText + "..."
+			}
+			return text
+		},
+	},
+
+	props: {
+		title: {
+			type: String,
+		},
+		link: {
+			type: String
+		}
+	},
+}
+
+</script>
+
+
+<style scoped>
+
+</style>

resources/js/componentss/ui/icons/BasicIcon.vue

@@ -0,0 +1,45 @@
+<template>
+	<svg v-bind="svgAttributes" v-html="icon.path"></svg>
+</template>
+
+<script>
+import icons from "@/assets/icons/icons.js"
+export default {
+	name: "BasicIcon",
+	props: {
+		name: {
+			type: String,
+		},
+		viewBox: {
+			type: String,
+		},
+		stroke_width: {
+			type: Number,
+		},
+		fill: {
+			type: String
+		}
+	},
+	computed: {
+		icon() {
+			return icons[this.transformIconName(this.name)] || icons['file'];
+		},
+		svgAttributes() {
+			return {
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: this.icon.fill || 'none',
+				viewBox: this.icon.viewBox || this.viewBox || '0 0 24 24',
+				'stroke-width': this.icon.stroke_width || this.stroke_width || 1.5,
+				stroke: this.icon.stroke || 'currentColor',
+				class: this.$attrs.class || 'w-6 h-6'
+			};
+		}
+	},
+	methods: {
+		transformIconName(iconName) {
+			return iconName.replace(/^heroicon-(o|c|s|m)-/, '')
+					.replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
+		}
+	}
+}
+</script>

resources/js/componentss/ui/titles/BasicTitle.vue

@@ -0,0 +1,44 @@
+<template>
+
+	<div class="space-y-3">
+		<h1 class="text-2xl mb-10 font-bold md:text-3xl">{{ header }}</h1>
+	</div>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import slugify from "slugify";
+
+export default {
+	name: "BasicTitle",
+	components: {Link},
+	data() {
+		return {
+		}
+	},
+	methods: {
+		textLimit(text, symbols) {
+			if (text.length > symbols) {
+				let LimitedText
+				LimitedText = text.substring(0, symbols)
+				return LimitedText + "..."
+			}
+			return text
+		},
+	},
+
+	props: {
+		header: {
+			type: String,
+      required: true
+		},
+	},
+}
+
+</script>
+
+
+<style scoped>
+
+</style>

resources/js/componentss/ui/wrappers/BreadcrumbsWrapper.vue

@@ -0,0 +1,37 @@
+<template>
+  <ol style="white-space: nowrap;" class="flex items-center whitespace-normal min-w-0 flex-nowrap hide-scrollbar overflow-x-scroll" aria-label="Breadcrumb">
+    <slot />
+  </ol>
+</template>
+
+<script>
+
+
+export default {
+  name: "BreadcrumbsWrapper",
+  data() {
+    return {
+    }
+  },
+  methods: {
+  },
+}
+</script>
+
+<style scoped>
+
+/* Скрытие горизонтальной полосы прокрутки */
+.hide-scrollbar {
+  overflow-x: scroll; /* или auto, в зависимости от вашего случая */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Для WebKit-браузеров (Chrome, Safari) */
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none;  /* Для IE и Edge */
+  scrollbar-width: none;  /* Для Firefox */
+}
+
+</style>

resources/js/componentss/ui/wrappers/HeadItemsWrapper.vue

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