import * as React from "react";

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

interface EmbedCardProps {
  title: string;
  description?: string;
  src?: string;
  className?: string;
  aspectRatio?: string;
  allow?: string;
  allowFullScreen?: boolean;
}

const EmbedIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden
  >
    <path d="M8 8l-4 4 4 4" />
    <path d="M16 8l4 4-4 4" />
    <path d="M10 19l4-14" />
  </svg>
);

export function EmbedCard({
  title,
  description,
  src,
  className,
  aspectRatio = "16 / 9",
  allow,
  allowFullScreen = true,
}: EmbedCardProps) {
  return (
    <div
      className={cn(
        "overflow-hidden rounded-xl border border-border bg-card text-foreground",
        className
      )}
    >
      <div className="space-y-1 p-4">
        <h3 className="text-base font-semibold text-foreground">{title}</h3>
        {description ? (
          <p className="text-sm text-muted-foreground">{description}</p>
        ) : null}
      </div>
      <div
        className="w-full bg-muted"
        style={{ aspectRatio }}
      >
        {src ? (
          <iframe
            title={title}
            src={src}
            className="h-full w-full"
            allow={allow}
            allowFullScreen={allowFullScreen}
            loading="lazy"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center">
            <div className="flex flex-col items-center gap-2 text-muted-foreground">
              <EmbedIcon className="h-6 w-6" />
              <span className="text-xs">Embed unavailable</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
Embed Card

Product walkthrough

Dependencies

Files

Installation
