Add card component

src/components/Card/Card.stories.tsx

@@ -0,0 +1,35 @@
+import { Toast, toast } from '../Toast';
+import { Card } from './Card';
+
+export default { title: 'Components/Card' };
+
+export const _Card = {
+  render: () => (
+    <>
+      <div className="flex flex-col gap-2">
+        <Card>
+          <div>I am a card component</div>
+        </Card>
+        <Card
+          bgColor={'bg-blue-800'}
+          enableBorder={true}
+          customClass="rounded-2xl border-pink-300 w-96 h-96 flex flex-col justify-center items-center"
+        >
+          <div>I am a custom card component</div>
+        </Card>
+
+        <Card enableBorder={true}>
+          <div>I am a card component with a border</div>
+        </Card>
+
+        <Card
+          onClick={() => toast.success('hazzzzzza')}
+          customClass="hover:cursor-pointer"
+        >
+          <div>Click me!</div>
+        </Card>
+        <Toast />
+      </div>
+    </>
+  ),
+};

src/components/Card/Card.test.tsx

@@ -0,0 +1,17 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Card } from './Card';
+
+describe('Components | Card', () => {
+  test('it should render', () => {
+    render(
+      <Card>
+        <div>I am a card component</div>
+      </Card>,
+    );
+
+    let description = screen.getByTestId('card');
+
+    expect(description).toBeInTheDocument();
+  });
+});

src/components/Card/Card.tsx

@@ -0,0 +1,30 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+
+import { ComponentPropsWithoutRef } from 'react';
+
+interface CardProps extends ComponentPropsWithoutRef<'div'> {
+  children: React.ReactNode;
+  enableBorder?: boolean;
+  bgColor?: string;
+  customClass?: string;
+}
+
+export function Card({
+  bgColor = 'bg-secondary',
+  enableBorder = false,
+  customClass = '',
+  children,
+  ...rest
+}: CardProps) {
+  const borderClass = enableBorder ? 'border border-tertiary' : 'border-none';
+  return (
+    <div
+      data-testid="card"
+      className={`${bgColor} ${borderClass} w-full h-fit text-f-primary rounded-lg p-4 ${customClass}`}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}