645_Button_fuer_Antrag_auf_Teilnahme_Informationstermine(planning#645)

src/components/CardTermine.jsx

+import React, {useEffect, useState} from 'react';
+
+// <p className="text-gray-600 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+export default function Card({title, icon, children}) {
+
+  const [svgData, setSvgData] = useState(undefined)
+
+  useEffect(async () => {
+    if (icon) {
+      const svgData = (await import(`@icons/${icon}.svg`)).default
+      setSvgData(svgData);
+    }
+  }, [icon])
+
+  return <div className="p-6 bg-white rounded shadow-xl text-center">
+    {svgData && <img className="w-16 h-16 mb-2" src={svgData}/>}   
+    <br/> 
+      <h4 className="text-xl font-bold leading-snug mb-1 text-center fitko-termine-heading-h4" >FIT-Connect</h4>
+      <h3 className="text-xl font-bold leading-snug mb-1 text-center fitko-termine-heading-h3" >für {title}</h3>
+    {children}
+  </div>
+}