switching to next/image everywhere in the codebase for better image o…

…ptimisation
debsouryadatta · Dec 10, 2024 · e045bef · e045bef
1 parent f836c67
commit e045bef
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 14 deletions.
diff --git a/nextjs-app/src/app/(inner_routes)/bookmarks/page.tsx b/nextjs-app/src/app/(inner_routes)/bookmarks/page.tsx
@@ -10,6 +10,7 @@ import BmPosts from "@/components/bookmarks/BmPosts";
 import LoadingComponent from "../loading";
 import { toast } from "sonner";
 import { useRouter } from "next/navigation";
+import Image from "next/image";
 
 export default function page() {
   const [bookmarkCourses, setBookmarkCourses] = useState<BookmarkCourse[]>([]);
@@ -59,10 +60,12 @@ export default function page() {
   return (
     <div className="min-h-[75vh]">
       <div className="w-full text-white flex flex-col justify-center items-center">
-        <img
+        <Image
           className="w-full h-[200px] object-cover"
           src="https://res.cloudinary.com/diyxwdtjd/image/upload/v1731335982/projects/Untitled_design_1_cuceg3.jpg"
           alt="/"
+          width={1000}
+          height={200}
         />
         <Tabs defaultValue="courses" className="flex flex-col justify-center items-center mt-10">
         <TabsList className="flex justify-center items-center bg-zinc-400 text-black dark:bg-zinc-800 dark:text-white w-96">

diff --git a/nextjs-app/src/app/(inner_routes)/search/page.tsx b/nextjs-app/src/app/(inner_routes)/search/page.tsx
@@ -1,16 +1,19 @@
 "use client";
 
 import { Search } from "@/components/search/Search";
+import Image from "next/image";
 
 export default function page() {
 
   return (
     <div className="min-h-[75vh]">
       <div className="w-full text-white flex flex-col justify-center items-center">
-        <img
+        <Image
           className="w-full h-[200px] object-cover"
           src="https://res.cloudinary.com/diyxwdtjd/image/upload/v1723098788/projects/code-1839406_ial7zq.jpg"
           alt="/"
+          width={200}
+          height={200}
         />
         <Search />
       </div>

diff --git a/nextjs-app/src/components/common/Footer.tsx b/nextjs-app/src/components/common/Footer.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useTheme } from 'next-themes';
+import Image from 'next/image';
 import { useEffect } from 'react';
 
 export default function Footer() {
@@ -16,14 +17,16 @@ export default function Footer() {
       >
         <div>
         {theme && (
-            <img
+            <Image
               src={
                 theme === 'dark'
                   ? 'https://res.cloudinary.com/diyxwdtjd/image/upload/v1723026483/projects/CX-removebg-preview_lqpcxg.png'
                   : 'https://res.cloudinary.com/diyxwdtjd/image/upload/v1723026468/projects/2-removebg-preview_wyfijg.png'
               }
               className="w-[100px] h-[100px] mr-3"
               alt="CourseX logo"
+              width={100}
+              height={100}
             />
           )}
           <span>CourseX</span>

diff --git a/nextjs-app/src/components/course/ImageComp.tsx b/nextjs-app/src/components/course/ImageComp.tsx
@@ -1,8 +1,8 @@
 "use client";
 import { motion } from "framer-motion";
-import { ImagesSlider } from "../ui/images-slider";
 import Link from "next/link";
 import CourseDetail from "./CourseDetail";
+import Image from "next/image";
 
 type Props = {
   course: {
@@ -16,9 +16,8 @@ type Props = {
 
 export function ImageComp({course, firstChapterId}: Props) {
   return (
-    <div>
-      <ImagesSlider className="h-[50vh] w-[90vw] sm:h-[90vh] sm:w-[70vw] rounded-2xl" 
-      images={[course?.image ? course?.image : ""]}>
+    <div className="relative">
+      <div className="relative h-[50vh] w-[90vw] sm:h-[90vh] sm:w-[70vw] rounded-2xl overflow-hidden mx-auto">
         <motion.div
           initial={{
             opacity: 0,
@@ -31,18 +30,25 @@ export function ImageComp({course, firstChapterId}: Props) {
           transition={{
             duration: 0.6,
           }}
-          className="z-50 flex flex-col justify-center items-center"
+          className="absolute inset-0 z-10 flex flex-col justify-center items-center bg-black/50"
         >
           <motion.p className="font-bold text-2xl md:text-6xl text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 py-4">
-              {course?.title} <br />
+            {course?.title} <br />
           </motion.p>
-              <span className="text-center text-xs md:text-xl w-[60vw]">{course?.description}</span>
+          <span className="text-center text-xs md:text-xl w-[60vw]">{course?.description}</span>
           <button className="px-4 py-2 backdrop-blur-sm border bg-emerald-300/10 border-emerald-500/20 text-white mx-auto text-center rounded-full relative mt-4">
             <Link href={`/course/${course?.id}/${firstChapterId}`}>Start Learning →</Link>
-            <div className="absolute inset-x-0  h-px -bottom-px bg-gradient-to-r w-3/4 mx-auto from-transparent via-emerald-500 to-transparent" />
+            <div className="absolute inset-x-0 h-px -bottom-px bg-gradient-to-r w-3/4 mx-auto from-transparent via-emerald-500 to-transparent" />
           </button>
         </motion.div>
-      </ImagesSlider>
+        <Image 
+          src={course?.image || ""}
+          alt={course?.title || "Course Image"}
+          fill
+          className="object-cover"
+          priority
+        />
+      </div>
       <CourseDetail course={course} />
     </div>
   );

diff --git a/nextjs-app/src/components/profile/ProfileHeader.tsx b/nextjs-app/src/components/profile/ProfileHeader.tsx
@@ -12,6 +12,7 @@ import EditDialog from "./EditDialog";
 import EditDrawer from "./EditDrawer";
 import { User } from "@/types";
 import { useProfileCoursesStore } from "@/store";
+import Image from "next/image";
 
 export default function ProfileHeader({
   user,
@@ -63,16 +64,21 @@ export default function ProfileHeader({
     <div>
       <div className="sm:mx-auto md:mx-auto lg:mx-auto xl:mx-auto bg-white dark:bg-zinc-900 shadow-xl rounded-lg text-gray-900">
         <div className="rounded-t-lg h-72 overflow-hidden">
-          <img
+          <Image
             className="object-cover object-top w-full"
             src="https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             alt="Mountain"
+            width={2070}
+            height={600}
           />
         </div>
         <div className="mx-auto w-32 h-32 relative -mt-16 border-4 border-white rounded-full overflow-hidden">
-          <img
+          <Image
             className="object-cover object-center h-32"
             src={user?.image || ""}
+            alt="Profile"
+            width={128}
+            height={128}
           />
         </div>
         <div className="text-center mt-2">