1import Link from 'next/link'
 2import clsx from 'clsx'
 3
 4function ArrowIcon(props) {
 5  return (
 6    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
 7      <path
 8        stroke="currentColor"
 9        strokeLinecap="round"
10        strokeLinejoin="round"
11        d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
12      />
13    </svg>
14  )
15}
16
17const variantStyles = {
18  primary:
19    'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-1 dark:ring-inset dark:ring-emerald-400/20 dark:hover:bg-emerald-400/10 dark:hover:text-emerald-300 dark:hover:ring-emerald-300',
20  secondary:
21    'rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300',
22  filled:
23    'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-500 dark:text-white dark:hover:bg-emerald-400',
24  outline:
25    'rounded-full py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white',
26  text: 'text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-500',
27}
28
29export function Button({
30  variant = 'primary',
31  className,
32  children,
33  arrow,
34  ...props
35}) {
36  let Component = props.href ? Link : 'button'
37
38  className = clsx(
39    'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition',
40    variantStyles[variant],
41    className
42  )
43
44  let arrowIcon = (
45    <ArrowIcon
46      className={clsx(
47        'mt-0.5 h-5 w-5',
48        variant === 'text' && 'relative top-px',
49        arrow === 'left' && '-ml-1 rotate-180',
50        arrow === 'right' && '-mr-1'
51      )}
52    />
53  )
54
55  return (
56    <Component className={className} {...props}>
57      {arrow === 'left' && arrowIcon}
58      {children}
59      {arrow === 'right' && arrowIcon}
60    </Component>
61  )
62}