CSS split by block - social-media

blocks/social-media/social-media.js

@@ -1,4 +1,6 @@
-import { button } from '../../scripts/dom-builder.js';
+import {
+  button, span,
+} from '../../scripts/dom-builder.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 
 function goBack() {
@@ -22,10 +24,22 @@ const social = `
 `;
 
 export default function decorate(block) {
-  const goParentBack = button({ 'aria-label': 'back', class: 'back-btn', title: 'Back' });
-  goParentBack.innerHTML = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-di-rand="1697724519641"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 14.7071C7.31658 15.0976 6.68342 15.0976 6.2929 14.7071L2.29289 10.7071C1.90237 10.3166 1.90237 9.68342 2.29289 9.29289L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289C8.09763 5.68342 8.09763 6.31658 7.70711 6.70711L5.41421 9L17 9C17.5523 9 18 9.44771 18 10C18 10.5523 17.5523 11 17 11L5.41421 11L7.70711 13.2929C8.09763 13.6834 8.09763 14.3166 7.70711 14.7071Z" fill="#4B5563"></path></svg> <span class="my-auto">Back</span>';
+  block.classList.add(...'relative z-10 flex items-center justify-between mb-4 text-gray-600 pt-6 pb-2'.split(' '));
+  const goParentBack = button({ 'aria-label': 'back', class: 'back-btn', title: 'Back' }, span({ class: 'icon icon-back' }), span({ class: 'my-auto' }, 'Back'));
   goParentBack.addEventListener('click', goBack);
   block.innerHTML = social;
+  const childDivs = block.childNodes;
+  childDivs.forEach((divs, index) => {
+    if (index === 1) divs.remove(); //to remove empty divs
+  });
+  if (goParentBack.className.includes('back-btn')) {
+    goParentBack.classList.add(...'font-normal inline-flex items-center gap-4 transition leading-6 py-1 px-1.5 rounded-lg hover:bg-slate-900/[0.03]'.split(' '));
+  }
+  block.querySelectorAll('div.social-links').forEach((item) => {
+    item?.classList?.add(...'flex items-center gap-3'.split(' '));
+    const ancs = item?.querySelector('a');
+    ancs?.classList?.add(...'font-normal inline-flex items-center gap-4 transition leading-6 py-1 px-1.5 rounded-lg hover:bg-slate-900/[0.03]'.split(' '));
+  });
   block.prepend(goParentBack);
   decorateIcons(block);
 }