ResponsiveButton.tsx raw

   1  import { VariantProps } from "class-variance-authority";
   2  import * as React from "react";
   3  import { cn } from "src/lib/utils";
   4  import { Button } from "./ui/button";
   5  import { buttonVariants } from "./ui/buttonVariants";
   6  
   7  type Props = {
   8    icon: React.ComponentType;
   9    text: string;
  10  } & React.ComponentProps<"button"> &
  11    VariantProps<typeof buttonVariants> & {
  12      asChild?: boolean;
  13    };
  14  
  15  const ResponsiveButton = ({
  16    icon: Icon,
  17    text,
  18    variant,
  19    asChild,
  20    children,
  21    className,
  22    ...props
  23  }: Props) => {
  24    const content = (
  25      <>
  26        <Icon />
  27        <span className="hidden md:inline">{text}</span>
  28      </>
  29    );
  30  
  31    return (
  32      <Button
  33        {...props}
  34        variant={variant}
  35        asChild={asChild}
  36        className={cn(
  37          className,
  38          "max-md:size-9" /* apply size="icon" only for mobile */
  39        )}
  40      >
  41        {asChild
  42          ? React.cloneElement(children as React.ReactElement, {}, content)
  43          : content}
  44      </Button>
  45    );
  46  };
  47  
  48  export default ResponsiveButton;
  49