grain.social
grain.social is a photo sharing platform built on atproto.
chadtmiller.com
1import { ComponentChildren } from "preact";
2import { ModerationDecsion } from "../lib/moderation.ts";
3import { LabelDefinitionButton } from "./LabelDefinitionButton.tsx";
4
5type ModerationWrapperProps = Readonly<{
6 class?: string;
7 moderationDecision?: ModerationDecsion;
8 children: ComponentChildren;
9}>;
10
11export function ModerationWrapper({
12 class: classProp,
13 moderationDecision,
14 children,
15}: ModerationWrapperProps) {
16 const id = crypto.randomUUID();
17 return (
18 moderationDecision
19 ? (
20 moderationDecision.isMe
21 ? (
22 <div>
23 <button
24 type="button"
25 hx-get={`/dialogs/label/${moderationDecision.src}/${moderationDecision.val}`}
26 hx-trigger="click"
27 hx-target="#layout"
28 hx-swap="afterbegin"
29 _="on click halt"
30 class="flex items-center gap-2 bg-zinc-200 dark:bg-zinc-800 p-2 text-sm mb-2"
31 >
32 <i class="fa fa-circle-info text-zinc-500" />
33 A label has been placed on this gallery
34 </button>
35 {children}
36 </div>
37 )
38 : (
39 <div
40 id={`moderation-wrapper-${id}`}
41 data-state="closed"
42 class={classProp}
43 >
44 <div class="bg-zinc-200 dark:bg-zinc-800 p-4 w-full rounded-md">
45 <div class="flex items-center justify-between gap-2 w-full">
46 <div class="flex items-center gap-2">
47 <i class="fa fa-circle-info text-zinc-500"></i>
48 <span class="text-sm">{moderationDecision?.name}</span>
49 </div>
50 <button
51 type="button"
52 class="text-sm font-semibold cursor-pointer"
53 _={`
54 on click
55 toggle .hidden on #mod-content-${id}
56 if my innerText is 'Show'
57 put 'Hide' into me
58 then put 'open' into @data-state of #moderation-wrapper-${id}
59 else
60 put 'Show' into me
61 then put 'closed' into @data-state of #moderation-wrapper-${id}`}
62 >
63 Show
64 </button>
65 </div>
66 </div>
67 <div class="text-sm my-2">
68 Labeled by @{moderationDecision?.labeledBy || "unknown"}.{" "}
69 <LabelDefinitionButton
70 src={moderationDecision.src}
71 val={moderationDecision.val}
72 />
73 </div>
74 <div id={`mod-content-${id}`} class="hidden">
75 {children}
76 </div>
77 </div>
78 )
79 )
80 : children
81 );
82}