Major ui revamp (#1135)

* ui refresh

* fixed static pages (tnc, privacy-policy), fixed Navbar being rendered twice on landing page

Author: keshav-exe

next.config.js

@@ -13,16 +13,20 @@ const nextConfig = {
   },
   experimental: {
     serverActions: {
-      allowedOrigins: ['localhost:3000', 'app.100xdevs.com', 'app2.100xdevs.com']
-    }
+      allowedOrigins: [
+        'localhost:3000',
+        'app.100xdevs.com',
+        'app2.100xdevs.com',
+      ],
+    },
   },
   swcMinify: true,
   webpack: (config) => {
     // Enable polling based on env variable being set
     if (process.env.NEXT_WEBPACK_USEPOLLING) {
       config.watchOptions = {
         poll: 500,
-        aggregateTimeout: 300
+        aggregateTimeout: 300,
       };
     }
     return config;

package.json

@@ -39,7 +39,7 @@
     "@discordjs/next": "^0.1.1-dev.1673526225-a580768.0",
     "@hookform/resolvers": "^3.6.0",
     "@icons-pack/react-simple-icons": "^9.4.0",
-    "@prisma/client": "^5.6.0",
+    "@prisma/client": "^5.18.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -48,9 +48,11 @@
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@tabler/icons-react": "^3.14.0",
     "@types/bcrypt": "^5.0.2",
     "@types/jsonwebtoken": "^9.0.5",
     "@uiw/react-md-editor": "^4.0.4",
@@ -69,15 +71,13 @@
     "jose": "^5.2.2",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.321.0",
-    "moment": "^2.30.1",
     "next": "14.0.2",
     "next-auth": "^4.24.5",
     "next-themes": "^0.2.1",
     "nextjs-toploader": "^1.6.11",
     "node-fetch": "^3.3.2",
     "notion-client": "^6.16.0",
     "pdf-lib": "^1.17.1",
-    "qs": "^6.13.0",
     "react": "^18",
     "react-big-calendar": "^1.13.2",
     "react-day-picker": "8.10.1",
@@ -128,7 +128,7 @@
     "postcss": "^8",
     "prettier": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.6.1",
-    "prisma": "^5.17.0",
+    "prisma": "^5.18.0",
     "tailwindcss": "^3.3.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",

pnpm-lock.yaml

@@ -58,8 +58,8 @@ const createAnswerHandler = async (
       return answer;
     });
 
-    revalidatePath(`/questions/${result.id}`);
-    revalidatePath(`/questions`);
+    revalidatePath(`/question/${result.id}`);
+    revalidatePath(`/question`);
 
     return { data: result };
   } catch (error) {
@@ -99,8 +99,8 @@ const updateAnswerHandler = async (
         content, // Update content
       },
     });
-    revalidatePath(`/questions/${answerId}`);
-    revalidatePath(`/questions`);
+    revalidatePath(`/question/${answerId}`);
+    revalidatePath(`/question`);
     return { data: updatedAnswer };
   } catch (error) {
     console.error(error);
@@ -174,8 +174,8 @@ const deleteAnswerHandler = async (
       await prisma.answer.delete({ where: { id: answerId } });
     });
 
-    revalidatePath(`/questions/${answerId}`);
-    revalidatePath(`/questions`);
+    revalidatePath(`/question/${answerId}`);
+    revalidatePath(`/question`);
 
     return {
       data: { message: 'Answer and all nested answers deleted successfully' },

public/Mockup.png

@@ -12,7 +12,7 @@ import {
 import { revalidatePath } from 'next/cache';
 
 const reloadBookmarkPage = () => {
-  revalidatePath('/bookmarks');
+  revalidatePath('/bookmark');
 };
 
 const createBookmarkHandler = async (

public/banner-img.jpeg

@@ -1,5 +1,4 @@
 'use server';
-
 import {
   DeleteTypeQuestion,
   InputTypeCreate,
@@ -66,8 +65,8 @@ const createQuestionHandler = async (
         slug, // Include the slug
       },
     });
-    revalidatePath(`/questions/${question.id}`);
-    revalidatePath(`/questions`);
+    revalidatePath(`/question/${question.id}`);
+    revalidatePath(`/question`);
 
     return { data: question };
   } catch (error) {
@@ -106,7 +105,7 @@ const updateQuestionHandler = async (
 
   if (!existingQuestion || existingQuestion.authorId !== session.user.id) {
     return {
-      error: 'Unauthorized: You can only update questions you have authored',
+      error: 'Unauthorized: You can only update question you have authored',
     };
   }
 
@@ -141,8 +140,8 @@ const updateQuestionHandler = async (
         slug, // Include the new slug
       },
     });
-    revalidatePath(`/questions/${questionId}`);
-    revalidatePath(`/questions`);
+    revalidatePath(`/question/${questionId}`);
+    revalidatePath(`/question`);
 
     return { data: updatedQuestion };
   } catch (error) {
@@ -179,7 +178,7 @@ const deleteQuestionHandler = async (
     (question.authorId !== session.user.id && session.user.role !== ROLES.ADMIN)
   ) {
     return {
-      error: 'Unauthorized: You can only delete questions you have authored',
+      error: 'Unauthorized: You can only delete question you have authored',
     };
   }
 
@@ -214,8 +213,8 @@ const deleteQuestionHandler = async (
       });
     });
 
