feat: finish my pages overview page according to wireframe

components/TempDesignSystem/Divider/divider.module.css

@@ -0,0 +1,9 @@
+.divider {
+  border-bottom-color: var(--some-grey-color, #111);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+
+.dotted {
+  border-bottom-style: dotted;
+}

components/TempDesignSystem/Divider/divider.ts

@@ -0,0 +1,7 @@
+import { dividerVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface DividerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof dividerVariants> {}

components/TempDesignSystem/Divider/index.tsx

@@ -0,0 +1,7 @@
+import { dividerVariants } from "./variants"
+
+import type { DividerProps } from "./divider"
+
+export default function Divider({ variant }: DividerProps) {
+  return <div className={dividerVariants({ variant })} />
+}

components/TempDesignSystem/Divider/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./divider.module.css"
+
+export const dividerVariants = cva(styles.divider, {
+  variants: {
+    variant: {
+      default: styles.default,
+      dotted: styles.dotted,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})