feat(console): multi card selector on cloud preview page (#3073)

packages/console/src/pages/CloudPreview/components/MultiCardSelector/index.module.scss

@@ -0,0 +1,29 @@
+@use '@/scss/underscore' as _;
+
+.selector {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: _.unit(4);
+}
+
+.option {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  min-height: 80px;
+  padding: _.unit(5);
+  font: var(--font-body-2);
+  cursor: pointer;
+  user-select: none;
+  background-color: var(--color-layer-1);
+  color: var(--color-text);
+
+  &.selected {
+    border-color: var(--color-primary);
+    color: var(--color-text-link);
+  }
+
+  &:hover {
+    background-color: var(--color-hover-variant);
+    color: var(--color-text-link);
+  }
+}

packages/console/src/pages/CloudPreview/components/MultiCardSelector/index.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+import { onKeyDownHandler } from '@/utilities/a11y';
+
+import * as styles from './index.module.scss';
+
+type Option = {
+  title: ReactNode;
+  value: string;
+};
+
+type Props = {
+  options: Option[];
+  value: string[];
+  onChange: (value: string[]) => void;
+};
+
+const MultiCardSelector = ({ options, value: selectedValues, onChange }: Props) => {
+  const onToggle = (value: string) => {
+    onChange(
+      selectedValues.includes(value)
+        ? selectedValues.filter((selected) => selected !== value)
+        : [...selectedValues, value]
+    );
+  };
+
+  return (
+    <div className={styles.selector}>
+      {options.map((option) => (
+        <div
+          key={option.value}
+          role="button"
+          tabIndex={0}
+          className={classNames(
+            styles.option,
+            selectedValues.includes(option.value) && styles.selected
+          )}
+          onClick={() => {
+            onToggle(option.value);
+          }}
+          onKeyDown={onKeyDownHandler(() => {
+            onToggle(option.value);
+          })}
+        >
+          {option.title}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default MultiCardSelector;