feat(ui): implemented basic table component

frontend/src/components/v2/Table/Table.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Table, TableContainer, TBody, Td, Th, THead, Tr } from './Table';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <TableContainer>
+      <Table {...args}>
+        <THead>
+          <Tr>
+            <Th>Head#1</Th>
+            <Th>Head#2</Th>
+            <Th>Head#3</Th>
+          </Tr>
+        </THead>
+        <TBody>
+          <Tr>
+            <Td>Row#1</Td>
+            <Td>Row#2</Td>
+            <Td>Row#3</Td>
+          </Tr>
+          <Tr>
+            <Td>Row#1</Td>
+            <Td>Row#2</Td>
+            <Td>Row#3</Td>
+          </Tr>
+        </TBody>
+      </Table>
+    </TableContainer>
+  )
+};

frontend/src/components/v2/Table/Table.tsx

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export type TableContainerProps = {
+  children: ReactNode;
+  isRounded?: boolean;
+  className?: string;
+};
+
+export const TableContainer = ({
+  children,
+  className,
+  isRounded = true
+}: TableContainerProps): JSX.Element => (
+  <div
+    className={twMerge(
+      'overflow-x-auto shadow-md relative border border-solid border-mineshaft-700',
+      isRounded && 'rounded-md',
+      className
+    )}
+  >
+    {children}
+  </div>
+);
+
+// main parent table
+export type TableProps = {
+  className?: string;
+  children: ReactNode;
+};
+
+export const Table = ({ children, className }: TableProps): JSX.Element => (
+  <table
+    className={twMerge(
+      'bg-bunker-800 p-2 roun  text-gray-300 w-full text-sm text-left rounded-md',
+      className
+    )}
+  >
+    {children}
+  </table>
+);
+
+// table head
+export type THeadProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const THead = ({ children, className }: THeadProps): JSX.Element => (
+  <thead className={twMerge('text-xs bg-bunker text-bunker-300 uppercase', className)}>
+    {children}
+  </thead>
+);
+
+// table rows
+export type TrProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const Tr = ({ children, className }: TrProps): JSX.Element => (
+  <tr className={twMerge('border border-solid border-mineshaft-700', className)}>{children}</tr>
+);
+
+// table head columns
+export type ThProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const Th = ({ children, className }: ThProps): JSX.Element => (
+  <th className={twMerge('px-6 py-3 font-medium', className)}>{children}</th>
+);
+
+// table body
+export type TBodyProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const TBody = ({ children, className }: TBodyProps): JSX.Element => (
+  <tbody className={twMerge(className)}>{children}</tbody>
+);
+
+// table body columns
+export type TdProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const Td = ({ children, className }: TdProps): JSX.Element => (
+  <td className={twMerge('text-left px-6 py-3', className)}>{children}</td>
+);

frontend/src/components/v2/Table/index.tsx

@@ -0,0 +1,10 @@
+export type {
+  TableContainerProps,
+  TableProps,
+  TBodyProps,
+  TdProps,
+  THeadProps,
+  ThProps,
+  TrProps
+} from './Table';
+export { Table, TableContainer, TBody, Td, Th, THead, Tr } from './Table';

frontend/src/components/v2/index.tsx

@@ -10,4 +10,5 @@ export * from './Modal';
 export * from './Select';
 export * from './Spinner';
 export * from './Switch';
+export * from './Table';
 export * from './TextArea';