layouts and components, oh my!

src/components/DynamicIcon.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React, { type SVGProps } from 'react'
+import { IconBaseProps, IconType } from 'react-icons';
+
+import { FaRegIdCard, FaStethoscope } from "react-icons/fa";
+import { LuLayoutDashboard, LuClipboardList  } from "react-icons/lu";
+import { IoDocumentsOutline } from "react-icons/io5";
+import { BsClipboardCheck } from "react-icons/bs";
+import { TbProgress } from "react-icons/tb";
+
+interface iconMapType {
+    [key: string]: IconType
+}
+
+const iconMap: iconMapType = {
+  FaRegIdCard: FaRegIdCard,
+  FaStethoscope: FaStethoscope,
+  LuLayoutDashboard: LuLayoutDashboard,
+  LuClipboardList: LuClipboardList,
+  IoDocumentsOutline: IoDocumentsOutline,
+  BsClipboardCheck: BsClipboardCheck,
+  TbProgress: TbProgress
+};
+
+type DynamicIconProps = IconBaseProps & {
+  iconName: string;
+  size?: number;
+};
+
+// interface DynamicIconProps {
+//   iconName: string;
+// };
+
+const DynamicIcon: React.FC<DynamicIconProps> = ({ iconName, ...props }) => {
+    const IconComponent = iconMap[iconName];
+
+    if (!IconComponent) {
+        console.warn(`Icon "${iconName}" not found in iconMap.`);
+        return null; // Or render a fallback icon
+    }
+
+    return React.createElement(IconComponent, props);
+};
+
+export default DynamicIcon;