-    revalidatePath(`/questions/${questionId}`);
-    revalidatePath(`/questions`);
+    revalidatePath(`/question/${questionId}`);
+    revalidatePath(`/question`);
 
     return {
       data: {

public/banner_placeholder.png

@@ -0,0 +1,21 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <div className="flex flex-col gap-4 pb-16 pt-8">
+      <div className="flex flex-col justify-between gap-4 lg:flex-row">
+        <Skeleton className="h-8 w-3/4 md:w-1/2" />
+        <Skeleton className="h-10 w-full lg:w-64" />
+      </div>
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+        {[1, 2, 3, 4, 5, 6].map((v) => (
+          <div key={v} className="flex flex-col space-y-2">
+            <Skeleton className="h-48 w-full" />
+            <Skeleton className="h-6 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

public/platform/dailycode.png

@@ -13,14 +13,15 @@ export default async function BookmarksPage() {
   const bookmarkData = await getBookmarkDataWithContent();
 
   return (
-    <div className="flex h-screen flex-col">
-      <h1 className="bg-background/6 top-0 flex items-center p-5 text-3xl backdrop-blur-lg">
-        Bookmarks
-      </h1>
-
-      <main className="no-scrollbar mb-10 flex h-full flex-col overflow-y-scroll text-lg">
+    <main className="flex flex-col gap-4 pb-16 pt-8">
+      <div className="flex flex-col justify-between gap-2 md:flex-row">
+        <h1 className="text-wrap text-3xl font-extrabold capitalize tracking-tighter md:text-4xl">
+          Bookmarks
+        </h1>
+      </div>
+      <div className="flex h-full flex-col gap-4 rounded-2xl py-4">
         <BookmarkView bookmarkData={bookmarkData} />
-      </main>
-    </div>
+      </div>
+    </main>
   );
 }

public/platform/dashboard.png

@@ -0,0 +1,38 @@
+import { MyCourses } from '@/components/MyCourses';
+import { Redirect } from '@/components/Redirect';
+import SearchBar from '@/components/search/SearchBar';
+import { getServerSession } from 'next-auth';
+
+export default async function MyCoursesPage() {
+  const session = await getServerSession();
+
+  if (!session?.user) {
+    return <Redirect to={'/'} />;
+  }
+
+  // Get the current hour
+  const currentHour = new Date().getHours();
+
+  // Determine the appropriate greeting based on the time of day
+  let greeting = 'Good Morning';
+  if (currentHour >= 12 && currentHour < 18) {
+    greeting = 'Good Afternoon';
+  } else if (currentHour >= 18 || currentHour < 5) {
+    greeting = 'Good Evening';
+  }
+
+  return (
+    <main className="flex flex-col gap-4 pb-16 pt-8">
+      <div className="flex flex-col justify-between gap-4 lg:flex-row">
+        <h1 className="text-wrap text-3xl font-extrabold capitalize tracking-tighter md:text-4xl">
+          {greeting} {session.user.name}
+        </h1>
+        <SearchBar />
+      </div>
+
+      <div className="flex h-full flex-col gap-4 rounded-2xl py-4">
+        <MyCourses />
+      </div>
+    </main>
+  );
+}

public/platform/discord.png

@@ -5,9 +5,5 @@ interface Props {
 }
 
 export default function MainLayout(props: Props) {
-  return (
-    <div className="flex h-screen overflow-hidden">
-      <div className="w-full">{props.children}</div>
-    </div>
-  );
+  return <div className="w-full py-16">{props.children}</div>;
 }