fixed UI and completed

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "@typescript-eslint/no-empty-object-type": "off"
+  }
 }

app/api/auth/[...nextauth]/options.ts

@@ -0,0 +1,38 @@
+import  {   NextAuthOptions, Session, User } from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import prisma from "@/lib/db";
+import { JWT } from "next-auth/jwt";
+
+
+
+export const authOption : NextAuthOptions= {
+    providers: [
+      GoogleProvider({
+        clientId: process.env.GOOGLE_CLIENT_ID!,
+        clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+      }),
+    ],
+    adapter: PrismaAdapter(prisma),
+    callbacks: {
+      session: async ({ session, token }: { session: Session; token: JWT }) => {
+        if (token && session.user) {
+          session.user.id = token.sub;
+          session.user.email = token.email;
+        }
+        return session;
+      },
+      signIn: async ({ user }: { user: User;  }) => {
+        if(user.email === "[email protected]" || user.email?.includes("@iilm.edu")){
+          return true;
+        }else{
+          return false;
+        }
+      },
+
+    },
+    session: {
+      strategy: "jwt"
+    }
+
+  };

app/api/auth/[...nextauth]/route.ts

@@ -1,31 +1,5 @@
-import NextAuth, { Session, AuthOptions } from "next-auth";
-import GoogleProvider from "next-auth/providers/google";
-import { PrismaAdapter } from "@next-auth/prisma-adapter";
-import prisma from "@/lib/db";
-import { JWT } from "next-auth/jwt";
-
-export const authOption: AuthOptions = {
-  providers: [
-    GoogleProvider({
-      clientId: process.env.GOOGLE_CLIENT_ID!,
-      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
-    }),
-  ],
-  secret: process.env.NEXTAUTH_SECRET!,
-  session: {
-    strategy: "jwt", // This ensures TypeScript recognizes this as a valid strategy
-  },
-  adapter: PrismaAdapter(prisma),
-  callbacks: {
-    session: async ({ session, token }: { session: Session; token: JWT }) => {
-      if (token && session.user) {
-        session.user.id = token.sub;
-        session.user.email = token.email;
-      }
-      return session;
-    },
-  },
-};
+import NextAuth from "next-auth";
+import { authOption } from "./options";
 
 const handler = NextAuth(authOption);
 

app/category/[categoryId]/[documentId]/loading.tsx

@@ -0,0 +1,13 @@
+import { Loader } from 'lucide-react'
+import React from 'react'
+
+
+const loading = () => {
+  return (
+    <div className='w-[90vw] h-[90vh] flex justify-center items-center m-auto'>
+<Loader />      
+    </div>
+  )
+}
+
+export default loading

app/document/[documentId]/page.tsx → app/category/[categoryId]/[documentId]/page.tsx

@@ -1,6 +1,14 @@
 import Document from '@/components/Document'
+import prisma from '@/lib/db'
 import React from 'react'
 
