added some component to dashboard home page

src/components/Cards/DefaultCard.tsx

@@ -0,0 +1,42 @@
+import { Icons } from "../"
+
+type Props = {
+  title?: string,
+  descText?: string,
+  iconName?: string,
+  iconColor?: string,
+  cardClass?: string,
+  titleClass?: string,
+  descTextClass?: string,
+  onClick?: ()=>any
+}
+
+
+export default function DefaultCard({
+title,
+descText,
+iconName,
+iconColor,
+cardClass,
+titleClass,
+descTextClass,
+onClick
+}:Props) {
+  return (
+    <button 
+      className={`h-full w-full rounded-lg p-5 shadow-lg hover:shadow-none bg-no-repeat bg-[90%] flex justify-between gap-4 items-center transition-all duration-300 ${cardClass && cardClass}`}
+      onClick={onClick}
+    >
+      <div className='w-3/4'>
+        <h1 className={`mb-1 text-[#FFF] text-lg text-left font-bold ${titleClass && titleClass}`}>{title}</h1>
+        <p className={`text-sm text-left ${descTextClass && descTextClass}`}>{descText}</p>
+      </div>
+
+      {iconName && // DISPLAYS ICON IF THERE IS ICON NAME PRESENT
+      <div className='group-hover:-translate-x-2 transition-all duration-300'>
+        <Icons name={iconName} fillColor={`${iconColor ? iconColor : '#FFF'}`} />
+      </div>
+      }
+    </button>
+  )
+}

src/components/Cards/index.tsx

@@ -0,0 +1,3 @@
+import DefaultCard from "./DefaultCard";
+
+export { DefaultCard };