next image for country cards

Author: markslorach

app/components/CountryCard.tsx

@@ -1,17 +1,21 @@
 import Link from "next/link";
 import { Country } from "../_types/types";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import Image from "next/image";
 
 const CountryCard = ({ country }: { country: Country }) => {
   return (
     <Link href={`/country/${country.cca3}`}>
       <article className="p-5 rounded-lg shadow-sm bg-white dark:bg-gray-700 space-y-7 border border-gray-300/50 dark:border-gray-500/50 md:hover:scale-[104%] transition-transform">
-        <div className="aspect-video">
-          <img
-            className="object-cover w-full h-full rounded-lg shadow-sm"
+        <AspectRatio ratio={16 / 9}>
+          <Image
+            width={300}
+            height={200}
             src={country.flags.png}
             alt={country.name.common}
+            className="object-cover w-full h-full rounded-lg shadow-sm"
           />
-        </div>
+        </AspectRatio>
 
         <div className="space-y-2">
           <h2 className="font-semibold text-lg line-clamp-1">

components/ui/aspect-ratio.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

next.config.mjs

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;
+const nextConfig = {
+    images: {
+        remotePatterns: [
+          {
+            protocol: "https",
+            hostname: "**",
+          },
+        ],
+      },
+  }
+  
+  export default nextConfig

package-lock.json

@@ -12,6 +12,7 @@
     "@clerk/nextjs": "^5.3.0",
     "@heroicons/react": "^2.1.5",
     "@prisma/client": "^5.18.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",