#399

frontend/src/components/posts/import/ThumbnailPreview.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+
+import type { FC } from 'react'
+
+
+type Props = {
+    url:       string
+    alt?:      string
+    className?: string }
+
+
+const ThumbnailPreview: 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-red-300 bg-red-50 p-2 text-center text-xs text-red-700
+			    dark:border-red-900 dark:bg-red-950 dark:text-red-200`}>
+	      表示不可
+	    </div>)
+      }
+
+    return (
+	<img
+	    src={url}
+	    alt={alt}
+	    className={`${ className } rounded border border-border object-cover`}
+	    onError={() => setFailed (true)}/>)
+}
+
+export default ThumbnailPreview