Skip to content

Commit

Permalink
feat:checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
li3pm committed May 19, 2024
1 parent bdd766b commit 9355305
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 0 deletions.
37 changes: 37 additions & 0 deletions shared/components/button/checkBoxButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React, { useState } from "react";

export interface CheckBoxButtonProps {
name: string;
onClick: () => void;
}

export const CheckBoxButton = (
props: React.InputHTMLAttributes<HTMLButtonElement> & CheckBoxButtonProps
) => {
const { name, onClick } = props;
const [checked, setChecked] = useState(false);

const handleClick = () => {
setChecked(!checked);
onClick();
};

return (
<div className="flex items-center pb-0.5 ">
<button
className="flex items-center justify-center w-3.5 h-3.5 rounded border-2 border-c_accent focus:outline-none"
onClick={handleClick}
>
<span
className={`block w-2 h-2 rounded ${
checked ? "bg-c_accent" : "bg-transparent"
} transform transition-transform duration-200 ease-in-out`}
>
{checked && (
<span className="absolute block w-full h-full rounded-sm bg-c_accent"></span>
)}
</span>
</button>
</div>
);
};
34 changes: 34 additions & 0 deletions shared/stories/checkBoxButton.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {
CheckBoxButton,
CheckBoxButtonProps,
} from "../components/button/checkBoxButton";
import React from "react";
import { StoryFn as Story, Meta } from "@storybook/react";

export default {
title: "Components/CheckBoxButton",
component: CheckBoxButton,
parameters: {
layout: "centered",
},
} as Meta;

const Template: Story<CheckBoxButtonProps> = (args) => (
<CheckBoxButton {...args} />
);

export const Default = Template.bind({});
Default.args = {
name: "checkbox",
};
const Templatee: Story<CheckBoxButtonProps> = (args) => (
<div>
<CheckBoxButton {...args} />
<CheckBoxButton {...args} />
</div>
);

export const Pair = Templatee.bind({});
Pair.args = {
name: "checkbox",
};

0 comments on commit 9355305

Please sign in to comment.