feat: extract radio into common component

Author: wendyyuchensun

src/components/core/radio-group.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+
+const RadioGroup = ({ name, label, options, value, onChange }) => {
+  return (
+    <div className="flex flex-col gap-2">
+      {label && <span className="text-text-primary text-base">{label}</span>}
+      <div className="flex items-center">
+        {options.map((option) => (
+          <div key={option.value} className="flex flex-1 items-center">
+            <label
+              className={cn(
+                'flex items-center gap-3 px-1.5 py-1 rounded-lg',
+                'focus-within:outline focus-within:outline-2 focus-within:outline-primary',
+                option.disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+              )}
+            >
+              <input
+                type="radio"
+                name={name}
+                checked={value === option.value}
+                onChange={() => onChange(option.value)}
+                disabled={option.disabled}
+                className={cn(
+                  'appearance-none w-5 h-5 shrink-0 rounded-full border-2',
+                  'checked:shadow-[inset_0_0_0_3px_white] focus:outline-none',
+                  option.disabled
+                    ? 'border-gray-200 checked:bg-gray-200 checked:border-gray-200 cursor-not-allowed'
+                    : 'border-gray-400 checked:border-primary checked:bg-primary cursor-pointer'
+                )}
+              />
+              <span
+                className={cn('text-base', option.disabled ? 'text-gray-400' : 'text-text-primary')}
+              >
+                {option.label}
+              </span>
+            </label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+RadioGroup.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      disabled: PropTypes.bool,
+    })
+  ).isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default RadioGroup;

src/components/core/text-input.js

@@ -49,7 +49,11 @@ const TextInput = React.forwardRef(
           )}
           {...props}
         />
-        {error && <span id={`${id}-error`} role="alert" className="text-sm text-error leading-[1.4]">{error}</span>}
+        {error && (
+          <span id={`${id}-error`} role="alert" className="text-sm text-error leading-[1.4]">
+            {error}
+          </span>
+        )}
       </div>
     );
   }

src/components/link-input-modal.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useTranslation } from '@/lib/i18n';
 import BasicModal from '@/components/core/modal/basic-modal';
 import TextInput from '@/components/core/text-input';
+import RadioGroup from '@/components/core/radio-group';
 
 const LinkInputModal = ({ isOpen, onClose, onConfirm }) => {
   const [display, setDisplay] = useState('');
@@ -85,31 +86,16 @@ const LinkInputModal = ({ isOpen, onClose, onConfirm }) => {
           error={urlError}
           required
         />
-        <div className="flex flex-col gap-2">
-          <span className="text-text-primary text-base">{t('openMethod')}</span>
-          <div className="flex items-center">
-            <label className="flex flex-1 items-center gap-3 py-1 cursor-pointer">
-              <input
-                type="radio"
-                name="link-open-method"
-                checked={openInNewTab}
-                onChange={() => setOpenInNewTab(true)}
-                className="accent-primary w-5 h-5 shrink-0"
-              />
-              <span className="text-base text-text-primary">{t('newTab')}</span>
-            </label>
-            <label className="flex flex-1 items-center gap-3 px-2 py-1 cursor-pointer">
-              <input
-                type="radio"
-                name="link-open-method"
-                checked={!openInNewTab}
-                onChange={() => setOpenInNewTab(false)}
-                className="accent-primary w-5 h-5 shrink-0"
-              />
-              <span className="text-base text-text-primary">{t('currentTab')}</span>
-            </label>
-          </div>
-        </div>
+        <RadioGroup
+          name="link-open-method"
+          label={t('openMethod')}
+          options={[
+            { value: 'new-tab', label: t('newTab') },
+            { value: 'current-tab', label: t('currentTab') },
+          ]}
+          value={openInNewTab ? 'new-tab' : 'current-tab'}
+          onChange={(val) => setOpenInNewTab(val === 'new-tab')}
+        />
       </div>
     </BasicModal>
   );