feat: button custom function prop

This commit is contained in:
2024-09-04 13:05:31 -05:00
parent 7acc91f4ee
commit 703a0fa596
2 changed files with 12 additions and 5 deletions

View File

@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react';
import SwitchButton from '@views/components/common/SwitchButton';
import SwitchButton from 'src/views/components/common/SwitchButton';
const meta = {
title: 'Components/Common/SwitchButton',

View File

@@ -1,22 +1,29 @@
import { Switch } from '@headlessui/react';
import React, { useEffect,useState } from 'react';
import React, { useEffect, useState } from 'react';
type ToggleSwitchProps = {
isChecked?: boolean;
// onChange?: (checked: boolean) => void;
onChange?: (checked: boolean) => void;
};
const SwitchButton: React.FC<ToggleSwitchProps> = ({ isChecked = true }) => {
const SwitchButton: React.FC<ToggleSwitchProps> = ({ isChecked = true, onChange }) => {
const [enabled, setEnabled] = useState(isChecked);
useEffect(() => {
setEnabled(isChecked);
}, [isChecked]);
const handleChange = (checked: boolean) => {
setEnabled(checked);
if (onChange) {
onChange;
}
};
return (
<Switch
checked={enabled}
onChange={setEnabled}
onChange={handleChange}
className={`${enabled ? 'bg-[#579D42]' : 'bg-gray-400'}
relative inline-flex items-center h-8 w-13 rounded-full transition-colors ease-in-out duration-200`}
>