feat: finish my pages overview page according to wireframe

components/TempDesignSystem/Button/button.module.css

@@ -0,0 +1,26 @@
+.btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+
+.default {
+  align-items: center;
+  background-color: var(--some-white-color, #fff);
+  border-radius: 4rem;
+  color: var(--some-grey-color, #111);
+  display: flex;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.8rem;
+  font-weight: 600;
+  gap: 1.6rem;
+  letter-spacing: 1%;
+  line-height: 2.2rem;
+  padding: 1.3rem 3rem;
+}
+
+.icon {
+  font-size: 1.8rem;
+}

components/TempDesignSystem/Button/button.ts

@@ -0,0 +1,9 @@
+import { buttonVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}

components/TempDesignSystem/Button/index.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { Slot } from "@radix-ui/react-slot"
+
+import { buttonVariants } from "./variants"
+
+import type { ButtonProps } from "./button"
+
+export default function Button({
+  asChild = false,
+  className,
+  variant,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button"
+  return <Comp className={buttonVariants({ className, variant })} {...props} />
+}

components/TempDesignSystem/Button/variants.ts

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