Added chip UI component

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 (
+    <div>
+      <Chip label="Tag 1" onDelete={handleDelete} />
+      <Chip label="Tag 2" />
+    </div>
+  );
+};
+
+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.
+*/

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<ChipProps> = (args) => <Chip {...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
+  },
+};

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<ChipProps> = ({ label, onDelete }) => {
+  return (
+    <div className="chip">
+      <span className="chip-label">{label}</span>
+      {onDelete && (
+        <button className="chip-delete" onClick={onDelete}>
+          &times;
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default Chip;
+
+/*
+label: Represents the text content of the chip.
+onDelete (optional): Callback function triggered when the delete button is clicked.
+*/