Function LinkPreview

packages/ui/src/link-preview.tsx:12–109

({ defaultUrl }: { defaultUrl?: string })

import { LoadingSpinner, Photo } from "./icons";

export function LinkPreview({ defaultUrl }: { defaultUrl?: string }) {
  const searchParams = useSearchParams();
  const url =
    defaultUrl || searchParams?.get("url") || "https://github.com/dubinc/dub";
  const [debouncedUrl] = useDebounce(getUrlFromString(url), 500);
  const hostname = useMemo(() => {
    return getDomainWithoutWWW(debouncedUrl || "");
  }, [debouncedUrl]);

  const { data, isValidating } = useSWR<{
    title: string | null;
    description: string | null;
    image: string | null;
  }>(
    debouncedUrl &&
      `/api/links/metatags?url=${encodeURIComponent(debouncedUrl)}`,
    fetcher,
    {
      revalidateOnFocus: false,
    },
  );

  const { title, description, image } = data || {};

  const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (!defaultUrl && inputRef.current) {
      inputRef.current.select();
    }
  }, [defaultUrl]);

  const { isMobile } = useMediaQuery();

  return (
    <>
      {!defaultUrl && (
        <div className="relative flex items-center">
          <Link2 className="absolute inset-y-0 left-0 my-2 ml-3 w-5 text-neutral-400" />
          <input
            ref={inputRef}
            name="url"
            id="url"
            type="url"
            autoFocus={!isMobile}
            className="block w-full rounded-md border-neutral-200 pl-10 text-sm text-neutral-900 placeholder-neutral-400 shadow-lg focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
            placeholder="Enter your URL"
            defaultValue={url}
            aria-invalid="true"
          />
        </div>
      )}

      <div className="relative w-full overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 shadow-sm">
        {isValidating && (
          <div className="absolute inset-x-0 flex h-[250px] flex-col items-center justify-center space-y-4 border-b border-neutral-300 bg-neutral-50">
            <LoadingSpinner />
          </div>
        )}