libreria-astro-lefebvre 0.0.28 → 0.0.30

package/src/components/Astro/Repetidor_2025_Cabra.astro

@@ -1,153 +1,153 @@
----
-
-import Repetidor_2025_Menorca from './Repetidor_2025_Menorca.astro';
-import Titulo_2025_Algeciras from './Titulo_2025_Algeciras.astro';
-
-const {
-    items = [],
-} = Astro.props;
-
-const identifier = 'js-megablock'+ Math.random().toString(36).substring(2, 15);
-
-const structuredData = `<script type="application/ld+json">
-{
-    "@context": "https://schema.org",
-    "@type": "WebPage",
-    "name": "Interactive Content Tabs",
-    "description": "Interactive tabbed content component with multiple sections",
-    "mainEntity": {
-        "@type": "ItemList",
-        "numberOfItems": ${items.length},
-        "itemListElement": [
-            ${items.map((item, index) => `{
-                "@type": "ListItem",
-                "position": ${index + 1},
-                "name": "${item.name}",
-                "description": "Interactive content section",
-                ${item.image ? `"image": "${item.image}",` : ''}
-                ${item.buttonUrl ? `"url": "${item.buttonUrl}"` : ''}
-            }`).join(',\n      ')}
-        ]
-    },
-    "interactionStatistic": {
-        "@type": "InteractionCounter",
-        "interactionType": "https://schema.org/ClickAction",
-        "userInteractionCount": "${items.length}"
-    }
-}
-</script>`;
-
----
-
-
-<section class="w-full flex items-center justify-center">
-    <article class="w-full flex flex-col items-center justify-center">
-        <div class="w-full flex justify-center items-center relative text-[56px] text-center font inter leading-[64px] mt-[40px]">
-            <!-- <div class="flex bg-transparent md:bg-gray-50 md:border md:border-[#B6B7BB] rounded-lg"> -->
-                <div class="flex gap-1 md:gap-8 items-center">
-                    {items.map((item, index) => (
-                        <p class="text-base">
-                            {/* <a href={`#accordion${index + 1}`} class="btn py-[20px] px-[16px]">{item}</a> */}
-                            <button data-linkedto={`${identifier}${index + 1}`} 
-                            class={`
-                                btn py-[14px] px-[20px] font-inter
-                                cursor-pointer border border-transparent 
-                                hover:border hover:border-[#5F6168] 
-                                hover:bg-white rounded-lg ${identifier}button 
-                                ${item.default ? 'active' : ''}
-                                bg-F2F3F8 text-gray-100 max-w-[40px] max-h-[20px] text-[0px]
-                                md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
-                                `}
-                            >{item.name}</button>
-                        </p>
-                    ))}
-                </div> 
-        </div>
-        <div class="lg:max-w-7xl md:w-full px-6 md:w-4/5 md:px-[0] col my-[40px]">
-            {items.map((item, index) => (
-                <div id={`${identifier}${index + 1}`} class={`${item.default ? '' : 'hidden'} collapse-arrow ${identifier}item`}>
-
-
-                    <div class="w-full flex-col flex md:flex-row gap-[16px] md:gap-[48px]">
-                        <div class="w-full md:w-1/2"> 
-                            <Titulo_2025_Algeciras 
-                                title={item.name}
-                                tipo="h3-mb32"
-                                flexJustify="justify-start"
-                            />
-                            <Repetidor_2025_Menorca 
-                                flexOrientationIcoText = "flex-row"
-                                flexOrientationBlockIcoText = "flex-col"
-                                positionFlex = 'items-start'
-                                positionBtnFlex = 'justify-start'
-                                items = {item.items}
-                                headingType = 'h4'
-                                showBtn = {true}
-                                btnLabel = "Ver experiencias de uso"
-                                buttonUrl={item.buttonUrl}
-                            />
-                        </div>
-                        <div class="w-full md:w-1/2 p-0 md:pr-2">
-                            <img src={item.image} alt="Imagen" class="w-full min-h-auto lg:min-h-full object-cover rounded-xl" />
-                        </div>
-                    </div>
-
-                </div>
-            ))}
-        </div>
-    </article>
-</section>
-
-
-
-<style>
-    .bg-F2F3F8 {
-        background-color: #F2F3F8;
-    }
-    .active{
-        background-color: #ffffff;
-        border: 1px solid #5F6168;
-        color: black;
-        max-width: none;
-        max-height: none;
-        font-size: 16px;
-
-        &:hover{
-            background-color: #ffffff;
-            border: 1px solid #5F6168;
-        }
-    }
-</style>
-
-<script is:inline define:vars={{ identifier }}>
-
-document.querySelectorAll(`.${identifier}button`).forEach(btn => {
-
-    btn.addEventListener('click', (e) => {
-        const linkedId = btn.getAttribute('data-linkedto');
-        const targetItem = document.getElementById(linkedId);
-        if (targetItem) {
-
-            const collapseCount = document.querySelectorAll(`.${identifier}item.collapse`).length;
-            const hiddenCount = document.querySelectorAll(`.${identifier}item.hidden`).length;
-            const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
-            
-            document.querySelectorAll(`.${identifier}item`).forEach(item => {
-                if (item === targetItem) return;
-                if (item.classList.contains(desiredClass)) return;                
-                item.classList.add(desiredClass);
-            });
-            targetItem.classList.toggle(desiredClass);
-            
-
-            document.querySelectorAll(`.${identifier}button`).forEach(item => {
-                if (item === btn) return;
-                item.classList.remove('active');
-            });
-            btn.classList.toggle('active');  
-        }       
-    });
-});
-</script>
-
+---
+
+import Repetidor_2025_Menorca from './Repetidor_2025_Menorca.astro';
+import Titulo_2025_Algeciras from './Titulo_2025_Algeciras.astro';
+
+const {
+    items = [],
+} = Astro.props;
+
+const identifier = 'js-megablock'+ Math.random().toString(36).substring(2, 15);
+
+const structuredData = `<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "name": "Interactive Content Tabs",
+    "description": "Interactive tabbed content component with multiple sections",
+    "mainEntity": {
+        "@type": "ItemList",
+        "numberOfItems": ${items.length},
+        "itemListElement": [
+            ${items.map((item, index) => `{
+                "@type": "ListItem",
+                "position": ${index + 1},
+                "name": "${item.name}",
+                "description": "Interactive content section",
+                ${item.image ? `"image": "${item.image}",` : ''}
+                ${item.buttonUrl ? `"url": "${item.buttonUrl}"` : ''}
+            }`).join(',\n      ')}
+        ]
+    },
+    "interactionStatistic": {
+        "@type": "InteractionCounter",
+        "interactionType": "https://schema.org/ClickAction",
+        "userInteractionCount": "${items.length}"
+    }
+}
+</script>`;
+
+---
+
+
+<section class="w-full flex items-center justify-center">
+    <article class="w-full flex flex-col items-center justify-center">
+        <div class="w-full flex justify-center items-center relative text-[56px] text-center font inter leading-[64px] mt-[40px]">
+            <!-- <div class="flex bg-transparent md:bg-gray-50 md:border md:border-[#B6B7BB] rounded-lg"> -->
+                <div class="flex gap-1 md:gap-8 items-center">
+                    {items.map((item, index) => (
+                        <p class="text-base">
+                            {/* <a href={`#accordion${index + 1}`} class="btn py-[20px] px-[16px]">{item}</a> */}
+                            <button data-linkedto={`${identifier}${index + 1}`} 
+                            class={`
+                                btn py-[14px] px-[20px] font-inter
+                                cursor-pointer border border-transparent 
+                                hover:border hover:border-[#5F6168] 
+                                hover:bg-white rounded-lg ${identifier}button 
+                                ${item.default ? 'active' : ''}
+                                bg-F2F3F8 text-gray-100 max-w-[40px] max-h-[20px] text-[0px]
+                                md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
+                                `}
+                            >{item.name}</button>
+                        </p>
+                    ))}
+                </div> 
+        </div>
+        <div class="lg:max-w-7xl md:w-full px-6 md:w-4/5 md:px-[0] col my-[40px]">
+            {items.map((item, index) => (
+                <div id={`${identifier}${index + 1}`} class={`${item.default ? '' : 'hidden'} collapse-arrow ${identifier}item`}>
+
+
+                    <div class="w-full flex-col flex md:flex-row gap-[16px] md:gap-[48px]">
+                        <div class="w-full md:w-1/2"> 
+                            <Titulo_2025_Algeciras 
+                                title={item.name}
+                                tipo="h3-mb32"
+                                flexJustify="justify-start"
+                            />
+                            <Repetidor_2025_Menorca 
+                                flexOrientationIcoText = "flex-row"
+                                flexOrientationBlockIcoText = "flex-col"
+                                positionFlex = 'items-start'
+                                positionBtnFlex = 'justify-start'
+                                items = {item.items}
+                                headingType = 'h4'
+                                showBtn = {true}
+                                btnLabel = "Ver experiencias de uso"
+                                buttonUrl={item.buttonUrl}
+                            />
+                        </div>
+                        <div class="w-full md:w-1/2 p-0 md:pr-2">
+                            <img src={item.image} alt="Imagen" class="w-full min-h-auto lg:min-h-full object-cover rounded-xl" />
+                        </div>
+                    </div>
+
+                </div>
+            ))}
+        </div>
+    </article>
+</section>
+
+
+
+<style>
+    .bg-F2F3F8 {
+        background-color: #F2F3F8;
+    }
+    .active{
+        background-color: #ffffff;
+        border: 1px solid #5F6168;
+        color: black;
+        max-width: none;
+        max-height: none;
+        font-size: 16px;
+
+        &:hover{
+            background-color: #ffffff;
+            border: 1px solid #5F6168;
+        }
+    }
+</style>
+
+<script is:inline define:vars={{ identifier }}>
+
+document.querySelectorAll(`.${identifier}button`).forEach(btn => {
+
+    btn.addEventListener('click', (e) => {
+        const linkedId = btn.getAttribute('data-linkedto');
+        const targetItem = document.getElementById(linkedId);
+        if (targetItem) {
+
+            const collapseCount = document.querySelectorAll(`.${identifier}item.collapse`).length;
+            const hiddenCount = document.querySelectorAll(`.${identifier}item.hidden`).length;
+            const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
+            
+            document.querySelectorAll(`.${identifier}item`).forEach(item => {
+                if (item === targetItem) return;
+                if (item.classList.contains(desiredClass)) return;                
+                item.classList.add(desiredClass);
+            });
+            targetItem.classList.toggle(desiredClass);
+            
+
+            document.querySelectorAll(`.${identifier}button`).forEach(item => {
+                if (item === btn) return;
+                item.classList.remove('active');
+            });
+            btn.classList.toggle('active');  
+        }       
+    });
+});
+</script>
+
 <Fragment set:html={structuredData} />