added a new component for breadcrumbs and reworked the component for getting icons using sprites

resources/js/Pages/Client/Additional-educations/Index.vue

@@ -21,10 +21,13 @@ import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
 import BackButton from "@/componentss/ui/buttons/BackButton.vue";
 import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
 import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
+import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
+import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
 
 export default {
   name: "Index",
   components: {
+    BasicIcon, BreadcrumbsItem,
     ProgramTitle, Builder, BackButton, BasicPageWrapper, BasicPageContainer, AdditionalProgramItemBreadcrumbs,
     BasicListBadge,
     AdditionalProgramBadge,
@@ -104,6 +107,12 @@ export default {
         <div class="space-y-3 mx-auto max-w-3xl w-full">
           <div class="my-10 w-full">
             <AdditionalProgramListBreadcrumbs :breadcrumbs="breadcrumbs" />
+            <BreadcrumbsItem :breadcrumbs="breadcrumbs">
+              <Link :href="route('client.additionalEducation.index')" class="flex items-center text-gray-500 hover:text-primary-hover">
+                <BasicIcon class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400" name="breadcrumb-tag" />
+                Дополнительное образование
+              </Link>
+            </BreadcrumbsItem>
             <div class="flex items-center gap-x-2">
               <LevelEduFilter :directions="directionAdditionalEducations" :direction_filter="filters.direction_filter" />
               <BasicListFilter>

resources/js/Pages/Client/Additional-educations/Show.vue

@@ -15,11 +15,14 @@ import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
 import ProgramItemBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramItemBreadcrumbs.vue";
 import FormBlock from "@/componentss/shared/builder/pageBuilder/blocks/FormBlock.vue";
 import FormBuilder from "@/componentss/shared/builder/formBuilder/FormBuilder.vue";
+import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
+import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
 
 
 export default {
   name: "Show",
   components: {
+    BasicIcon, BreadcrumbsItem,
     FormBuilder,
     FormBlock,
     ProgramItemBreadcrumbs, BasicPageWrapper, BasicPageContainer,
@@ -76,7 +79,12 @@ export default {
     <BasicPageContainer>
       <div class="space-y-3">
         <BackButton link="client.additionalEducation.index" title="Все программы"/>
-        <AdditionalProgramItemBreadcrumbs class="pb-4" :breadcrumbs="breadcrumbs" :additional-education-title="additionalEducation.data.title" />
+        <BreadcrumbsItem :breadcrumbs="breadcrumbs">
+          <Link :href="$page.url" class="flex items-center text-gray-500 hover:text-primary-light">
+            <BasicIcon class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400" name="breadcrumb-tag" />
+            {{ additionalEducation.data.title }}
+          </Link>
+        </BreadcrumbsItem>
         <ProgramTitle :header="additionalEducation.data.title" class="text-center" />
       </div>