Image

1"use client";
2 
3import * as React from "react";
4import { cn } from "./_adapter";
5 
6import {
7  RATIO_CLASS_MAP,
8  getFitClass,
9  openSafeNavigationHref,
10  resolveSafeNavigationHref,
11  sanitizeHref,
12} from "../shared/media";
13import type { SerializableImage, Source } from "./schema";
14 
15const FALLBACK_LOCALE = "en-US";
16 
17export interface ImageProps extends SerializableImage {
18  className?: string;
19  onNavigate?: (href: string, image: SerializableImage) => void;
20}
21 
22export function Image(props: ImageProps) {
23  const { className, onNavigate, ...serializable } = props;
24 
25  const {
26    id,
27    src,
28    alt,
29    title,
30    href: rawHref,
31    domain,
32    ratio = "auto",
33    fit = "cover",
34    source,
35    locale: providedLocale,
36  } = serializable;
37 
38  const locale = providedLocale ?? FALLBACK_LOCALE;
39  const sanitizedHref = sanitizeHref(rawHref);
40  const resolvedSourceUrl = sanitizeHref(source?.url);
41 
42  const imageData: SerializableImage = {
43    ...serializable,
44    href: sanitizedHref,
45    source: source ? { ...source, url: resolvedSourceUrl } : undefined,
46    locale,
47  };
48 
49  const sourceLabel = source?.label ?? domain;
50  const fallbackInitial = (sourceLabel ?? "").trim().charAt(0).toUpperCase();
51  const hasSource = Boolean(sourceLabel || source?.iconUrl);
52 
53  const handleSourceClick = (event: React.MouseEvent<HTMLButtonElement>) => {
54    event.preventDefault();
55    event.stopPropagation();
56    const targetUrl = resolveSafeNavigationHref(
57      resolvedSourceUrl,
58      source?.url,
59      sanitizedHref,
60      src,
61    );
62    if (!targetUrl) return;
63    if (onNavigate) {
64      onNavigate(targetUrl, imageData);
65    } else {
66      openSafeNavigationHref(targetUrl);
67    }
68  };
69 
70  const handleImageClick = () => {
71    if (!sanitizedHref) return;
72    if (onNavigate) {
73      onNavigate(sanitizedHref, imageData);
74    } else {
75      openSafeNavigationHref(sanitizedHref);
76    }
77  };
78 
79  const hasMetadata = title || hasSource;
80 
81  return (
82    <article
83      className={cn("relative w-full max-w-md min-w-80", className)}
84      lang={locale}
85      data-tool-ui-id={id}
86      data-slot="image"
87    >
88      <div
89        className={cn(
90          "group @container relative isolate flex w-full min-w-0 flex-col overflow-hidden rounded-xl",
91          "border-border bg-card border text-sm shadow-xs",
92        )}
93      >
94        <>
95          <div
96            className={cn(
97              "bg-muted group relative w-full overflow-hidden",
98// … truncated