tracker-tracker/src/components/ui/ChevronToggle.tsx at patch-3 · bitglows/tracker-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// src/components/ui/ChevronToggle.tsx
import { clsx } from "clsx"

interface ChevronToggleProps {
  expanded: boolean
  variant?: "pivot" | "flip"
  className?: string
}

function ChevronToggle({ expanded, variant = "pivot", className }: ChevronToggleProps) {
  if (variant === "flip") {
    return (
      <span
        className={clsx(
          "inline-block transition-transform duration-150 ease-in-out text-tertiary text-sm shrink-0",
          expanded ? "rotate-0" : "rotate-180",
          className
        )}
      >
        ▾
      </span>
    )
  }

  return (
    <span
      className={clsx(
        "inline-block transition-transform duration-150 text-3xs",
        expanded ? "rotate-90" : "rotate-0",
        className
      )}
    >
      ▶
    </span>
  )
}

export type { ChevronToggleProps }
export { ChevronToggle }