#399

frontend/src/components/posts/PostThumbnailPreview.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+
+import type { FC } from 'react'
+
+type Props = {
+  url:        string
+  alt?:       string
+  className?: string }
+
+
+const PostThumbnailPreview: FC<Props> = (
+    { url, alt = 'サムネール', className = 'h-16 w-16' },
+) => {
+  const [failed, setFailed] = useState (false)
+
+  useEffect (() => {
+    setFailed (false)
+  }, [url])
+
+  if (!(url))
+    {
+      return (
+          <div
+              className={`${ className } flex items-center justify-center rounded border
+                          border-border bg-muted text-xs text-muted-foreground`}>
+            なし
+          </div>)
+    }
+
+  if (failed)
+    {
+      return (
+          <div
+              className={`${ className } flex items-center justify-center rounded border
+                          border-amber-300 bg-amber-50 p-2 text-center text-xs
+                          text-amber-700 dark:border-amber-900 dark:bg-amber-950
+                          dark:text-amber-200`}>
+            サムネールを表示できません
+          </div>)
+    }
+
+  return (
+      <img
+          src={url}
+          alt={alt}
+          className={`${ className } rounded border border-border object-cover`}
+          onError={() => setFailed (true)}/>)
+}
+
+export default PostThumbnailPreview