diff --git a/src/Chip/app.tsx b/src/Chip/app.tsx new file mode 100644 index 0000000..f993b11 --- /dev/null +++ b/src/Chip/app.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import Chip from './Chip'; + +const App: React.FC = () => { + const handleDelete = () => { + // Handle chip deletion logic + }; + + return ( +
+ + +
+ ); +}; + +export default App; + + +/* + The first chip has a label "Tag 1" and is associated with the handleDelete function. The second chip has a label "Tag 2" and doesn't have a delete functionality. +*/ \ No newline at end of file diff --git a/src/Chip/chip.stories.tsx b/src/Chip/chip.stories.tsx new file mode 100644 index 0000000..5c4a054 --- /dev/null +++ b/src/Chip/chip.stories.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Story, Meta } from '@storybook/react'; +import Chip, { ChipProps } from './Chip'; + +export default { + title: 'Components/Chip', + component: Chip, +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + label: 'Tag 1', +}; + +export const WithDeleteButton = Template.bind({}); +WithDeleteButton.args = { + label: 'Tag 2', + onDelete: () => { + // Handle chip deletion logic + }, +}; diff --git a/src/Chip/chip.tsx b/src/Chip/chip.tsx new file mode 100644 index 0000000..d45e6bb --- /dev/null +++ b/src/Chip/chip.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import './Chip.css'; + +interface ChipProps { + label: string; + onDelete?: () => void; +} + +const Chip: React.FC = ({ label, onDelete }) => { + return ( +
+ {label} + {onDelete && ( + + )} +
+ ); +}; + +export default Chip; + +/* +label: Represents the text content of the chip. +onDelete (optional): Callback function triggered when the delete button is clicked. +*/