add RadioButton

src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,10 @@
+import { RadioButton } from './RadioButton';
+
+export default {
+ title: 'Components/Radio Button',
+ component: RadioButton,
+};
+
+export const _RadioButton = {
+ render: () => <RadioButton />,
+};

src/components/RadioButton/RadioButton.test.tsx

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { RadioButton } from './RadioButton';
+
+describe('Components | Buttons | Account Selector', () => {
+ test('it should render', () => {
+ render(<RadioButton />);
+
+ let radioButton = screen.getByTestId('radio-button');
+
+ expect(radioButton).toBeInTheDocument();
+ });
+});

src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,32 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+export type RadioButtonProps = ComponentPropsWithoutRef<'div'>;
+
+export function RadioButton(props: RadioButtonProps) {
+ let { ...rest } = props;
+
+ return (
+ <div data-testid="radio-button">
+ <div className="inline-flex items-center">
+ <label className="relative flex cursor-pointer items-center rounded-full p-3">
+ <input
+ type="radio"
+ className={`peer relative h-5 w-5
+ cursor-pointer appearance-none rounded-full
+ border-2 border-gray-400 checked:border-green-500`}
+ {...rest}
+ />
+ <div
+ className={`pointer-events-none absolute top-2/4 left-2/4
+ -translate-y-2/4 -translate-x-2/4 bg-green-500
+ w-2.5 h-2.5 rounded-full opacity-0
+ transition-opacity peer-checked:opacity-100`}
+ ></div>
+ </label>
+ </div>
+ </div>
+ );
+}

src/components/RadioButton/index.ts

@@ -0,0 +1 @@
+export * from './RadioButton';

src/components/index.ts

@@ -11,3 +11,4 @@ export * from './Icons';
 export * from './Toggle';
 export * from './Balance';
 export * from './ThemeMode';
+export * from './RadioButton';