components/share-preview/share-preview.react.tsx

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1import type { ReactNode } from "react";
2
3export interface SerpPreviewProps {
4  // The address as a search result writes it: "dustinedwards.info › blog › post".
5  url: string;
6  title: ReactNode;
7  description: ReactNode;
8  // Said under the result, for example that the title will be cut.
9  note?: ReactNode;
10  label?: string;
11}
12
13export interface OgCardPreviewProps {
14  // An img (alt text set by the app) or an svg. Drawn in a box at the card's 1200 x 630 shape.
15  image: ReactNode;
16  host: string;
17  title: ReactNode;
18  description?: ReactNode;
19  // Said under the card, for example that the site mark stands in for a missing cover.
20  note?: ReactNode;
21  label?: string;
22}
23
24// The HTML contract in share-preview.md. The app cuts the text to its limits before it passes it.
25export function SerpPreview({ url, title, description, note, label = "Search result preview" }: SerpPreviewProps) {
26  return (
27    <div className="cap-serp" role="group" aria-label={label}>
28      <p className="cap-serp-url">{url}</p>
29      <p className="cap-serp-title">{title}</p>
30      <p className="cap-serp-description">{description}</p>
31      {note ? <p className="cap-serp-note">{note}</p> : null}
32    </div>
33  );
34}
35
36export function OgCardPreview({ image, host, title, description, note, label = "Social card preview" }: OgCardPreviewProps) {
37  return (
38    <div className="cap-og-card" role="group" aria-label={label}>
39      <div className="cap-og-card-image">{image}</div>
40      <div className="cap-og-card-body">
41        <p className="cap-og-card-host">{host}</p>
42        <p className="cap-og-card-title">{title}</p>
43        {description ? <p className="cap-og-card-description">{description}</p> : null}
44      </div>
45      {note ? <p className="cap-og-card-note">{note}</p> : null}
46    </div>
47  );
48}