dub/packages/ui/src/card-selector.tsx at 1e907393ec1713d33a5aa9cd06809a64f0b5a80a · dubinc/dub · 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
"use client";

import { cn } from "@dub/utils";
import { ReactNode } from "react";
import { AnimatedSizeContainer } from "./animated-size-container";
import { CircleCheck } from "./icons";

export interface CardSelectorOption {
  key: string;
  label: string;
  description: string;
  icon?: ReactNode;
}

export interface CardSelectorProps {
  options: CardSelectorOption[];
  value?: string;
  onChange?: (value: string) => void;
  className?: string;
  gridCols?: "1" | "2" | "3";
  name?: string;
  disabled?: boolean;
  animated?: boolean;
}

export function CardSelector({
  options,
  value,
  onChange,
  className,
  gridCols = "2",
  name,
  disabled = false,
  animated = true,
}: CardSelectorProps) {
  const gridClass = {
    "1": "grid-cols-1",
    "2": "grid-cols-1 lg:grid-cols-2",
    "3": "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
  }[gridCols];

  const content = (
    <div className={cn("grid gap-3", gridClass)}>
      {options.map(({ key, label, description, icon }) => {
        const isSelected = value === key;

        return (
          <label
            key={key}
            className={cn(
              "relative flex w-full cursor-pointer items-start rounded-md border border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50",
              "transition-all duration-150",
              isSelected &&
                "border-black bg-neutral-50 text-neutral-900 ring-1 ring-black",
              disabled && "cursor-not-allowed opacity-50",
              className,
            )}
          >
            <input
              type="radio"
              name={name}
              value={key}
              className="hidden"
              checked={isSelected}
              disabled={disabled}
              onChange={(e) => {
                if (e.target.checked && onChange) {
                  onChange(key);
                }
              }}
            />

            {icon && <div className="flex-shrink-0 pt-0.5">{icon}</div>}

            <div className="flex grow flex-col p-3 pr-0">
              <span className="pr-1 text-sm font-semibold text-neutral-900">
                {label}
              </span>
              <span className="text-xs text-neutral-600">{description}</span>
            </div>

            <CircleCheck
              variant="fill"
              className={cn(
                "mr-1.5 mt-1.5 flex size-4 scale-75 items-center justify-center rounded-full opacity-0 transition-[transform,opacity] duration-150",
                isSelected && "scale-100 opacity-100",
              )}
            />
          </label>
        );
      })}
    </div>
  );

  if (!animated) {
    return content;
  }

  return (
    <div className="-m-1">
      <AnimatedSizeContainer
        height
        transition={{ ease: "easeInOut", duration: 0.2 }}
      >
        <div className="p-1">{content}</div>
      </AnimatedSizeContainer>
    </div>
  );
}