chore: depoly model ux

src/components/radio-buttons/index.less

@@ -0,0 +1,22 @@
+.radio-button-wrap {
+  .item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--font-size-base);
+    padding: 2px;
+    border-radius: var(--border-radius-base);
+    height: 40px;
+    width: 40px;
+    border: 1px solid var(--ant-color-border);
+    cursor: pointer;
+
+    &.active {
+      background-color: var(--ant-color-fill-secondary);
+    }
+
+    &:hover {
+      background-color: var(--ant-color-fill-secondary);
+    }
+  }
+}

src/components/radio-buttons/index.tsx

@@ -0,0 +1,29 @@
+import { Space } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import './index.less';
+
+interface RadioButtonsProps {
+  options: { value: any; label: React.ReactNode }[];
+  value: string;
+  gap?: number;
+  onChange: (value: string) => void;
+}
+const RadioButtons: React.FC<RadioButtonsProps> = (props) => {
+  const { options, value, onChange, gap = 12 } = props;
+  return (
+    <Space className="radio-button-wrap" size={gap}>
+      {options.map((option) => (
+        <span
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          className={classNames('item', { active: value === option.value })}
+        >
+          {option.label}
+        </span>
+      ))}
+    </Space>
+  );
+};
+
+export default RadioButtons;