Link Preview

"use client";
import React from "react";
import { LinkPreview } from "@/lab/aceternity/ui/link-preview";

// The original fetches live screenshots from microlink.io; here the previews
// are static images so the stage makes no third-party API calls.
const IMG = (id: string) =>
  `https://images.unsplash.com/${id}?q=70&w=600&auto=format&fit=crop`;

export default function LinkPreviewDemo() {
  return (
    <div className="relative flex h-full w-full flex-col items-center justify-center px-[6%] [container-type:inline-size]">
      <p className="mx-auto mb-[4cqw] max-w-3xl text-[clamp(0.95rem,4cqw,1.9rem)] text-neutral-500 dark:text-neutral-400">
        <LinkPreview
          url="https://tailwindcss.com"
          isStatic
          imageSrc={IMG("photo-1555066931-4365d14bab8c")}
          className="font-bold"
        >
          Tailwind CSS
        </LinkPreview>{" "}
        and{" "}
        <LinkPreview
          url="https://motion.dev"
          isStatic
          imageSrc={IMG("photo-1550745165-9bc0b252726f")}
          className="font-bold"
        >
          Framer Motion
        </LinkPreview>{" "}
        are a great way to build modern websites.
      </p>
      <p className="mx-auto max-w-3xl text-[clamp(0.95rem,4cqw,1.9rem)] text-neutral-500 dark:text-neutral-400">
        Visit{" "}
        <LinkPreview
          url="https://ui.aceternity.com"
          isStatic
          imageSrc={IMG("photo-1618005182384-a83a8bd57fbe")}
          className="bg-gradient-to-br from-purple-500 to-pink-500 bg-clip-text font-bold text-transparent"
        >
          Aceternity UI
        </LinkPreview>{" "}
        for amazing Tailwind and Framer Motion components.
      </p>
    </div>
  );
}