"use client";

import { ArrowUpRight, FileCode, X } from "lucide-react";
import { useState } from "react";
import {
  MorphicCard,
  MorphicCardModal,
} from "@/components/premium/morphic-card-modal";

const ITEMS = [
  {
    id: "chat-input",
    name: "Agent Chat Input",
    description:
      "Vercel AI SDK-compatible composer with model selection, reasoning, agents, skills, and attachments.",
    files: ["agent-chat-input.tsx", "hooks.ts", "types.ts"],
  },
  {
    id: "morphic-tooltip",
    name: "Morphic Tooltip",
    description:
      "Shared-layout tooltip that morphs between triggers with one animated surface.",
    files: ["morphic-tooltip.tsx"],
  },
];

export function MorphicCardModalPreview() {
  const [open, setOpen] = useState<string | null>(null);
  const active = ITEMS.find((i) => i.id === open) ?? null;

  return (
    <div className="flex w-full max-w-xl flex-col gap-3 px-4">
      <div className="grid grid-cols-2 gap-3">
        {ITEMS.map((item) => (
          <MorphicCard
            key={item.id}
            id={item.id}
            onClick={() => setOpen(item.id)}
            className="group border border-border bg-card p-4 transition-colors hover:border-border-strong"
          >
            <p className="font-semibold text-sm text-foreground">{item.name}</p>
            <p className="mt-1 line-clamp-2 text-muted-foreground text-xs">
              {item.description}
            </p>
            <span className="mt-3 inline-flex items-center gap-1 font-medium text-accent text-xs opacity-70 transition-opacity group-hover:opacity-100">
              Click to expand
              <ArrowUpRight className="size-3 transition-transform duration-200 ease-out group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
            </span>
          </MorphicCard>
        ))}
      </div>

      <MorphicCardModal
        id={active?.id ?? ""}
        open={Boolean(active)}
        onClose={() => setOpen(null)}
        className="border border-border bg-card shadow-2xl"
      >
        {active ? (
          <div className="p-5">
            <div className="flex items-start justify-between gap-3">
              <div>
                <p className="font-semibold text-foreground">{active.name}</p>
                <p className="mt-1 text-muted-foreground text-sm">
                  {active.description}
                </p>
              </div>
              <button
                type="button"
                aria-label="Close"
                onClick={() => setOpen(null)}
                className="grid size-7 shrink-0 place-items-center rounded-lg text-muted-foreground transition-colors hover:text-foreground"
              >
                <X className="size-4" />
              </button>
            </div>
            <ul className="mt-4 space-y-1.5 rounded-xl bg-background px-3 py-2.5">
              {active.files.map((f) => (
                <li key={f} className="flex items-center gap-2">
                  <FileCode className="size-3.5 shrink-0 text-muted-foreground" />
                  <span className="font-mono text-xs">{f}</span>
                </li>
              ))}
            </ul>
          </div>
        ) : null}
      </MorphicCardModal>
    </div>
  );
}
Morphic Card Modal

Install
