Serve optional PNG/JPG next to each script and show meta tags in lists, cards, and the editor. Co-authored-by: Cursor <cursoragent@cursor.com>
31 lines
773 B
React
31 lines
773 B
React
import { useEffect, useState } from "react";
|
|
import { TbFileTypeJs } from "react-icons/tb";
|
|
|
|
export function scriptIconSrc(name) {
|
|
return `/api/scripts/${encodeURIComponent(name)}/icon`;
|
|
}
|
|
|
|
/** Same-name PNG/JPG next to the script, or a JS document icon. */
|
|
export function ScriptIcon({ name, hasIcon, className = "size-10" }) {
|
|
const [failed, setFailed] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setFailed(false);
|
|
}, [name]);
|
|
|
|
const showFile = Boolean(name) && hasIcon !== false && !failed;
|
|
|
|
if (!showFile) {
|
|
return <TbFileTypeJs className={`${className} text-warning`} aria-hidden />;
|
|
}
|
|
|
|
return (
|
|
<img
|
|
src={scriptIconSrc(name)}
|
|
alt=""
|
|
className={`${className} object-contain`}
|
|
onError={() => setFailed(true)}
|
|
/>
|
|
);
|
|
}
|