From b5b256f6e9b8cc9787e7e3b3126f8419aaa12d0e Mon Sep 17 00:00:00 2001
From: Hollgy <karlgustav.ek@hotmail.com>
Date: Fri, 22 Mar 2024 13:27:11 +0100
Subject: [PATCH] Refactor of replies,Icon Swap

---
 .../src/Components/Buttons/CommentsButton.tsx | 17 ++++++++++++++++
 client-solid/src/Components/Buttons/Reply.tsx | 20 +++++++++++++++++++
 client-solid/src/Util/Icons.tsx               | 20 ++++++++++++++++++-
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 client-solid/src/Components/Buttons/CommentsButton.tsx
 create mode 100644 client-solid/src/Components/Buttons/Reply.tsx

diff --git a/client-solid/src/Components/Buttons/CommentsButton.tsx b/client-solid/src/Components/Buttons/CommentsButton.tsx
new file mode 100644
index 0000000..700c7b0
--- /dev/null
+++ b/client-solid/src/Components/Buttons/CommentsButton.tsx
@@ -0,0 +1,17 @@
+import { JSXElement } from "solid-js";
+
+import { CommentsIcon } from "../../Util/Icons";
+import { Post } from "../../Util/api";
+
+export default function CommentsBUtton({ post }: { post: Post }): JSXElement {
+  return (
+    <>
+      <div class="flex p-1">
+          <CommentsIcon />
+        <span class="text-1xl countdown text-center pt-1.5 px-1.5">
+          <p style={{ "--value": 11 }}>{post.comments}</p>
+        </span>
+      </div>
+    </>
+  );
+}
diff --git a/client-solid/src/Components/Buttons/Reply.tsx b/client-solid/src/Components/Buttons/Reply.tsx
new file mode 100644
index 0000000..ead9dd7
--- /dev/null
+++ b/client-solid/src/Components/Buttons/Reply.tsx
@@ -0,0 +1,20 @@
+import { JSXElement, Show, useContext } from "solid-js";
+
+import { LoginContext } from "../../Context/GlobalState";
+import { ReplyIcon, ReportIcon } from "../../Util/Icons";
+
+export default function ReplyButton(): JSXElement {
+  const login_ctx = useContext(LoginContext)!;
+  return (
+    <Show when={login_ctx.loggedIn()}>
+      <div class="flex p-1">
+        <button
+          class="rounded-base btn btn-xs hover:border-primary"
+          aria-label="Report post or comment"
+        >
+          <ReplyIcon />
+        </button>
+      </div>
+    </Show>
+  );
+}
diff --git a/client-solid/src/Util/Icons.tsx b/client-solid/src/Util/Icons.tsx
index 68bf9ca..486e591 100644
--- a/client-solid/src/Util/Icons.tsx
+++ b/client-solid/src/Util/Icons.tsx
@@ -172,7 +172,7 @@ export function CheckMark(): JSXElement {
   );
 }
 
-export function ReplyIcon(): JSXElement {
+export function CommentsIcon(): JSXElement {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -252,3 +252,21 @@ export function RemovePostIcon(): JSXElement {
     </svg>
   );
 }
+export function ReplyIcon(): JSXElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width={1.5}
+      stroke="currentColor"
+      class="h-6 w-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z"
+      />
+    </svg>
+  );
+}