stefan
439551951b
- Implemented new reusable components including Label, Input, InputOTP, HoverCard, Popover, Pagination, NavigationMenu, Menubar, ScrollArea, Resizable, RadioGroup, and Progress under `docs/06_Frontend/FIGMA/src/app/components/ui/`. - Enhanced structural organization to improve scalability and maintainability. - Updated `settings.gradle.kts` to include the new module `frontend:features:nennung-feature`. Signed-off-by: Stefan Mogeritsch <stefan.mo.co@gmail.com>
28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
import React, {useState} from 'react'
|
|
|
|
const ERROR_IMG_SRC =
|
|
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
|
|
|
|
export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
|
|
const [didError, setDidError] = useState(false)
|
|
|
|
const handleError = () => {
|
|
setDidError(true)
|
|
}
|
|
|
|
const {src, alt, style, className, ...rest} = props
|
|
|
|
return didError ? (
|
|
<div
|
|
className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
|
|
style={style}
|
|
>
|
|
<div className="flex items-center justify-center w-full h-full">
|
|
<img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src}/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError}/>
|
|
)
|
|
}
|