Fixing the aspect-ratio plugin and moving the helper function into the util folder

Author: AJ-Kulundu

components/DisplayRC.js components/DisplayRC.jsxcomponents/DisplayRC.js renamed to components/DisplayRC.jsx

@@ -1,10 +1,6 @@
 import React, { useState } from "react";
 import Image from "next/image";
-
-// helper function used in the Image component
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
+import {booleanFilter} from '../util/booleanFilter';
 
 export default function DislpayRC({
   name,
@@ -23,7 +19,7 @@ export default function DislpayRC({
           src={!src ? "https://bit.ly/placeholder-img" : src}
           layout="fill"
           objectFit="cover"
-          className={cn(
+          className={booleanFilter(
             "duration-700 ease-in-out group-hover:opacity-75",
             loading
               ? "scale-110 blur-2xl grayscale"

tailwind.config.js

@@ -11,5 +11,8 @@ module.exports = {
       },
     },
   },
+  corePlugins: {
+    aspectRatio: false,
+  },
   plugins: [require('@tailwindcss/aspect-ratio'),],
 }

util/booleanFilter.js

@@ -0,0 +1,5 @@
+// A function to filter tailwindcss utilities depending on the value of a boolean property
+
+export const booleanFilter = (...classes) => {
+    return classes.filter(Boolean).join(" ");
+}