profile page

app/api/users/[id]/posts/route.js

@@ -0,0 +1,15 @@
+import { connectToDatabase } from "@utils/database";
+import Prompt from "@models/prompt";
+
+export const GET = async (req, {params}) => {
+    try{
+        await connectToDatabase();;
+
+        const prompts = await Prompt.find({creator: params.id}).populate('creator');
+
+        return new Response(JSON.stringify(prompts), {status: 200});
+
+    }catch (error) {
+        return new Response(JSON.stringify({msg: 'Error fetching prompts'}), {status: 500});
+    }
+}

app/profile/page.jsx

@@ -0,0 +1,38 @@
+'use client'
+import {useState, useEffect} from 'react'
+import {useSession} from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+
+import Profile from '@components/Profile'
+
+const ProfilePage = () => {
+    const {data: session} = useSession();
+
+    const [posts, setPosts] = useState([]);
+
+    useEffect(() => {
+        const fetchPost = async () => {
+          const response = await fetch(`/api/users/${session?.user.id}/posts`);
+          const data = await response.json();
+          setPosts(data);
+        }
+        if(session?.user.id){
+            fetchPost();
+        };
+      }, []);
+
+    const handleEdit = () => {}
+
+    const handleDelete = async () => {}
+  return (
+    <Profile
+        name="My"
+        desc='Welcome to your profile page'
+        data={posts}
+        handeleEdit={handleEdit}
+        handleDelete={handleDelete}
+    />
+  )
+}
+
+export default ProfilePage

components/Profile.jsx

@@ -1,8 +1,25 @@
-import React from 'react'
+import PromptCard from './PromptCard'
 
-const Profile = () => {
+const Profile = ({name, desc, data, handleEdit, handleDelete}) => {
   return (
-    <div>Profile</div>
+    <section className='w-full'>
+      <h1 className='head_text text-left'>
+        <span className='blue_gradient'>{name} Profile</span>
+      </h1>
+      <p className='desc text-left'>
+        {desc}
+      </p>
+      <div className='mt-10 prompt_layout'>
+      {data.map((post) => (
+        <PromptCard 
+          key={post._id}
+          post={post}
+          handleEdit={() => handleEdit && handleEdit(post)}
+          handleDelete={() => handleDelete && handleDelete(post)}
+        />
+      ))}
+    </div>
+    </section>
   )
 }
 

components/PromptCard.jsx

@@ -2,11 +2,21 @@
 import {useState} from 'react';
 import Image from 'next/image';
 import {useSession} from 'next-auth/react';
-import {usePathname, useRouter} from 'next/router';
+import {usePathname, useRouter} from 'next/navigation';
 
 const PromptCard = ({post, handleTagClick, handleEdit, handleDelete}) => {
-
+  const {data: session} = useSession();
   const [copied, setCopied] = useState("");
+  const pathName = usePathname();
+  const router = useRouter();
+
+  const handleCopy = () => {
+    setCopied(post.prompt);
+    navigator.clipboard.writeText(post.prompt);
+    setTimeout(() => {
+      setCopied("");
+    }, 3000);
+  };
 
   return (
     <div className='prompt_card'>
@@ -28,7 +38,7 @@ const PromptCard = ({post, handleTagClick, handleEdit, handleDelete}) => {
             </p>
           </div>
         </div>
-        <div className='copy_btn' onClick={() => {}}>
+        <div className='copy_btn' onClick={handleCopy}>
           <Image 
             src={copied === post.prompt
               ? '/assets/icons/tick.svg'
@@ -47,6 +57,20 @@ const PromptCard = ({post, handleTagClick, handleEdit, handleDelete}) => {
       >
         {post.tag}
       </p>
+      {session?.user.id === post.creator._id && pathName === '/profile' && (
+        <div className='mt-5 flex-center gap-4 border-t border-gray-100 pt-3'>
+          <p 
+            className='font-inter text-sm green_gradient cursor-pointer'
+            onClick={handleEdit}>
+            Edit
+          </p>
+          <p 
+            className='font-inter text-sm orange_gradient cursor-pointer'
+            onClick={handleDelete}>
+            Delete
+          </p>
+        </div>
+      )}
     </div>
   )
 }