feat: add FilterButton Component

closes #69

dashboard/src/components/FilterButton/FilterButton.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import FilterButton from './FilterButton';
+
+const meta = {
+  title: 'FilterButton',
+  component: FilterButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof FilterButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: 'linux-5.15.y',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    text: 'linux-5.15.y',
+    variant: 'primary',
+  },
+};

dashboard/src/components/FilterButton/FilterButton.tsx

@@ -0,0 +1,42 @@
+import { IoClose } from 'react-icons/io5';
+import classNames from 'classnames';
+
+import { Button } from '../ui/button';
+
+export interface IFilterButton
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  variant?: 'primary' | 'secondary';
+}
+
+const baseContainerClassNames =
+  'h-10 pl-4 pr-2 rounded-md text-sm flex items-center';
+const baseButtonClassNames = 'ml-2 p-0 h-6 w-6 bg-darkGray hover:bg-yellow';
+const primaryClassNames = 'bg-lightBlue text-white';
+const secondaryClassNames = 'bg-darkGray text-black';
+
+const FilterButton = ({
+  text,
+  variant = 'secondary',
+  ...props
+}: IFilterButton): JSX.Element => {
+  const containerClassNames = classNames(
+    baseContainerClassNames,
+    variant === 'primary' ? primaryClassNames : secondaryClassNames,
+  );
+  const buttonClassNames = classNames(
+    baseButtonClassNames,
+    variant === 'primary' ? primaryClassNames : secondaryClassNames,
+  );
+
+  return (
+    <div className={containerClassNames}>
+      {text}
+      <Button className={buttonClassNames} {...props}>
+        <IoClose className="size-6" />
+      </Button>
+    </div>
+  );
+};
+
+export default FilterButton;