Improve code readability and simplicity

Condensed the code by breaking down long lines into multiple lines and removing unneeded classes in several UI components. The changes enhance readability, declutter the codebase, and result in a more accessible and maintainable code structure.

src/components/ui/blocks/AccordionItem.astro

@@ -10,7 +10,8 @@ interface Props {
 }
 const ACCORDION_CLASS_DEFAULT = "hs-accordion pb-3 active";
 const ACCORDION_CLASS_COLLAPSED = "hs-accordion pt-6 pb-3";
-const ACCORDION_CONTENT_CLASS = "hs-accordion-content w-full overflow-hidden transition-[height] duration-300";
+const ACCORDION_CONTENT_CLASS =
+  "hs-accordion-content w-full overflow-hidden transition-[height] duration-300";
 function getAccordionClass(first: boolean = false) {
   return first ? ACCORDION_CLASS_DEFAULT : ACCORDION_CLASS_COLLAPSED;
 }
@@ -22,14 +23,11 @@ const SVG_PARAMS = {
   stroke: "currentColor",
   strokeWidth: "2",
   strokeLinecap: "round",
-  strokeLinejoin: "round"
+  strokeLinejoin: "round",
 };
 ---
 
-<div
+<div class={getAccordionClass(first)} id={id}>
-    class={getAccordionClass(first)}
-    id={id}
->
   <button
     class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 text-balance rounded-lg pb-3 text-start font-bold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:ring-zinc-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
     aria-controls={collapseId}
@@ -37,19 +35,17 @@ const SVG_PARAMS = {
     {heading}
     <svg
       class="block h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:hidden dark:text-neutral-400"
-      {...SVG_PARAMS}
+      {...SVG_PARAMS}><path d="m6 9 6 6 6-6"></path></svg
-    ><path d="m6 9 6 6 6-6"></path></svg
     >
     <svg
       class="hidden h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:block dark:text-neutral-400"
-      {...SVG_PARAMS}
+      {...SVG_PARAMS}><path d="m18 15-6-6-6 6"></path></svg
-    ><path d="m18 15-6-6-6 6"></path></svg
     >
   </button>
   <div
-      aria-labelledby={id}
+    aria-labelledby={id}
-      class={`${first ? ACCORDION_CONTENT_CLASS : 'hidden ' + ACCORDION_CONTENT_CLASS}`}
+    class={`${first ? ACCORDION_CONTENT_CLASS : "hidden " + ACCORDION_CONTENT_CLASS}`}
-      id={collapseId}
+    id={collapseId}
   >
     <p class="text-pretty text-neutral-600 dark:text-neutral-400">
       {content}

src/components/ui/blocks/ContactIconBlock.astro

@@ -23,17 +23,8 @@ interface Props {
 
 const arrowSVG: string = `<svg
 class="h-4 w-4 flex-shrink-0 transition ease-in-out group-hover:translate-x-1"
-fill="none"
+fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
-viewBox="0 0 24 24"
+<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /> </svg>`;
-stroke-width="1.5"
-stroke="currentColor"
->
-<path
-    stroke-linecap="round"
-stroke-linejoin="round"
-d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
-    />
-    </svg>`
 ---
 
 <div class="flex gap-x-7 py-6">
@@ -55,9 +46,7 @@ d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
           href={linkURL}
         >
           {linkTitle}
-          {isArrowVisible ?
+          {isArrowVisible ? <Fragment set:html={arrowSVG} /> : null}
-            <Fragment set:html={arrowSVG} />
-           : null}
         </a>
       ) : null
     }

src/components/ui/blocks/IconBlock.astro

@@ -6,18 +6,18 @@ interface Props {
   content?: string;
 }
 
-const headingClasses = "text-balance text-lg font-bold text-gray-800 dark:text-neutral-200";
+const headingClasses =
-const contentClasses = "mt-1 text-pretty text-neutral-700 dark:text-neutral-300";
+  "text-balance text-lg font-bold text-gray-800 dark:text-neutral-200";
+const contentClasses =
+  "mt-1 text-pretty text-neutral-700 dark:text-neutral-300";
 ---
 
 <div class="flex gap-x-5">
   <slot />
   <div class="grow">
-    <h3
+    <h3 class={headingClasses}>
-      class={headingClasses}>
       {heading}
     </h3>
-    <p class={contentClasses}>{content}
+    <p class={contentClasses}>{content}</p>
-    </p>
   </div>
 </div>

src/components/ui/images/ImgSmall.astro

@@ -29,7 +29,7 @@ const AnchorSVG = `
   />
 
   <div
-    class="pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-800 via-transparent to-transparent opacity-50 dark:from-neutral-700"
+    class="pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-800 via-transparent to-transparent opacity-50"
   >
   </div>
 

src/components/ui/images/ImgWide.astro

@@ -28,7 +28,7 @@ const AnchorSVG = `
   />
 
   <div
-    class="pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-800 via-transparent to-transparent opacity-50 dark:from-neutral-700"
+    class="pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-800 via-transparent to-transparent opacity-50"
   >
   </div>