import * as React from "react";

import { cn } from "@/lib/utils";

interface LinkPreviewProps {
  href: string;
  title: string;
  description?: string;
  domain?: string;
  imageSrc?: string;
  className?: string;
  target?: "_blank" | "_self";
}

const GlobeIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden
  >
    <circle cx="12" cy="12" r="9" />
    <path d="M3 12h18" />
    <path d="M12 3c3 3.5 3 14 0 18" />
    <path d="M12 3c-3 3.5-3 14 0 18" />
  </svg>
);

export function LinkPreview({
  href,
  title,
  description,
  domain,
  imageSrc,
  className,
  target = "_blank",
}: LinkPreviewProps) {
  return (
    <a
      href={href}
      target={target}
      rel={target === "_blank" ? "noreferrer" : undefined}
      className={cn(
        "group flex w-full overflow-hidden rounded-xl",
        "border border-border bg-card text-foreground",
        "transition-colors hover:bg-muted",
        className
      )}
    >
      <div className="relative w-40 shrink-0 overflow-hidden bg-muted">
        {imageSrc ? (
          <img
            src={imageSrc}
            alt={title}
            className="h-full w-full object-cover"
            loading="lazy"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center">
            <GlobeIcon className="h-6 w-6 text-muted-foreground" />
          </div>
        )}
      </div>
      <div className="flex flex-1 flex-col gap-2 p-4">
        <div className="space-y-1">
          <h3 className="text-base font-semibold text-foreground">{title}</h3>
          {description ? (
            <p className="text-sm text-muted-foreground">{description}</p>
          ) : null}
        </div>
        {domain ? (
          <span className="text-xs font-medium text-muted-foreground">
            {domain}
          </span>
        ) : null}
      </div>
    </a>
  );
}
Link Preview

UI Destination

Dependencies

Files

Installation
