Imbus/FrostByte
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Redesign of comments, now differs more from post, space made for additions regarding replies

Browse source
This commit is contained in:
Hollgy 2024-03-18 15:59:32 +01:00
parent b1f6c21b6f
commit 581d6454c0
3 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client-solid/src/Components/Comment.tsx
View file

@ -14,11 +14,15 @@ interface CommentProps {
*/ */
export function Comment({ comment }: CommentProps): JSXElement { export function Comment({ comment }: CommentProps): JSXElement {
return ( return (
<div class="flex px-2 min-w-full flex-col rounded-lg border-b-2 border-b-secondary bg-base-300 py-2 text-base-content transition-all hover:bg-base-300 md:px-12"> <>
<div class="flex flex-row"> <div class="chat chat-start">
<div class="pb-1 text-xs text-gray-500">{comment.created_at}</div> <time class="text-xs opacity-50">{comment.created_at}</time>
</div> </div>
<div class="text-sm">{comment.content}</div> <div class="chat-bubble">{comment.content}</div>
<div class="chat chat-end">
<time class="text-xs opacity-50">Reply created_at</time>
<div class="chat-bubble">Replies to parent comment if any</div>
</div> </div>
</>
); );
} }

2
client-solid/src/Components/CommentSection.tsx
View file

@ -13,6 +13,8 @@ export function CommentSection({ postId }: { postId: string }): JSXElement {
const [comments] = createResource(postId, () => getComments(postId, 10, 0)); const [comments] = createResource(postId, () => getComments(postId, 10, 0));
return ( return (
<section class="p-5 my-5 bg-base-200 border-b-2 border-b-primary ">
<For each={comments()!}>{(comment) => <Comment comment={comment} />}</For> <For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>
</section>
); );
} }

6
package-lock.json generated Normal file
View file

@ -0,0 +1,6 @@
{
"name": "FrostByte",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}