Social Hover Cards

import { Github, MessageCircle, SendHorizontal } from "lucide-react";

import {
  SocialHoverCards,
  type SocialHoverCardItem,
} from "@/components/unlumen-ui/social-hover-cards";

const items: SocialHoverCardItem[] = [
  {
    value: "github",
    label: "GitHub",
    href: "https://github.com/your-account",
    icon: <Github />,
    content: (
      <div className="w-72 p-4">
        <p className="font-medium">@your-account</p>
        <p className="mt-1 text-sm text-muted-foreground">
          Building useful things in public.
        </p>
      </div>
    ),
  },
  {
    value: "message",
    label: "Message",
    icon: <MessageCircle />,
    content: (
      <div className="w-80 p-4">
        <p className="font-medium">Send a quick message</p>
        <form
          className="mt-3 flex rounded-xl border p-1.5 pl-3"
          onSubmit={(event) => event.preventDefault()}
        >
          <input
            aria-label="Message"
            placeholder="Write a message..."
            className="min-w-0 flex-1 bg-transparent text-sm outline-none"
          />
          <button type="submit" aria-label="Send message">
            <SendHorizontal className="size-4" />
          </button>
        </form>
      </div>
    ),
  },
];

export default function Example() {
  return <SocialHoverCards items={items} />;
}