A floating action button that bursts open into a fan of gooey liquid-metal action buttons, with each drop draggable via a stretchy metaball effect.
"use client";
import * as React from "react";
import {
MercuryDial,
type MercuryDialItem,
} from "@/components/ui/mercury-dial";
import { Image, Square, Type } from "lucide-react";
const glyph = "size-3.5";
const ITEMS: MercuryDialItem[] = [
{ label: "Image", icon: <Image className={glyph} aria-hidden="true" /> },
{ label: "Text", icon: <Type className={glyph} aria-hidden="true" /> },
{ label: "Shape", icon: <Square className={glyph} aria-hidden="true" /> },
];
export default function MercuryDialDemo() {
const [picked, setPicked] = React.useState<string | null>(null);
return (
<div className="bg-background text-foreground flex h-full min-h-[24rem] w-full flex-col items-center justify-end gap-6 pb-16">
<MercuryDial
items={ITEMS.map((item) => ({
...item,
onSelect: () => setPicked(item.label),
}))}
size={96}
label="Insert"
/>
<p className="text-muted-foreground h-5 text-sm">
{picked ? `Inserted ${picked.toLowerCase()}` : null}
</p>
</div>
);
}