update

src/components/textNote/ImageDisplay.tsx

@@ -1,7 +1,9 @@
-import { Component } from 'solid-js';
+import { Component, createSignal, Show } from 'solid-js';
+import { ContentWarning } from '@/core/event';
 
 type ImageDisplayProps = {
   url: string;
+  contentWarning: ContentWarning;
 };
 
 const fixUrl = (url: URL): string => {
@@ -20,16 +22,29 @@ const fixUrl = (url: URL): string => {
 };
 
 const ImageDisplay: Component<ImageDisplayProps> = (props) => {
+  const [hidden, setHidden] = createSignal(props.contentWarning.contentWarning);
   const url = () => new URL(props.url);
 
   return (
-    <a class="my-2 block" href={props.url} target="_blank" rel="noopener noreferrer">
-      <img
-        class="inline-block max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
-        src={fixUrl(url())}
-        alt={props.url}
-      />
-    </a>
+    <Show
+      when={!hidden()}
+      fallback={
+        <button
+          class="rounded bg-stone-300 p-3 text-xs text-stone-600 hover:shadow"
+          onClick={() => setHidden(false)}
+        >
+          画像を展開する
+        </button>
+      }
+    >
+      <a class="my-2 block" href={props.url} target="_blank" rel="noopener noreferrer">
+        <img
+          class="inline-block max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
+          src={fixUrl(url())}
+          alt={props.url}
+        />
+      </a>
+    </Show>
   );
 };