implemented basic user profile page

app/profile/page.tsx

@@ -1,26 +1,83 @@
 "use client"
 
 import React from 'react';
-// import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+
 
 // WORKING ON PROFILE FRONT END
 export default function Profile() {
-    // const router = useRouter();
-    return (
-    <div className="h-[100vh]">
-      <div className="h-[58.8%]">
-      <div className="grid grid-cols-2 gap-4 place-content-center h-48 ...">
-            <div>01</div>
-            <div>02</div>
-            <div>03</div>
-            <div>04</div>
-        </div>
-
+    const router = useRouter();
+  return (
+    <div className="bg-blue-200 h-screen">
+    <div>
+      <div className="flex flex-col justify-center items-center">
+        <div className="flex-1">
+        <div className="h-64 flex justify-center items-center mx-auto">
+            <Avatar>
+              <AvatarImage src="https://png.pngtree.com/png-clipart/20201029/ourmid/pngtree-circle-clipart-blue-circle-png-image_2381949.jpg" alt="@shadcn"/>
+              <AvatarFallback>Parent-Avatar</AvatarFallback>
+            </Avatar>
+            </div>
         </div>
+      </div>
+    </div>
+
+    <div className="flex justify-center mx-auto mb-20" >
+      <p>[User's] Information</p>
+    </div>
+
+    <div>
+      <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Email</TableHead>
+              <TableHead>[email protected]</TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            <TableRow>
+              <TableCell className="font-medium">Username</TableCell>
+              <TableCell>123AllyP</TableCell>
+            </TableRow>
+          </TableBody>
+
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Password</TableHead>
+              <TableHead>********</TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            <TableRow>
+              <TableCell className="font-medium">Children</TableCell>
+              <TableCell>Name1, Name2</TableCell>
+            </TableRow>
+          </TableBody>
+
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Books</TableHead>
+              <TableHead>title1, title2</TableHead>
+            </TableRow>
+          </TableHeader>
+      </Table>
+    </div>
+
     </div>
-
-      )
+  )
 }
 
 

components/ui/avatar.tsx

@@ -12,7 +12,7 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      "relative flex h-40 w-40 shrink-0 overflow-hidden rounded-full",
       className
     )}
     {...props}

components/ui/table.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative max-w-screen-md mx-auto overflow-auto">
+      <table
+        ref={ref}
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+)
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  )
+)
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+)
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot
+      ref={ref}
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+)
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption
+      ref={ref}
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+)
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}