feat: add comment and comment form component
This commit is contained in:
parent
53c5203f23
commit
68fd34c830
15
src/components/Comment.astro
Normal file
15
src/components/Comment.astro
Normal 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
37
src/components/CommentForm.astro
Normal 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
5
src/components/HorizontalLine.astro
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="border-b border-x-0 border-t-0 border-solid border-slate-700"></div>
|
|
@ -6,6 +6,9 @@ import Header from "@/components/Header.astro";
|
||||||
import Layout from "@/layouts/Layout.astro";
|
import Layout from "@/layouts/Layout.astro";
|
||||||
import Post from "@/components/Post.astro";
|
import Post from "@/components/Post.astro";
|
||||||
import EmojiReactionForm from "@/components/EmojiReactionForm.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;
|
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">
|
<Layout title="log101">
|
||||||
<Header />
|
<Header />
|
||||||
<Post post={entry} componentType="full" />
|
<Post post={entry} componentType="full" />
|
||||||
|
@ -39,40 +29,10 @@ export async function getStaticPaths() {
|
||||||
<section class="comments">
|
<section class="comments">
|
||||||
<h6 class="text-xl mb-3">Yorumlar</h6>
|
<h6 class="text-xl mb-3">Yorumlar</h6>
|
||||||
<div class="flex flex-col gap-6">
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
Loading…
Reference in New Issue
Block a user