NA - Added tag component

apps/frontend/src/components/Tag/Tag.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tag } from './Tag';
+
+const meta = {
+  title: 'Tag',
+  component: Tag,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+export const Default: Story = {
+  args: {
+    label: 'intersteller collaboration',
+    isSelected: false
+  },
+};
+
+export const Selected: Story = {
+    args: {
+      label: 'scientific research',
+      isSelected: true
+    },
+  };

apps/frontend/src/components/Tag/Tag.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import vector from '../../assets/icons/vector.svg';
+
+interface TagProps {
+  label: string;
+  isSelected?: boolean;
+}
+
+export const Tag = ({ label, isSelected }: TagProps) => {
+    const [selected, setSelected] = React.useState<boolean>(isSelected || false);
+
+  const classes = 'rounded-[40px] font-gellix text-[20px] leading-5 p-[30px] '.concat(
+    selected === true ? 'flex bg-midnight-blue text-white' : 'text-midnight-blue border border-midnight-blue hover:bg-midnight-blue hover:text-white',
+  );
+
+  const handleClick = ()=> {
+    setSelected(!selected);
+  }
+
+  return (
+    <div className={classes} onClick={handleClick}>
+      {label}
+      {selected && <img className='pl-[18px]' src={vector} alt="logo" />}
+    </div>
+  );
+};