Feat(Lib): Implement Cloudinary Optimization

package.json

@@ -23,6 +23,7 @@
     "eslint-config-next": "13.3.1",
     "lucide-react": "^0.176.0",
     "next": "13.3.1",
+    "next-cloudinary": "^4.4.0",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/components/cloudop-image.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { CloudOpImageProps } from "@/types";
+import { CldImage } from "next-cloudinary";
+
+export default function CloudOpImage({
+  className,
+  width,
+  height,
+  src,
+  alt,
+  style,
+  priority,
+}: CloudOpImageProps) {
+  return (
+    <CldImage
+      className={className}
+      width={width}
+      height={height}
+      src={src}
+      alt={alt}
+      format="webp"
+      quality={75}
+      style={style}
+      priority={priority}
+    />
+  );
+}

src/components/design-card.tsx

@@ -1,21 +1,18 @@
 import { DesignCardProps } from "@/types";
-import Image from "next/image";
 import Link from "next/link";
+import CloudOpImage from "./cloudop-image";
 
 export default function DesignCard({ item }: DesignCardProps) {
   return (
     <div className="w-full">
       <Link href={item.dribbble_url} target="_blank" rel="noopener noreferrer">
-        <Image
+        <CloudOpImage
           className="mr-0 transition-all rounded-lg brightness-100 hover:brightness-75"
           src={item.image_url}
           width={800}
           height={600}
           alt={item.name}
-          style={{
-            height: "auto",
-          }}
-          priority
+          priotity={true}
         />
       </Link>
     </div>

src/components/image-scroll.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ImageScrollProps } from "@/types";
 import Link from "next/link";
 

src/types/index.d.ts

@@ -113,3 +113,13 @@ export interface ButtonAccentProps {
   styleNormal?: React.CSSProperties;
   styleHover?: React.CSSProperties;
 }
+
+export interface CloudOpImageProps {
+  className?: string;
+  width: number;
+  height: number;
+  src: string;
+  alt: string;
+  style?: React.CSSProperties;
+  priority?: boolean;
+}