Border Beam Button

import { BorderBeam } from "@/components/ui/border-beam-button";

function IconButton() {
  return (
    <div
      style={{
        width: 36,
        height: 36,
        borderRadius: 20,
        background: "#1d1d1d",
        boxShadow: "inset 0 0 0 1px rgba(44,47,54,0.52), inset 0 0 50px 0 rgba(255,255,255,0.02)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div style={{ width: 12, height: 12, borderRadius: 2, background: "rgba(217,217,217,0.8)" }} />
    </div>
  );
}

export default function Default() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: 300,
        maxWidth: "100%",
        minHeight: 220,
        margin: "0 auto",
        background: "#0d0d0f",
        borderRadius: 24,
      }}
    >
      <BorderBeam size="sm" colorVariant="colorful">
        <IconButton />
      </BorderBeam>
    </div>
  );
}