Merge branch 'code100x:main' into fix-captions-settings-visibility-issue

code100x · Nov 12, 2024 · 1d22667 · 1d22667
2 parents 8be7339 + 88bff90
commit 1d22667
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@tabler/icons-react": "^3.14.0",
     "@types/bcrypt": "^5.0.2",
     "@types/jsonwebtoken": "^9.0.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(marketing)/(policy)/privacy-policy/page.tsx b/src/app/(marketing)/(policy)/privacy-policy/page.tsx
@@ -22,6 +22,11 @@ const PrivacyPolicyPage = () => {
         <h1 className="mx-auto mb-8 w-full text-center text-4xl font-extrabold tracking-tighter text-primary md:mb-12 md:text-5xl">
           Privacy Policy
         </h1>
+        <div className="mx-auto text-center text-lg font-medium text-foreground/70">
+          Last Updated At:{' '}
+          <span className="text-primary">November 2, 2024</span>
+        </div>
+        <br />
         <div className="mx-auto max-w-3xl">
           {privacyPolicyContent.map((item) => (
             <motion.div

diff --git a/src/app/(marketing)/(policy)/privacy-policy/privacy-policy.ts b/src/app/(marketing)/(policy)/privacy-policy/privacy-policy.ts
@@ -36,7 +36,7 @@ export const privacyPolicyContent = [
   {
     id: 8,
     description:
-      'Website refers to harkirat.classx.co.in, accessible fromharkirat.classx.co.in Service refers to the Website. Country refers to: Uttar Pradesh, India Service Provider means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used. Third-party Social Media Service refers to any website or any social network website through which a User can log in or create an account to use the Service.',
+      'Website refers to harkirat.classx.co.in, accessible from harkirat.classx.co.in Service refers to the Website. Country refers to: Uttar Pradesh, India Service Provider means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used. Third-party Social Media Service refers to any website or any social network website through which a User can log in or create an account to use the Service.',
   },
   {
     id: 9,
@@ -56,7 +56,7 @@ export const privacyPolicyContent = [
   {
     id: 12,
     description:
-      'Email address First name and last name Phone number Usage Data Usage Data Usage Data is collected automatically when using the Service.',
+      'Email address, First name, Last name, Phone number & Usage Data is collected automatically when using the Service.',
   },
   {
     id: 13,
@@ -76,7 +76,7 @@ export const privacyPolicyContent = [
   {
     id: 16,
     description:
-      'Tracking Technologies and Cookies We use Cookies and similar tracking technologies to track the activity on Our Service and store certain information. Tracking technologies used are beacons, tags, and scripts to collect and track information and to improve and analyze Our Service.',
+      'Tracking Technologies and Cookies: We use Cookies and similar tracking technologies to track the activity on Our Service and store certain information. Tracking technologies used are beacons, tags, and scripts to collect and track information and to improve and analyze Our Service.',
   },
   {
     id: 17,
@@ -96,7 +96,7 @@ export const privacyPolicyContent = [
   {
     id: 20,
     description:
-      'Necessary / Essential CookiesType: Session CookiesAdministered by: UsPurpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services. Cookies Policy / Notice Acceptance CookiesType: Persistent CookiesAdministered by: UsPurpose: These Cookies identify if users have accepted the use of cookies on the Website. Functionality CookiesType: Persistent CookiesAdministered by: UsPurpose: These Cookies allow us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website. For more information about the cookies we use and your choices regarding cookies, please visit our Cookies Policy.',
+      'Necessary / Essential Cookies Type, Session Cookies are Administered by Us. Purpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services. Cookies Policy / Notice Acceptance Cookies Type: Persistent Cookies Administered by: Us Purpose: These Cookies identify if users have accepted the use of cookies on the Website. Functionality Cookies Type: Persistent Cookies Administered by: Us Purpose: These Cookies allow us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website. For more information about the cookies we use and your choices regarding cookies, please visit our Cookies Policy.',
   },
   {
     id: 21,
@@ -206,7 +206,7 @@ export const privacyPolicyContent = [
   {
     id: 42,
     description:
-      'Changes to this Privacy Policy We may update our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page.',
+      'Changes to this Privacy Policy: We may update our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page.',
   },
   {
     id: 43,

diff --git a/src/app/certificate/page.tsx b/src/app/certificate/page.tsx
@@ -5,7 +5,7 @@ const CertificatePage = async () => {
   const certificates = await getCertificates();
 
   return (
-    <section className="flex w-full flex-wrap items-center justify-center">
+    <section className="flex w-full flex-wrap mt-20 items-center justify-center">
       {certificates?.map(({ cert, course, user }) => (
         <CertificateComponent
           certificateId={cert.id}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,6 +9,7 @@ import { siteConfig } from '@/config/site-config';
 import { Toaster } from 'sonner';
 import { Navbar } from '@/components/Navbar';
 import NextTopLoader from 'nextjs-toploader';
+import OfflineNotification from '@/components/OfflineNavigator';
 
 const satoshi = localFont({
   display: 'swap',
@@ -33,11 +34,12 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         )}
       >
         <GoogleAnalytics />
-        <NextTopLoader 
-          showSpinner={false} 
+        <NextTopLoader
+          showSpinner={false}
         />
         <Providers>
           <Navbar />
+          <OfflineNotification />
           {children}
           <Toaster richColors />
         </Providers>

diff --git a/src/components/BreadCrumbComponent.tsx b/src/components/BreadCrumbComponent.tsx
@@ -11,7 +11,7 @@ import {
 import { FullCourseContent } from '@/db/course';
 import { Home } from 'lucide-react';
 import Link from 'next/link';
-import { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 
 export default function BreadCrumbComponent({
   rest,
@@ -93,7 +93,7 @@ export default function BreadCrumbComponent({
               finalRouteArray = [...rest];
             }
             return (
-              <>
+              <Fragment key={indexofBreadCrumbId}>
                 {index !== array.length - 1 ? (
                   <>
                     <BreadcrumbItem>
@@ -116,7 +116,7 @@ export default function BreadCrumbComponent({
                     </BreadcrumbPage>
                   </BreadcrumbItem>
                 )}
-              </>
+              </Fragment>
             );
           })}
         </BreadcrumbList>

diff --git a/src/components/Certificate.tsx b/src/components/Certificate.tsx
@@ -79,7 +79,7 @@ export const CertificateComponent = ({
   };
 
   return (
-    <Card className="w-500 my-4" key={course.id}>
+    <Card className="w-500 my-4 pt-8" key={course.id}>
       <CardContent className="flex justify-center">
         {certificateImageUrl ? (
           <img

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -41,7 +41,7 @@ export const Navbar = () => {
   );
 
   return (
-    <AnimatePresence>
+    <>
       <motion.nav
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
@@ -143,35 +143,33 @@ export const Navbar = () => {
         </div>
 
         {/* Mobile menu */}
-        {!session?.user && (
-          <>
-            {isMenuOpen && (
+        <AnimatePresence>
+          {!session?.user && isMenuOpen && (
+            <motion.div
+              className="bg-background p-4 md:hidden"
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+            >
               <motion.div
-                className="bg-background p-4 md:hidden"
+                className="flex gap-2"
                 initial={{ opacity: 0, y: -20 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -20 }}
               >
-                <motion.div
-                  className="flex gap-2"
-                  initial={{ opacity: 0, y: -20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -20 }}
-                >
-                  <AppbarAuth />
+                <AppbarAuth />
                   <Button variant={'branding'} className="w-full">
-                    <Link
+                  <Link
                       href={'https://harkirat.classx.co.in/new-courses'}
-                      target="_blank"
-                    >
-                      Join now
-                    </Link>
-                  </Button>
-                </motion.div>
+                    target="_blank"
+                  >
+                    Join now
+                  </Link>
+                </Button>
               </motion.div>
-            )}
-          </>
-        )}
+            </motion.div>
+          )}
+        </AnimatePresence>
       </motion.nav>
 
       {/* Mobile search overlay */}
@@ -195,6 +193,6 @@ export const Navbar = () => {
           </motion.div>
         )}
       </AnimatePresence>
-    </AnimatePresence>
+    </>
   );
 };
diff --git a/src/components/OfflineNavigator.tsx b/src/components/OfflineNavigator.tsx
@@ -0,0 +1,51 @@
+'use client';
+import Image from 'next/image';
+import { useState, useEffect } from 'react';
+
+const OfflineNotification = () => {
+    const [isOffline, setIsOffline] = useState(false);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+        setIsOffline(!window.navigator.onLine);
+
+        const handleOnline = () => setIsOffline(false);
+        const handleOffline = () => setIsOffline(true);
+
+        window.addEventListener('online', handleOnline);
+        window.addEventListener('offline', handleOffline);
+
+        return () => {
+            window.removeEventListener('online', handleOnline);
+            window.removeEventListener('offline', handleOffline);
+        };
+    }, []);
+
+    if (!mounted) return null;
+
+    if (!isOffline) return null;
+
+    return (
+        <div className="fixed inset-0 flex flex-col items-center justify-center space-y-4 bg-white dark:bg-[#020817] z-50">
+            <div className="flex flex-col items-center space-y-4 p-6 rounded-lg">
+                <Image 
+                    src="/harkirat.png" 
+                    alt="Offline" 
+                    width={48} 
+                    height={48} 
+                    unoptimized 
+                    className="mb-2"
+                />
+                <h2 className="text-xl font-semibold text-black dark:text-white">
+                    You are offline
+                </h2>
+                <p className="text-neutral-500 dark:text-neutral-200 text-center">
+                    Please check your internet connection
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default OfflineNotification;
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
@@ -51,7 +51,7 @@ export function SearchResults({
     <div
       className={`absolute ${
         isMobile ? 'top-full' : 'top-12'
-      } z-30 max-h-[40vh] w-full overflow-y-auto rounded-lg border-2 bg-background p-2 shadow-lg`}
+      } z-30 max-h-[40vh] w-full rounded-lg border-2 bg-background p-2 shadow-lg`}
     >
       {renderSearchResults()}
     </div>

diff --git a/src/components/search/VideoSearchCard.tsx b/src/components/search/VideoSearchCard.tsx
@@ -2,6 +2,12 @@ import { TSearchedVideos } from '@/app/api/search/route';
 import { Play } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../ui/tooltip';
 
 interface VideoSearchCardProps {
   video: TSearchedVideos;
@@ -28,13 +34,22 @@ const VideoSearchCard: React.FC<VideoSearchCardProps> = ({
     return (
       <Link
         href={videoUrl}
-        className="flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 hover:bg-blue-600/10 hover:text-blue-600"
+        className="group relative flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 hover:bg-blue-600/10 hover:text-blue-600"
         onClick={handleClick}
       >
         <Play className="size-4" />
-        <span className="w-4/5 truncate font-medium capitalize">
-          {video.title}
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="w-4/5 truncate font-medium capitalize">
+                {video.title}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{video.title}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </Link>
     );
   }