Initial commit

src/components/ProRatioGroups/ProRatioGroups.module.css

@@ -0,0 +1,19 @@
+.proRatioGroups :global(.ant-radio-wrapper:last-child) {
+  width: 100% !important;
+}
+
+.proRatioGroups :global(.ant-radio-label) {
+  width: 100% !important;
+}
+
+/* radio.module.css */
+.proRatioGroups :global(.ant-radio-inner) {
+  width: 24px !important;
+  height: 24px !important;
+  border-radius: 30px !important;
+}
+
+.proRatioGroups :global(.ant-radio) {
+  width: 24px !important;
+  height: 24px !important;
+}

src/components/ProRatioGroups/ProRatioGroups.tsx

@@ -0,0 +1,56 @@
+import { Radio, Space } from "antd";
+import ProText from "components/ProText";
+import styles from "./ProRatioGroups.module.css";
+
+interface ProRatioGroupsProps {
+  options: { label: string; value: string; price?: string }[];
+  onRatioClick?: (value: string) => void;
+  value?: string;
+}
+
+const ProRatioGroups = ({
+  options,
+  onRatioClick,
+  value,
+  ...props
+}: ProRatioGroupsProps) => {
+  return (
+    <div className={styles.proRatioGroups}>
+      <Radio.Group
+        style={{
+          width: "100%",
+        }}
+        value={value}
+        onChange={(e) => onRatioClick?.(e.target.value)}
+        {...props}
+      >
+        <Space direction="vertical" style={{ width: "100%" }}>
+          {options.map((option) => (
+            <Radio key={option.value} value={option.value}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  width: "100%",
+                  padding: "8px 0",
+                }}
+              >
+                <ProText
+                  style={{
+                    fontSize: "1rem",
+                  }}
+                >
+                  {option.label}
+                </ProText>
+                <ProText style={{ fontSize: "1rem" }}>{option?.price}</ProText>
+              </div>
+            </Radio>
+          ))}
+        </Space>
+      </Radio.Group>
+    </div>
+  );
+};
+
+export default ProRatioGroups;