ResponsiveExternalLinkButton.tsx raw

   1  import { VariantProps } from "class-variance-authority";
   2  import * as React from "react";
   3  import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
   4  import { buttonVariants } from "./ui/buttonVariants";
   5  
   6  type Props = {
   7    icon: React.ComponentType;
   8    text: string;
   9    to: string;
  10  } & React.ComponentProps<"button"> &
  11    VariantProps<typeof buttonVariants> & {
  12      asChild?: boolean;
  13    };
  14  
  15  const ResponsiveExternalLinkButton = ({
  16    icon: Icon,
  17    text,
  18    variant,
  19    ...props
  20  }: Props) => {
  21    return (
  22      <>
  23        <ExternalLinkButton
  24          {...props}
  25          className="hidden md:inline-flex"
  26          variant={variant}
  27        >
  28          <Icon />
  29          {text}
  30        </ExternalLinkButton>
  31        <ExternalLinkButton
  32          {...props}
  33          size="icon"
  34          className="md:hidden"
  35          variant={variant}
  36        >
  37          <Icon />
  38        </ExternalLinkButton>
  39      </>
  40    );
  41  };
  42  
  43  export default ResponsiveExternalLinkButton;
  44