50 行
1.1 KiB
TypeScript
50 行
1.1 KiB
TypeScript
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-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 ThumbnailPreview
|