Refactor of replies,Icon Swap
This commit is contained in:
parent
999d180b24
commit
b5b256f6e9
3 changed files with 56 additions and 1 deletions
17
client-solid/src/Components/Buttons/CommentsButton.tsx
Normal file
17
client-solid/src/Components/Buttons/CommentsButton.tsx
Normal file
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
20
client-solid/src/Components/Buttons/Reply.tsx
Normal file
20
client-solid/src/Components/Buttons/Reply.tsx
Normal file
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue