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>