quantifier

src/components/radio-group/index.tsx

@@ -1,37 +0,0 @@
-import React from "react"
-import { Radio } from "@geist-ui/react"
-type Option = {
-  value: string
-  label: string
-}
-type Prop = {
-  value: string
-  options: Option[]
-  onChange: (value: string) => void
-}
-const RadioGroup: React.FC<Prop> = ({ value, options, onChange }) => {
-  return (
-    <>
-      <Radio.Group
-        value={value}
-        useRow
-        size="mini"
-        onChange={(value: string | number) => onChange(value as string)}
-      >
-        {options.map(({ value, label }) => (
-          <Radio value={value} key={value}>
-            {label}
-          </Radio>
-        ))}
-      </Radio.Group>
-      <style jsx global>{`
-        .radio-group .name {
-          font-weight: normal;
-          font-size: 14px;
-        }
-      `}</style>
-    </>
-  )
-}
-
-export default RadioGroup

src/modules/editor/features/quantifier/index.tsx

@@ -1,21 +1,29 @@
 import React, { useState } from "react"
-import { Checkbox } from "@geist-ui/react"
+import { Checkbox, Select } from "@geist-ui/react"
 import Cell from "@/components/cell"
-import RadioGroup from "@/components/radio-group"
 import { quantifierOptions } from "./helper"
 const Quantifier: React.FC<{}> = () => {
   const [times, setTimes] = useState("non")
   return (
     <>
-      <Cell label="Quantifier times">
-        <RadioGroup
-          options={quantifierOptions}
-          value={times}
-          onChange={setTimes}
-        />
-      </Cell>
-      <Cell label="Quantifier greedy">
-        <Checkbox initialChecked={true}>Greedy</Checkbox>
+      <Cell label="Quantifier">
+        <Cell.Item label="times">
+          <Select
+            value={times}
+            onChange={(value) => setTimes(value as string)}
+            getPopupContainer={() => document.getElementById("editor-content")}
+            disableMatchWidth
+          >
+            {quantifierOptions.map(({ value, label }) => (
+              <Select.Option value={value} key={value}>
+                <span>{label}</span>
+              </Select.Option>
+            ))}
+          </Select>
+        </Cell.Item>
+        <Cell.Item label="greedy">
+          <Checkbox initialChecked={true}>Greedy</Checkbox>
+        </Cell.Item>
       </Cell>
     </>
   )