component added

Rabinkhulimuli · Jan 3, 2025 · 0acced1 · 0acced1
1 parent 143df18
commit 0acced1
Show file tree

Hide file tree

Showing 14 changed files with 385 additions and 42 deletions.
diff --git a/app/(root)/startup/[id]/page.tsx b/app/(root)/startup/[id]/page.tsx
@@ -1,21 +1,26 @@
 import { formatDate } from "@/lib/utils"
 import { client } from "@/sanity/lib/client"
-import { Startup_by_id_querys } from "@/sanity/lib/queries"
+import { Playlist_by_slug_query, Startup_by_id_querys } from "@/sanity/lib/queries"
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import Image from "next/image"
 import markdownit from "markdown-it"
 import { Suspense } from "react"
 import { Skeleton } from "@/components/ui/skeleton"
 import View from "@/components/view"
+import StartupCard, { StartupTypeCard } from "@/components/startupcard"
+
 const md=markdownit()
 export const experimental_ppr=true
 export default async function Page({params}:{params:Promise<{id:string}>}){
     const id= (await params).id
     if (!id){
         return <div>Page not found</div>
     }
-    const post=await client.fetch(Startup_by_id_querys,{id})//PPR
+    const[post,{select:editorPosts}]= await Promise.all([
+        client.fetch(Startup_by_id_querys,{id}),//PPR
+        client.fetch(Playlist_by_slug_query,{slug:'editor-picks'})
+    ])
 
     if (!post){
         return notFound()
@@ -34,9 +39,7 @@ export default async function Page({params}:{params:Promise<{id:string}>}){
             </p>
         </section>
         <section className="section_container">
-            <img src={post.image} alt="thumbnail" 
-            className="w-full h-auto rounded-xl"
-            />
+            <Image src={post.image} width={100} height={100}  className="w-full h-auto rounded-xl" alt="thumbnail"  />
         </section>
         <section className="section_container">
             <div className="space-y-5 mt-10 max-w-4xl mx-auto">
@@ -79,7 +82,20 @@ export default async function Page({params}:{params:Promise<{id:string}>}){
             </div>
             <hr className="divider" />
             {/* todo: editor selected startup */}
-
+                {
+                    editorPosts.length >0 && (
+                        <div className="max-w-4xl mx-auto" >
+                            <p className="text-30-semibold">
+                                Editor Picks
+                            </p>
+                            <ul className="mt-7 card_grid-sm" >
+                                {editorPosts.map((post:StartupTypeCard,index:number)=> (
+                                    <StartupCard key={index} post={post}  />
+                                ))}
+                            </ul>
+                        </div>
+                    )
+                }
             {/* make dynamic for ppr */}
             <Suspense fallback={<Skeleton/> } >
                     <View id={id} />

diff --git a/app/(root)/user/[id]/page.tsx b/app/(root)/user/[id]/page.tsx
@@ -2,7 +2,11 @@ import { auth } from "@/auth"
 import { Author_by_id_query } from "@/sanity/lib/queries"
 import { notFound } from "next/navigation"
 import { client } from "@/sanity/lib/client"
-
+import Image from "next/image"
+import UserStartup from "@/components/userStartups"
+import { Suspense } from "react"
+import { StartupCardSkeleton } from "@/components/startupcard"
+export const experimental_ppr=true
 export default async function Page({params}:{params:Promise<{id:string}>}){
    const id =(await params).id
 
@@ -12,6 +16,40 @@ export default async function Page({params}:{params:Promise<{id:string}>}){
     return notFound()
    }
     return(<>
-    <div>user page {session?.user?.name}</div>
+    <section className=" profile_container">
+        <div className="profile_card ">
+            <div className=" profile_title">
+                <h3 className="text-24-black uppercase text-center ">
+                {session?.user?.name}
+                </h3>
+
+            </div>
+            <Image 
+                src={user.image|| ''}
+                alt="user.name"
+                width={220}
+                height={220}
+                className="profile_image"
+                />
+                <p className="text-30-extrabold mt-7 text-center">
+                    @{user?.username}
+                </p>
+                <p className="mt-1 text-center  text-14-normal " >
+                    {user?.bio}
+                </p>
+
+        </div>
+        <div className="flex-1 flex flex-col gap-5 lg:-mg-5" >
+                <p className="text-30-bold">
+                    {session?.id === id ? "Your ": "All "} Startups
+                </p>
+                <ul>
+                    <Suspense fallback={<StartupCardSkeleton/>} >
+                        <UserStartup  id={id} />
+                    </Suspense>
+
+                </ul>
+            </div>
+    </section>
     </>)
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,43 +1,57 @@
-
 import Link from "next/link";
 import Image from "next/image";
 import { auth, signOut, signIn } from "@/auth";
+import { Badge, LogOut } from "lucide-react";
+import { Avatar } from "@radix-ui/react-avatar";
+import { AvatarFallback, AvatarImage } from "./ui/avatar";
 export default async function Navbar() {
-
   const session = await auth();
   return (
     <header className="px-5 py-3 bg-white shadow-sm font-work-sans">
       <nav className="flex justify-between items-center">
         <Link href="/">
           <Image src="/logo.png" alt="logo" width={144} height={30} />
         </Link>
-        {session && session?.user ? (
-          <>
-            <Link href="/startup/create">
-              <span className="" >Create</span>
-            </Link>
-            <form action={async()=> {
-                'use server'
-                await signOut()
-            }}> 
-            <button type="submit" >
-            <span className="">Logout</span>
-            </button>
-            </form>
-            <Link href={`/user/${session?.id}`}>
-              <span>{session?.user?.name} </span>
-            </Link>
-          </>
-        ) : (
+        <div className="flex items-center gap-5 text-black ">
+          {session && session?.user ? (
+            <>
+              <Link href="/startup/create">
+                <span className="max-sm:hidden">Create</span>
+                <Badge className="size-6 sm:hidden" />
+              </Link>
+              <form
+                action={async () => {
+                  "use server";
+                  await signOut();
+                }}
+              >
+                <button type="submit">
+                  <span className="max-sm:hidden">Logout</span>
+                  <LogOut className="size-6 sm:hidden text-red-500 " />
+                </button>
+              </form>
+              <Link href={`/user/${session?.id}`}>
+                <Avatar className="size-10">
+                  <AvatarImage
+                    className="w-10 rounded-full"
+                    alt={session?.user?.name || ""}
+                    src={session?.user?.image || ""}
+                  />
+                  <AvatarFallback>AV</AvatarFallback>
+                </Avatar>
+              </Link>
+            </>
+          ) : (
             <form
-            action={async () => {
-              "use server"
-              await signIn("github")
-            }}
-          >
-            <button type="submit">Signin with GitHub</button>
-          </form>
-        )}
+              action={async () => {
+                "use server";
+                await signIn("github");
+              }}
+            >
+              <button type="submit">Signin with GitHub</button>
+            </form>
+          )}
+        </div>
       </nav>
     </header>
   );