feat: switch button initial test

This commit is contained in:
2024-09-04 12:25:16 -05:00
parent 0e70bbd52f
commit 4397dfb1c5
2 changed files with 44 additions and 0 deletions

View 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 = {};

View 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;