website: Switch to likert style labelling

2026-07-11 00:30:06 +08:00 · 2023-01-21 15:43:52 +11:00
parent 274d03c5f0
commit 007773a3f5
19 changed files with 481 additions and 519 deletions
@@ -0,0 +1,38 @@
+import { Button, SimpleGrid } from "@chakra-ui/react";
+import { PropsWithChildren, ReactNode } from "react";
+
+export const LikertButtons = ({
+  isDisabled,
+  options,
+  value,
+  onChange,
+  "data-cy": dataCy,
+}: PropsWithChildren<{
+  isDisabled: boolean;
+  options: ReactNode[];
+  value: number;
+  onChange: (value: number) => void;
+  "data-cy"?: string;
+}>) => {
+  return (
+    <SimpleGrid aria-roledescription="radiogroup" columns={options.length} spacing={[1, 4]} data-cy={dataCy}>
+      {options.map((option, idx) => {
+        const indexValue = idx / (options.length - 1);
+        return (
+          <Button
+            aria-roledescription="radio"
+            aria-checked={indexValue === value}
+            key={idx}
+            onClick={() => {
+              onChange(indexValue === value ? null : indexValue);
+            }}
+            isDisabled={isDisabled}
+            isActive={indexValue === value}
+          >
+            {option}
+          </Button>
+        );
+      })}
+    </SimpleGrid>
+  );
+};