'popover.tsx' and 'navbar.tsx' have been added to the UI. The 'compon…

…ents.json' file has also been created. Various pages have been updated, including 'page.tsx' and 'dashboard/page.tsx'. User interaction with the app has been improved through updates to 'useUserLoggedIn.ts' and 'utils.ts'. The new module 'tailwindcss-animate' has been added to the 'tailwind.config.ts' file.

.gitignore

@@ -61,3 +61,4 @@ desktop.ini
 coverage/
 /apps/js-examples/data
 /.42c
+/apps/next/

apps/nextjs/app/dashboard/page.tsx

@@ -0,0 +1,76 @@
+export default async function Dashboard() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+
+      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
+        <a
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Docs{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+
+        <a
+          href="/signin"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Sign In{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Templates{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Explore starter templates for Next.js.
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Deploy{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  );
+}

apps/nextjs/app/layout.tsx

@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import React from 'react';
+import { Navbar } from '@/components/navbar';
+import { getCurrentUser } from '@/lib/session';
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -9,14 +12,24 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const user = await getCurrentUser()
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+      <Navbar
+        user={{
+          name: user?.name,
+          image: user?.image,
+          email: user?.email,
+        }}
+      ></Navbar>
+      {children}
+      </body>
     </html>
   );
 }

apps/nextjs/app/page.tsx

@@ -1,25 +1,13 @@
-import { GET } from './api';
+
 
 export default async function Home() {
-  const pets = await GET('/units', {
-    params: { query: {  } },
-  });
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
 
-      <div className="grid my-10 grid-cols-1 md:grid-cols-3 gap-4">
-        {pets.data?.map((pet) => (
-          <div key={pet.id} className="card bg-white rounded-lg shadow-md p-4 text-black">
-            <h2 className="text-lg font-bold">{pet.name}</h2>
-            <p>{pet.category}</p>
-          </div>
-        ))}
-      </div>
-
       <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
         <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          href="https://docs.fdai.earth"
           className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
           target="_blank"
           rel="noopener noreferrer"
@@ -31,24 +19,24 @@ export default async function Home() {
             </span>
           </h2>
           <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
+            Find in-depth information about features and API.
           </p>
         </a>
 
         <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          href="/signin"
           className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
           target="_blank"
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
+            Sign In{' '}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
           <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
+            Already have an account? Sign in to try out the demo.
           </p>
         </a>
 

apps/nextjs/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "gray",
+    "cssVariables": false
+  },
+  "aliases": {
+    "utils": "@/lib/utils",
+    "components": "@/components"
+  }
+}

apps/nextjs/components/UserMenu.tsx

@@ -0,0 +1,133 @@
+// UserMenu.tsx
+import React from 'react';
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { User } from 'next-auth';
+export const UserMenu = ({user}: {user: User}) => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button className="rounded-full w-8 h-8 border-2 border-gray-100" size="icon" variant="ghost">
+        <img
+          alt="Avatar"
+          className="rounded-full"
+          height="32"
+          src={user.image || "/placeholder.svg"}
+          style={{
+            aspectRatio: "32/32",
+            objectFit: "cover",
+          }}
+          width="32"
+        />
+          <span className="sr-only">Toggle user menu</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="mt-1 w-56">
+        <div>
+          <Link
+            className="group flex items-center w-full px-3 py-1.5 text-sm rounded-md transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+            href="#"
+          >
+            <UserIcon className="w-4 h-4 mr-2" />
+            Your Profile
+          </Link>
+        </div>
+        <div>
+          <Link
+            className="group flex items-center w-full px-3 py-1.5 text-sm rounded-md transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+            href="#"
+          >
+            <CogIcon className="w-4 h-4 mr-2" />
+            Settings
+          </Link>
+        </div>
+        <div />
+        <div>
+          <Link
+            className="group flex items-center w-full px-3 py-1.5 text-sm rounded-md transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+            href="/logout"
+          >
+            <LogOutIcon className="w-4 h-4 mr-2" />
+            Logout
+          </Link>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+function UserIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  )
+}
+
+
+function CogIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
+      <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
+      <path d="M12 2v2" />
+      <path d="M12 22v-2" />
+      <path d="m17 20.66-1-1.73" />
+      <path d="M11 10.27 7 3.34" />
+      <path d="m20.66 17-1.73-1" />
+      <path d="m3.34 7 1.73 1" />
+      <path d="M14 12h8" />
+      <path d="M2 12h2" />
+      <path d="m20.66 7-1.73 1" />
+      <path d="m3.34 17 1.73-1" />
+      <path d="m17 3.34-1 1.73" />
+      <path d="m11 13.73-4 6.93" />
+    </svg>
+  )
+}
+
+
+function LogOutIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
+      <line x1="21" x2="9" y1="12" y2="12" />
+    </svg>
+  )
+}

apps/nextjs/components/navbar.tsx

@@ -0,0 +1,68 @@
+/**
+ * This code was generated by v0 by Vercel.
+ * @see https://v0.dev/t/nt6swWQ68T5
+ */
+import Link from "next/link"
+import { UserMenu } from './UserMenu';
+import { User } from 'next-auth';
+
+export function Navbar({user}: {user?: User}) {
+
+  return (
+    <header className="flex items-center h-14 px-4 border-b gap-4 lg:px-6">
+      <Link className="flex items-center gap-2" href="#">
+        <PackageIcon className="w-6 h-6" />
+        <span className="font-semibold">FDAi Next.js Example</span>
+      </Link>
+      <nav className="flex flex-1 items-center justify-center space-x-4 lg:space-x-4">
+        <Link className="font-medium underline hover:no-underline" href="#">
+          Pricing
+        </Link>
+        <Link className="font-medium underline hover:no-underline" href="#">
+          Features
+        </Link>
+        <Link className="font-medium underline hover:no-underline" href="#">
+          Contact
+        </Link>
+        <Link className="font-medium underline hover:no-underline" href="#">
+          About
+        </Link>
+        <Link className="font-medium underline hover:no-underline" href="#">
+          Blog
+        </Link>
+        <Link className="font-medium underline hover:no-underline" href="#">
+          Resources
+        </Link>
+        <Link className="font-medium underline hover:no-underline" href="#">
+          Docs
+        </Link>
+      </nav>
+      {user && <UserMenu user={user} />}
+    </header>
+  )
+}
+
+
+function PackageIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m7.5 4.27 9 5.15" />
+      <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
+      <path d="m3.3 7 8.7 5 8.7-5" />
+      <path d="M12 22V12" />
+    </svg>
+  )
+}
+
+