fix: 🐛 turn ReasonList to an HTML ul

vanntile · Apr 14, 2023 · 8f40d09 · 8f40d09
1 parent 549b395
commit 8f40d09
Showing 1 changed file with 19 additions and 18 deletions.
diff --git a/src/components/ReasonList.astro b/src/components/ReasonList.astro
@@ -3,31 +3,32 @@ const { title, items = [], negative } = Astro.props
 ---
 
 <div
-  class={`px-6 pt-4 pb-2 my-6 border rounded xl:-mx-16 xl:px-16 max-w-none dark:text-gray-100 ${
+  class={`px-6 my-6 border rounded xl:-mx-16 xl:px-16 max-w-none dark:text-gray-100 ${
     negative
       ? 'border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-800'
       : 'border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-800'
   }`}
 >
-  <span>{title}</span>
-  <div class="mt-4">
+  <p>{title}</p>
+  <ul class="">
     {
       items.map((s: string) => (
-        <div class="flex items-baseline mb-2 font-medium">
-          <div class="w-4 h-4 pt-0.5 mr-2">
-            <svg
-              class={`w-4 h-4 ${negative ? 'text-red-500 dark:text-red-200' : 'text-green-500 dark:text-green-300'}`}
-              viewBox="0 0 24 24"
-            >
-              <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
-                <path d="M22 4L12 14.01l-3-3" />
-              </g>
-            </svg>
-          </div>
-          <span>{s}</span>
-        </div>
+        <li class="flex items-baseline m-0 mb-2 font-medium">
+          <svg
+            class={`w-4 h-4 pt-0.5 mr-2 !mt-0 ${
+              negative ? 'text-red-500 dark:text-red-200' : 'text-green-500 dark:text-green-300'
+            }`}
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+              <path d="M22 4L12 14.01l-3-3" />
+            </g>
+          </svg>
+          <span class="!mb-0">{s}</span>
+        </li>
       ))
     }
-  </div>
+  </ul>
 </div>