Add risk forms

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Atoms/Table/Table.stories.tsx

@@ -0,0 +1,12 @@
+import { Table } from "./Table";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/Table",
+    component: Table,
+    argTypes: {},
+} satisfies Meta<typeof Table>;
+
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {};

packages/ui/src/Atoms/Table/Table.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, type PropsWithChildren } from "react";
+import { Card } from "../Card/Card";
+import { Link } from "react-router";
+import clsx from "clsx";
+
+export function Table({ children }: PropsWithChildren) {
+    return (
+        <Card className="relative w-full overflow-auto">
+            <table className="w-full text-left">{children}</table>
+        </Card>
+    );
+}
+
+export function Thead({ children }: PropsWithChildren) {
+    return (
+        <thead className="text-xs text-txt-tertiary font-semibold">
+            {children}
+        </thead>
+    );
+}
+
+export function Th({ children }: PropsWithChildren) {
+    return <th className="first:pl-6 last:pr-6 py-3">{children}</th>;
+}
+
+const TrContext = createContext({} as { to?: string });
+
+export function Tr({ children, to }: PropsWithChildren<{ to?: string }>) {
+    return (
+        <TrContext value={{ to }}>
+            <tr
+                className={clsx(
+                    "border-border-low border",
+                    to && "hover:bg-subtle",
+                )}
+            >
+                {children}
+            </tr>
+        </TrContext>
+    );
+}
+
+export function Tbody({ children }: PropsWithChildren) {
+    return (
+        <tbody className="text-sm text-txt-primary bg-tertiary">
+            {children}
+        </tbody>
+    );
+}
+
+export function Td({
+    children,
+    noLink,
+}: PropsWithChildren<{ noLink?: boolean }>) {
+    const { to } = useContext(TrContext);
+    if (!to || noLink) {
+        return <td className="first:pl-6 last:pr-6 py-3">{children}</td>;
+    }
+    return (
+        <td className="first:*:pl-6 *:block last:*:pr-6 py-3">
+            <Link to={to}>{children}</Link>
+        </td>
+    );
+}