feat(WEB-128): desktop and mobile initial wireframe implemented

components/MyPages/Title/index.tsx

@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+import type { HeadingProps } from "@/types/components/myPages/title"
+
+const config = {
+  variants: {
+    text: {
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+  },
+} as const
+
+const headingStyles = cva(styles.heading, config)
+
+export default function Title({
+  as,
+  children,
+  level = "h1",
+  uppercase = false,
+}: HeadingProps) {
+  const Hx = level
+  const className = headingStyles({
+    text: uppercase ? "uppercase" : undefined,
+    type: as ?? level,
+  })
+  return <Hx className={className}>{children}</Hx>
+}