fix item post

fiiann · Dec 21, 2024 · b3da6e3 · b3da6e3
1 parent eebdba1
commit b3da6e3
Showing 1 changed file with 19 additions and 56 deletions.
diff --git a/src/components/posts-loop.astro b/src/components/posts-loop.astro
@@ -4,69 +4,32 @@ import posts from "../collections/content/post.json";
 const { count } = Astro.props;
 
 const postsLoop = posts.slice(0, count);
----
 
 {
-  postsLoop.map((post) => {
-    return (
-      <div
-        class="relative border border-transparent border-dashed cursor-pointer p-7 group rounded-2xl"
-        onclick={`location.href = '${post.link}'`}
-      >
-        <div class="absolute inset-0 z-20 w-full h-full duration-300 ease-out bg-white border border-dashed dark:bg-neutral-950 rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:-translate-x-1 group-hover:-translate-y-1" />
-        <div class="absolute inset-0 z-10 w-full h-full duration-300 ease-out border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:translate-x-1 group-hover:translate-y-1" />
-        <div class="relative z-30 duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1">
-          <h2 class="flex items-center mb-3">
+  postsLoop.map((post) => (
+    <div
+      class="relative border border-transparent border-dashed cursor-pointer p-7 group rounded-2xl"
+      onclick={`location.href='${post.link}'`}
+    >
+      <div class="absolute inset-0 z-20 w-full h-full duration-300 ease-out bg-white border border-dashed dark:bg-neutral-950 rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:-translate-x-1 group-hover:-translate-y-1" />
+      <div class="absolute inset-0 z-10 w-full h-full duration-300 ease-out border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:translate-x-1 group-hover:translate-y-1" />
+      <div class="relative z-30 duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1">
+        <h2 class="flex items-center mb-3">
+          <a
             href={post.link}
-            class="text-xl font-bold leading-tight tracking-tight sm:text-2xl
-            dark:text-neutral-100" >{post.title}
-          </h2>
-          <svg
-            class="group-hover:translate-x-0 flex-shrink-0 translate-y-0.5 -translate-x-1 w-2.5 h-2.5 stroke-current ml-1 transition-all ease-in-out duration-200  transform"
-            viewBox="0 0 13 15"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
+            class="text-xl font-bold leading-tight tracking-tight sm:text-2xl dark:text-neutral-100"
           >
-            <g
-              stroke="none"
-              stroke-width="1"
-              fill="none"
-              fill-rule="evenodd"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <g
-                id="svg"
-                transform="translate(0.666667, 2.333333)"
-                stroke="currentColor"
-                stroke-width="2.4"
-              >
-                <g>
-                  {/* Removed the fragment (<>) here */}
-                  <polyline
-                    class="transition-all duration-200 ease-out opacity-0 delay-0 group-hover:opacity-100"
-                    points="5.33333333 0 10.8333333 5.5 5.33333333 11"
-                  />
-                  <line
-                    class="transition-all duration-200 ease-out transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 group-hover:ml-0"
-                    x1="10.8333333"
-                    y1="5.5"
-                    x2="0.833333333"
-                    y2="5.16666667"
-                  />
-                </g>
-              </g>
-            </g>
-          </svg>
-        </div>
+            {post.title}
+          </a>
+        </h2>
         <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <span>{post.description}</span>
+          <span>{post.description || "No description available."}</span>
         </p>
         <div class="mt-2.5 text-xs font-medium text-neutral-800 dark:text-neutral-300">
-          Posted on {post.dateFormatted}
+          Posted on {post.dateFormatted || "Date not available."}
         </div>
       </div>
-    );
-  })
+    </div>
+  ));
 }
+---