feat(json-crdt-peritext-ui): 🎸 add <Img> and <Favicon> components

Author: streamich

src/json-crdt-peritext-ui/components/Favicon/index.tsx

@@ -0,0 +1,34 @@
+import {createElement as h, useMemo} from 'react';
+import {Avatar} from 'nice-ui/lib/1-inline/Avatar';
+import {Img, ImgProps} from '../Img';
+import {getDomain} from '../../web/util';
+
+export interface FaviconProps extends ImgProps {
+  url?: string;
+  domain?: string;
+  size?: number;
+}
+
+export const Favicon: React.FC<FaviconProps> = (props) => {
+  const {domain: _domain, url, size = 16, ...rest} = props;
+  const domain = useMemo(() => _domain || getDomain(url || ''), [_domain, url]);
+
+  if (!domain)
+    return h(Avatar, {name: url || domain, width: size, height: size, letters: 1});
+
+  return h(Img, {
+    ...rest,
+    alt: domain + ' favicon',
+    width: size,
+    height: size,
+    src: 'https://www.google.com/s2/favicons?domain=' + domain,
+    renderError: () => h(Img, {
+      ...rest,
+      alt: domain + ' favicon',
+      width: size,
+      height: size,
+      src: 'https://' + domain + '/favicon.ico',
+      renderError: () => h(Avatar, {name: domain, width: size, height: size, letters: 1}),
+    }),
+  });
+};

src/json-crdt-peritext-ui/components/Img/index.tsx

@@ -0,0 +1,17 @@
+import {createElement, useState} from 'react';
+
+export interface ImgProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  renderError?: (error: Error | unknown, props: ImgProps) => React.ReactNode;
+}
+
+export const Img: React.FC<ImgProps> = (props) => {
+  const {renderError, onError, ...rest} = props;
+  const [error, setError] = useState<unknown | undefined>(void 0);
+
+  if (error && renderError) return renderError(error, props);
+
+  return createElement('img', {...rest, onError: (e: unknown) => {
+    setError(e);
+    onError?.(e as any);
+  }});
+};