creating dinamic tag for breadcrumb

Author: manuelernestog

src/components/ui/breadcrumb.astro

@@ -6,14 +6,18 @@ function itemStyle(item) {
   style += item.url ? " text-gray-700 hover:text-gray-900" : " text-gray-500";
   return style;
 }
+
+items.forEach((item) => {
+  item.tag = item.url ? "a" : "div";
+});
 ---
 
 <nav class="flex" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-2">
     {
       items.map((item) => (
         <li class="inline-flex items-center">
-          <a href={item.url} class={itemStyle(item)}>
+          <item.tag href={item.url} class={itemStyle(item)}>
             {item.home ? (
               <svg
                 aria-hidden="true"
@@ -40,7 +44,7 @@ function itemStyle(item) {
               </svg>
             )}
             {item.home ? <span>{item.label}</span> : <span class="md:ml-2">{item.label}</span>}
-          </a>
+          </item.tag>
         </li>
       ))
     }