feat(app): add bookmark and profile pages

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",

src/app/dashboard/bookmarks/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const BookmarkPage = () => {
+  return (
+    <main>
+      <h1>Bookmark Page</h1>
+    </main>
+  )
+}
+
+export default BookmarkPage

src/app/dashboard/my-profile/page.tsx

@@ -0,0 +1,31 @@
+
+import React from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Separator } from "@/components/ui/separator"
+
+const MyProfilePage = () => {
+    return (
+        <main className='pt-6'>
+            <section className='flex flex-col sm:flex-row space-x-9 pb-7 mx-4'>
+                <div>
+                    <Avatar className='h-30 w-30 sm:h-36 sm:w-36 md:h-52 md:w-52 max-h-[200px] max-w-[200px] mx-auto '>
+                        <AvatarImage src="https://github.com/shadcn.png" />
+                        <AvatarFallback>CN</AvatarFallback>
+                    </Avatar>
+                </div>
+                <div className='max-w-xl'>
+                    <h2 className='font-semibold text-xl'>Shad Doe</h2>
+                    <p>+234 123 456 7890</p>
+                    <p>[email protected]</p>
+
+                    <p className='mt-4'>I am a software engineer with a passion for building web applications. I have experience working with JavaScript, React, and Node.js. I am currently learning TypeScript and GraphQL.</p>
+                </div>
+            </section>
+            <Separator className=''/>
+
+            <section></section>
+        </main>
+    )
+}
+
+export default MyProfilePage

src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }