Action Button

1"use client";
2 
3import * as React from "react";
4import { Button } from "@base-ui/react/button";
5import { cn } from "@/lib/utils";
6import "@/components/ui/whatsapp/styles/whatsapp.css";
7 
8export interface ActionButtonProps {
9  /** Icon element rendered before the label */
10  icon?: React.ReactNode;
11  children: React.ReactNode;
12  /** Render as an anchor — base-ui render prop */
13  href?: string;
14  onClick?: () => void;
15  className?: string;
16}
17 
18/**
19 * WhatsApp-style outlined pill action button.
20 *
21 * @example
22 * <ActionButton icon={<ViewMoreIcon />}>더 보기</ActionButton>
23 * <ActionButton icon={<PlusIcon />} href="/channels/create">채널 만들기</ActionButton>
24 */
25const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
26  ({ icon, children, href, onClick, className }, ref) => {
27    const renderEl = href ? <a href={href} /> : undefined;
28 
29    return (
30      <Button
31        ref={ref}
32        render={renderEl}
33        nativeButton={!href}
34        onClick={onClick}
35        className={cn(
36          "font-wa inline-flex w-full items-center justify-center gap-2",
37          "rounded-full border border-wa-emerald-500 px-4 py-[10px]",
38          "text-[15px] font-medium text-wa-emerald-500",
39          "transition-colors hover:bg-wa-emerald-500/10",
40          className
41        )}
42      >
43        {icon && <span className="shrink-0">{icon}</span>}
44        {children}
45      </Button>
46    );
47  }
48);
49ActionButton.displayName = "ActionButton";
50 
51export { ActionButton };