feat: switch button initial test
This commit is contained in:
16
src/stories/components/ToggleSwitch.stories.tsx
Normal file
16
src/stories/components/ToggleSwitch.stories.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import type { Meta, StoryObj } from '@storybook/react';
|
||||||
|
import SwitchButton from 'src/views/components/common/SwitchButton';
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'Components/Common/SwitchButton',
|
||||||
|
component: SwitchButton,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
parameters: {
|
||||||
|
layout: 'centered',
|
||||||
|
},
|
||||||
|
} satisfies Meta<typeof SwitchButton>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Default: Story = {};
|
||||||
28
src/views/components/common/SwitchButton.tsx
Normal file
28
src/views/components/common/SwitchButton.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Switch } from '@headlessui/react';
|
||||||
|
|
||||||
|
interface ToggleSwitchProps {
|
||||||
|
label: string;
|
||||||
|
isChecked: boolean;
|
||||||
|
onChange: (checked: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SwitchButton: React.FC = () => {
|
||||||
|
const [enabled, setEnabled] = useState(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Switch
|
||||||
|
checked={enabled}
|
||||||
|
onChange={setEnabled}
|
||||||
|
className={`${enabled ? 'bg-[#579D42]' : 'bg-gray-400'}
|
||||||
|
relative inline-flex items-center h-8 w-12 rounded-full transition-colors ease-in-out duration-200`}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`${enabled ? 'translate-x-6' : 'translate-x-1'}
|
||||||
|
inline-block w-6 h-6 transform bg-white rounded-full transition-transform ease-in-out duration-200`}
|
||||||
|
/>
|
||||||
|
</Switch>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SwitchButton;
|
||||||
Reference in New Issue
Block a user