DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: button custom function prop

Browse Source
This commit is contained in:
Derek Chen
2024-09-04 13:05:31 -05:00
parent 7acc91f4ee
commit 703a0fa596
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/stories/components/ToggleSwitch.stories.tsx
View File

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

13
src/views/components/common/SwitchButton.tsx
View File

@@ -3,20 +3,27 @@ import React, { useEffect,useState } from 'react';
type ToggleSwitchProps = { type ToggleSwitchProps = {
isChecked?: boolean; 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); const [enabled, setEnabled] = useState(isChecked);
useEffect(() => { useEffect(() => {
setEnabled(isChecked); setEnabled(isChecked);
}, [isChecked]); }, [isChecked]);
const handleChange = (checked: boolean) => {
setEnabled(checked);
if (onChange) {
onChange;
}
};
return ( return (
<Switch <Switch
checked={enabled} checked={enabled}
onChange={setEnabled} onChange={handleChange}
className={`${enabled ? 'bg-[#579D42]' : 'bg-gray-400'} 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`} relative inline-flex items-center h-8 w-13 rounded-full transition-colors ease-in-out duration-200`}
> >