+export async function generateStaticParams() {
+  const documents = await prisma.document.findMany()
+  return documents.map((post) => ({
+    documentId: post.id,
+  }))
+}
+
 const Page = ({params : {documentId}} : {params:{documentId: string}}) => {
   return (
     <div>
@@ -9,4 +17,4 @@ const Page = ({params : {documentId}} : {params:{documentId: string}}) => {
   )
 }
 
-export default Page
+export default Page

app/category/[categoryId]/loading.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { AppBreadCrumb } from "@/components/AppBreadCrumb";
+import { Separator } from "@/components/ui/separator";
+
+
+const loading = () => {
+  return (
+    <div className="py-3 px-4 w-full max-w-7xl m-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="col-span-full">
+        <AppBreadCrumb links={[]} />
+      </div>
+      <div className="col-span-full">
+        <Skeleton className="h-8 w-[350px]" />
+      </div>
+      <div className="col-span-full">
+        <Separator />
+      </div>
+      {[0, 1, 2, 3, 4, 5, 6].map((id) => {
+        return <Skeleton key={id} className="w-full min-h-[100px]" />;
+      })}
+    </div>
+  );
+};
+
+export default loading;

app/category/[categoryId]/page.tsx

@@ -1,6 +1,13 @@
 import Category from '@/components/Category'
+import prisma from '@/lib/db'
 import React from 'react'
 
+export async function generateStaticParams() {
+  const categories = await prisma.category.findMany()
+  return categories.map((post) => ({
+    categoryId: post.id,
+  }))
+}
 
 const Page = ({params : {categoryId}} : {params:{categoryId: string}}) => {
 

app/layout.tsx

@@ -18,8 +18,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "CMS | AI/ML",
+  description: "ALL notes of AI ML",
 };
 
 export default function RootLayout({
@@ -29,6 +29,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <link rel="icon" href="/ai.png" sizes="any" />
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

app/loading.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { AppBreadCrumb } from "@/components/AppBreadCrumb";
+
+const loading = () => {
+  return (
+    <div className="py-3 px-4 w-full max-w-7xl m-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="col-span-full">
+        <Skeleton className="h-8 w-[350px]" />
+        <Skeleton className="h-5 w-[200px] mt-2" />
+      </div>
+      <div className="col-span-full">
+        <AppBreadCrumb links={[]} />
+      </div>
+      {[0, 1, 2, 3, 4, 5, 6].map((id) => {
+        return <Skeleton key={id} className="w-full min-h-[100px]" />;
+      })}
+    </div>
+  );
+};
+
+export default loading;

app/login/page.tsx

@@ -1,33 +1,45 @@
-"use client"
-import React from 'react';
-import Image from 'next/image';
-import { signIn } from 'next-auth/react';
+"use client";
+import React from "react";
+import Image from "next/image";
+import { signIn } from "next-auth/react";
+import { Boxes } from "@/components/ui/background-boxes";
 
-const page = () => {
-
-  const handleClick = ()=>{
-  signIn("google")
-  }
+const Page = () => {
+  const handleClick = () => {
+    try {
+      signIn("google");
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
   return (
-    <div className='w-full h-full flex justify-center items-center'>
-      <div className='border border-white border-opacity-40 rounded-lg p-5 text-center'>
-        <h1 className='font-bold text-3xl dark:white '>
-          CMS - AI/ML
-        </h1>
-        <p className='opacity-70 text-base py-3'>
+    <div className="h-full relative w-full overflow-hidden bg-[#121212] flex flex-col items-center justify-center rounded-lg">
+      <div className="absolute inset-0 w-full h-full bg-[#121212] z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
+      <Boxes />
+      <div className="border border-white border-opacity-40 relative z-21 rounded-lg p-5 text-center bg-[rgba(0,0,0,0.2)]">
+        <h1 className="font-bold text-3xl dark:white ">CMS - AI/ML</h1>
+        <p className="opacity-70 text-base py-3">
           A single place for all AI/ML notes.
         </p>
-        <div onClick={handleClick} className='cursor-pointer border-white border bg-white text-black rounded-md px-8 py-2 flex justify-center items-center 
-        gap-5'>
-<Image src={"/images/google.png"} alt='goole' width={30} height={30} />
-<p className='text-black text-base font-bold'>
-  Continue with Google.
-</p>
+        <div
+          onClick={handleClick}
+          className="cursor-pointer border-white border bg-white text-black h-[40px] rounded-md px-8 py-2 flex justify-center items-center 
+        gap-5"
+        >
+          <Image
+            src={"/images/google.png"}
+            alt="goole"
+            width={30}
+            height={30}
+          />
+          <p className="text-black text-base font-bold">
+            Continue with Google.
+          </p>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default page
+export default Page;

app/page.tsx

@@ -1,27 +1,28 @@
-
-import { Upload } from "lucide-react"
 import prisma from "@/lib/db";
 import Categories from "@/components/CategoryGroup";
+import { AppBreadCrumb } from "@/components/AppBreadCrumb";
+import SearchBar from "@/components/SearchBar";
 
-
-const getAllCategories = async ()=>{
-return await prisma.category.findMany()
-}
-
+const getAllCategories = async () => {
+  return await prisma.category.findMany();
+};
 
 export default async function Home() {
-
-const result = await getAllCategories()
+  const result = await getAllCategories();
 
   return (
     <div className="py-3 px-4 w-full max-w-7xl m-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-      <div className="bg-gray-800 min-h-[100px] p-3 border border-white rounded-md border-opacity-50 cursor-pointer flex items-center flex-col"> 
-      <Upload height={40} width={40}/>
-      <p>
-        Uplaod Document!
-      </p>
+      <div className="col-span-full">
+        <h1 className="text-4xl font-bold">All Topics</h1>
+        <p className="mt-2 opacity-50">Total topics : {result.length}</p>
+      </div>
+      <div className="col-span-full">
+        <AppBreadCrumb links={[]} />
+      </div>
+      <div className="col-span-full">
+      <SearchBar allCategories={result}/>
       </div>
-      <Categories categories={result}/>
+      <Categories categories={result} />
     </div>
   );
 }