corner-button

1"use client";
2 
3import React from "react";
4import { cn } from "@/lib/utils";
5 
6// ─── Types ────────────────────────────────────────────────────────────────────
7 
8export interface CornerButtonProps
9  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
10  /** Icon rendered to the right of the label. Defaults to the pencil/design SVG. */
11  icon?: React.ReactNode;
12  /** Show the default pencil icon. Set to false to hide it entirely. @default true */
13  showIcon?: boolean;
14  /** Accent colour used for the button background and glow. @default "#e5ff00" */
15  accentColor?: string;
16  /** Extra classes applied to the outer wrapper div. */
17  wrapperClassName?: string;
18}
19 
20// ─── Default icon ─────────────────────────────────────────────────────────────
21 
22const PencilIcon = ({ className }: { className?: string }) => (
23  <svg
24    className={className}
25    viewBox="0 0 24 24"
26    xmlns="http://www.w3.org/2000/svg"
27    strokeLinecap="round"
28    strokeLinejoin="round"
29  >
30    <path d="M17.6744 11.4075L15.7691 17.1233C15.7072 17.309 15.5586 17.4529 15.3709 17.5087L3.69348 20.9803C3.22819 21.1186 2.79978 20.676 2.95328 20.2155L6.74467 8.84131C6.79981 8.67588 6.92419 8.54263 7.08543 8.47624L12.472 6.25822C12.696 6.166 12.9535 6.21749 13.1248 6.38876L17.5294 10.7935C17.6901 10.9542 17.7463 11.1919 17.6744 11.4075Z" />
31    <path d="M3.2959 20.6016L9.65986 14.2376" />
32    <path d="M17.7917 11.0557L20.6202 8.22724C21.4012 7.44619 21.4012 6.17986 20.6202 5.39881L18.4989 3.27749C17.7178 2.49645 16.4515 2.49645 15.6704 3.27749L12.842 6.10592" />
33    <path d="M11.7814 12.1163C11.1956 11.5305 10.2458 11.5305 9.66004 12.1163C9.07426 12.7021 9.07426 13.6519 9.66004 14.2376C10.2458 14.8234 11.1956 14.8234 11.7814 14.2376C12.3671 13.6519 12.3671 12.7021 11.7814 12.1163Z" />
34  </svg>
35);
36 
37// ─── Component ────────────────────────────────────────────────────────────────
38 
39export function CornerButton({
40  children = "Start designing",
41  icon,
42  showIcon = true,
43  accentColor = "#e5ff00",
44  className,
45  wrapperClassName,
46  style,
47  ...props
48}: CornerButtonProps) {
49  const resolvedIcon =
50    icon ??
51// … truncated