log101/log101-dot-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add comment and comment form component

Browse Source
This commit is contained in:
log101 2024-06-18 16:44:05 +03:00
parent 53c5203f23
commit 68fd34c830
4 changed files with 64 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Comment.astro Normal file
View File

@ -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>

37
src/components/CommentForm.astro Normal file
View File

@ -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>

5
src/components/HorizontalLine.astro Normal file
View File

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

54
src/pages/category/[category]/[slug]/index.astro
View File

@ -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
class="comment border-black border border-solid rounded pt-1 pb-6 ml-4"
>
<p class="font-semibold pl-3 pr-2 pb-1">Arafat Candan</p>
<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>
<Comment />
<Comment />
<HorizontalLine />
<CommentForm />
</div>
</section>
<Footer />