Gooey Actions

"use client";

import { GooeyActions } from "@/components/ui/gooey-actions";

const Icon = ({ d }: { d: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.8}
    strokeLinecap="round"
    strokeLinejoin="round"
    className="h-5 w-5"
  >
    <path d={d} />
  </svg>
);

// Hoisted so the fan is not rebuilt on every render.
const ACTIONS = [
  { id: "note", label: "New note", icon: <Icon d="M12 5v14M5 12h14" /> },
  { id: "share", label: "Share", icon: <Icon d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M12 3v13M8 7l4-4 4 4" /> },
  { id: "star", label: "Favourite", icon: <Icon d="m12 3 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.8l6.5-.9L12 3Z" /> },
  { id: "trash", label: "Delete", icon: <Icon d="M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13" /> },
];

export default function GooeyActionsDemo() {
  return (
    <div className="flex min-h-[460px] w-full items-end justify-center p-12">
      <GooeyActions
        label="Compose"
        actions={ACTIONS}
        radius={128}
        arc={[-150, -30]}
        defaultOpen
      />
    </div>
  );
}