Select

import { Select } from "@makeswift/runtime/controls"

import { runtime } from "@/makeswift/runtime"

import { Button } from "./Button"

runtime.registerComponent(Button, {
  type: "button",
  label: "Button",
  props: {
    variant: Select({
      label: "Style",
      labelOrientation: "horizontal",
      options: [
        { value: "floating", label: "Floating" },
        { value: "outline", label: "Outline" },
        { value: "clear", label: "Clear" },
      ],
      defaultValue: "floating",
    }),
  },
})

import clsx from "clsx"

interface Props {
  variant?: "floating" | "outline" | "clear"
}

export function Button({ variant = "floating" }) {
  return (
    <a
      className={clsx(
        "px-4 py-3 rounded",
        {
          floating: "bg-primary text-white shadow",
          outline: "bg-transparent border border-primary text-primary",
          clear: "text-primary bg-transparent border-none",
        }[variant]
      )}
      href={link.href}
      target={link.target}
    >
      Click me
    </a>
  )
}