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

more more more

Browse Source
This commit is contained in:
Michael Freno
2026-01-06 11:58:12 -05:00
parent 46f1efcd79
commit 1f661f4f89
5 changed files with 234 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/blog/CommentDeletionPrompt.tsx
View File

@@ -1,7 +1,8 @@
import { createSignal, Show } from "solid-js";
import type { CommentDeletionPromptProps, DeletionType } from "~/types/comment";
import UserDefaultImage from "~/components/icons/UserDefaultImage";
import Xmark from "~/components/icons/Xmark";
import Modal from "~/components/ui/Modal";
import Button from "~/components/ui/Button";
export default function CommentDeletionPrompt(
props: CommentDeletionPromptProps
@@ -44,103 +45,90 @@ export default function CommentDeletionPrompt(
normalDeleteChecked() || adminDeleteChecked() || fullDeleteChecked();
return (
<div class="flex justify-center">
<div class="fixed top-48 z-100 h-fit">
<div
id="delete_prompt"
class="fade-in bg-red rounded-md px-8 py-4 shadow-lg brightness-110"
>
<button class="fixed right-4" onClick={() => props.onClose()}>
<Xmark strokeWidth={0.5} color="white" height={50} width={50} />
</button>
<div class="py-4 text-center text-3xl tracking-wide">
Comment Deletion
</div>
<div class="bg-surface0 mx-auto w-3/4 rounded px-6 py-4">
<div class="flex overflow-x-auto overflow-y-hidden select-text">
{/* Comment body will be passed as prop */}
</div>
<div class="my-2 flex pl-2">
<Show
when={props.commenterImage}
fallback={
<UserDefaultImage strokeWidth={1} height={24} width={24} />
}
>
<img
src={props.commenterImage}
height={24}
width={24}
alt="user-image"
class="h-6 w-6 rounded-full object-cover object-center"
/>
</Show>
<div class="px-1">
{props.commenterDisplayName ||
props.commenterEmail ||
"[removed]"}
</div>
</div>
</div>
<div class="flex w-full justify-center">
<div class="flex pt-4">
<input
type="checkbox"
class="my-auto"
checked={normalDeleteChecked()}
onChange={handleNormalDeleteCheckbox}
/>
<div class="my-auto px-2 text-sm font-normal">
{props.privilegeLevel === "admin"
? "Confirm User Delete?"
: "Confirm Delete?"}
</div>
</div>
</div>
<Show when={props.privilegeLevel === "admin"}>
<div class="flex w-full justify-center">
<div class="flex pt-4">
<input
type="checkbox"
class="my-auto"
checked={adminDeleteChecked()}
onChange={handleAdminDeleteCheckbox}
/>
<div class="my-auto px-2 text-sm font-normal">
Confirm Admin Delete?
</div>
</div>
</div>
<div class="flex w-full justify-center">
<div class="flex pt-4">
<input
type="checkbox"
class="my-auto"
checked={fullDeleteChecked()}
onChange={handleFullDeleteCheckbox}
/>
<div class="my-auto px-2 text-sm font-normal">
Confirm Full Delete (removal from database)?
</div>
</div>
</div>
<Modal
open={props.isOpen}
onClose={props.onClose}
title="Comment Deletion"
class="bg-red brightness-110"
>
<div class="bg-surface0 mx-auto w-3/4 rounded px-6 py-4">
<div class="flex overflow-x-auto overflow-y-hidden select-text">
{/* Comment body will be passed as prop */}
</div>
<div class="my-2 flex pl-2">
<Show
when={props.commenterImage}
fallback={
<UserDefaultImage strokeWidth={1} height={24} width={24} />
}
>
<img
src={props.commenterImage}
height={24}
width={24}
alt="user-image"
class="h-6 w-6 rounded-full object-cover object-center"
/>
</Show>
<div class="flex w-full justify-center pt-2">
<button
type="button"
onClick={deletionWrapper}
disabled={props.commentDeletionLoading || !isDeleteEnabled()}
class={`${
props.commentDeletionLoading || !isDeleteEnabled()
? "bg-surface2 opacity-50"
: "border-red bg-red hover:brightness-125"
} rounded border px-4 py-2 text-base shadow-md transition-all duration-300 ease-in-out active:scale-90`}
>
Delete
</button>
<div class="px-1">
{props.commenterDisplayName || props.commenterEmail || "[removed]"}
</div>
</div>
</div>
</div>
<div class="flex w-full justify-center">
<div class="flex pt-4">
<input
type="checkbox"
class="my-auto"
checked={normalDeleteChecked()}
onChange={handleNormalDeleteCheckbox}
/>
<div class="my-auto px-2 text-sm font-normal">
{props.privilegeLevel === "admin"
? "Confirm User Delete?"
: "Confirm Delete?"}
</div>
</div>
</div>
<Show when={props.privilegeLevel === "admin"}>
<div class="flex w-full justify-center">
<div class="flex pt-4">
<input
type="checkbox"
class="my-auto"
checked={adminDeleteChecked()}
onChange={handleAdminDeleteCheckbox}
/>
<div class="my-auto px-2 text-sm font-normal">
Confirm Admin Delete?
</div>
</div>
</div>
<div class="flex w-full justify-center">
<div class="flex pt-4">
<input
type="checkbox"
class="my-auto"
checked={fullDeleteChecked()}
onChange={handleFullDeleteCheckbox}
/>
<div class="my-auto px-2 text-sm font-normal">
Confirm Full Delete (removal from database)?
</div>
</div>
</div>
</Show>
<div class="flex w-full justify-center pt-2">
<Button
type="button"
onClick={deletionWrapper}
loading={props.commentDeletionLoading}
disabled={!isDeleteEnabled()}
variant="danger"
>
Delete
</Button>
</div>
</Modal>
);
}