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,28 @@
+import React from 'react';
+import vector from '../../assets/icons/vector.svg';
+import clsx from 'clsx';
+
+interface TagProps {
+  label: string;
+  isSelected?: boolean;
+}
+
+export const Tag = ({ label, isSelected }: TagProps) => {
+    const [selected, setSelected] = React.useState<boolean>(isSelected || false);
+
+  const commonClasses = 'rounded-[2.5rem] font-gellix font-semibold text-[1.25rem] leading-5 px-[1.875rem] py-[0.938rem] border ';
+
+  const handleClick = ()=> {
+    setSelected(!selected);
+  }
+
+  return (
+    <div className={clsx(commonClasses,{
+        'flex bg-midnight-blue text-white': selected === true,
+        'text-midnight-blue border-midnight-blue hover:bg-midnight-blue hover:text-white': selected === false
+    })} onClick={handleClick}>
+      {label}
+      {selected && <img className='pl-[1.125rem]' src={vector} alt="logo" />}
+    </div>
+  );
+};