feat: add comment and comment form component

src/components/Comment.astro

@@ -0,0 +1,15 @@
+---
+
+---
+
+<div class="comment border-gray-400 border border-solid pt-1 pb-6 ml-4">
+  <p
+    class="font-semibold pl-3 pr-2 pb-1 border-b border-x-0 border-t-0 border-gray-400 border-solid"
+  >
+    Arafat Candan
+  </p>
+
+  <p class="pl-3 py-2 pr-4">
+    Daha önce hiç bu açıdan bakmamıştım, harika bir yazı olmuş.
+  </p>
+</div>

src/components/CommentForm.astro

@@ -0,0 +1,37 @@
+---
+
+---
+
+<style>
+  .textarea {
+    resize: none;
+  }
+
+  textarea {
+    @apply font-sans text-base;
+  }
+
+  input {
+    @apply font-sans text-base;
+  }
+
+  button {
+    @apply text-sm;
+  }
+</style>
+
+<form>
+  <div class="p-1 flex flex-col flex-end items-end gap-3">
+    <textarea
+      class="textarea py-2 px-3 w-full box-border"
+      rows="5"
+      placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"></textarea>
+    <input
+      type="text"
+      class="w-full py-2 px-3 box-border"
+      placeholder="İsminiz (Yazmak zorunda değilsiniz)"
+    />
+
+    <button type="submit" class="px-3 py-1 w-fit">Yorum Yap</button>
+  </div>
+</form>

src/components/HorizontalLine.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<div class="border-b border-x-0 border-t-0 border-solid border-slate-700"></div>

src/pages/category/[category]/[slug]/index.astro

@@ -6,6 +6,9 @@ import Header from "@/components/Header.astro";
 import Layout from "@/layouts/Layout.astro";
 import Post from "@/components/Post.astro";
 import EmojiReactionForm from "@/components/EmojiReactionForm.astro";
+import CommentForm from "@/components/CommentForm.astro";
+import HorizontalLine from "@/components/HorizontalLine.astro";
+import Comment from "@/components/Comment.astro";
 
 const { entry } = Astro.props;
 
@@ -18,19 +21,6 @@ export async function getStaticPaths() {
 }
 ---
 
-<style>
-  .textarea {
-    resize: none;
-  }
-
-  textarea::placeholder {
-    @apply font-sans text-sm;
-  }
-
-  input::placeholder {
-    @apply font-sans text-sm;
-  }
-</style>
 <Layout title="log101">
   <Header />
   <Post post={entry} componentType="full" />
@@ -39,40 +29,10 @@ export async function getStaticPaths() {
   <section class="comments">
     <h6 class="text-xl mb-3">Yorumlar</h6>
     <div class="flex flex-col gap-6">
-      <div
+      <Comment />
-        class="comment border-black border border-solid rounded pt-1 pb-6 ml-4"
+      <Comment />
-      >
+      <HorizontalLine />
-        <p class="font-semibold pl-3 pr-2 pb-1">Arafat Candan</p>
+      <CommentForm />
-        <hr />
-        <p class="pl-3 py-2 pr-4">
-          Daha önce hiç bu açıdan bakmamıştım, harika bir yazı olmuş.
-        </p>
-      </div>
-      <div
-        class="comment border-black border border-solid rounded pt-1 pb-6 ml-4"
-      >
-        <p class="font-semibold pl-3 pr-2 pb-1">Asude Fikrim</p>
-        <hr />
-        <p class="pl-3 py-2 pr-4">
-          Keşke biraz daha uğraşsaydınız, fikirler ibtidai seviyede kalmış.
-          Örnek olarak falanca siteye göz gezdirebilirsiniz.
-        </p>
-      </div>
-      <hr />
-      <form>
-        <div class="p-1 flex flex-col gap-3">
-          <textarea
-            class="textarea py-2 px-2 w-full box-border"
-            rows="5"
-            placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"></textarea>
-          <input
-            type="text"
-            class="w-full py-2 px-2 box-border"
-            placeholder="İsminiz (Yazmak zorunda değilsiniz)"
-          />
-          <button type="submit" class="w-16">Yorum Yap</button>
-        </div>
-      </form>
     </div>
   </section>
   <Footer />