diff --git a/src/components/CardTermine.jsx b/src/components/CardTermine.jsx new file mode 100644 index 0000000000000000000000000000000000000000..7e32d23fa3d9e71bfb6bb3cfe3db75181b7f3c18 --- /dev/null +++ b/src/components/CardTermine.jsx @@ -0,0 +1,22 @@ +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="relative flex flex-col items-center p-6 bg-white rounded shadow-xl"> + {svgData && <img className="w-16 h-16 mb-2" src={svgData}/>} + + <h4 className="text-xl font-bold leading-snug tracking-tight mb-1" style={{ textAlign: "center" }} >FIT-Connect <br/> für {title}</h4> + {children} + </div> +} diff --git a/src/pages/termine.mdx b/src/pages/termine.mdx index 25017101dbd123ee038761b71e5376cb4c9a3962..d1227b140c33201a4d28d0e35b872b1b6f8d8754 100644 --- a/src/pages/termine.mdx +++ b/src/pages/termine.mdx @@ -4,16 +4,18 @@ hide_table_of_contents: true --- import MailToButtonTermine from '@components/MailToButtonTermine' import BannerTermine from '@components/BannerTermine' -import Card from '@components/Card' +import CardTermine from '@components/CardTermine' import MailToButton from '@components/MailToButton' + + <header className="max-w-3xl mx-auto text-center pb-16"> <h1 className="h1 mb-4">Veranstaltungen</h1> <p className="wtext-xl text-gray-600">Möchten Sie mehr über FIT-Connect erfahren? Sprechen Sie mit uns in Online-Veranstaltungen, die einmal im Monat stattfinden. Die folgenden Themen stehen zur Auswahl:</p> </header> <BannerTermine> <div style={{ width: "33%" }} > - <Card title={'FIT-Connect für Interessierte'} icon={'Send'}> + <CardTermine title="Interessierte" icon={'Send'}> <br/> <p className="text-gray-600 text-center" > Bei diesen Veranstaltungen erhalten Verantwortliche und Entwickler:innen Informationen, wie sie Onlinedienste und Fachverfahren an FIT-Connect anbinden. @@ -25,10 +27,10 @@ import MailToButton from '@components/MailToButton' Teilnehmer sind alle Ansprechpartner für Onlinedienste oder Fachverfahren, die an einer Anbindung interessiert sind. <br/> Mit der folgenden Schaltfläche rufen Sie Ihr E-Mail-Programm auf, mit einer vorbereiteten E-Mail. Senden Sie uns diese E-Mail und wir informieren Sie regelmäßig über die nächste Informationsveranstaltung zur Anbindung von Onlinediensten und Fachverfahren. </p> - </Card> + </CardTermine> </div> <div style={{ width: "33%" }} > - <Card title={'FIT-Connect für Verantwortliche'} icon={'Support'}> + <CardTermine title={'Verantwortliche'} icon={'Support'}> <br/> <p className="text-gray-600 text-center"> Diese Veranstaltungen richten sich an Umsetzungsverantwortliche, die ihre Systeme gerade anbinden oder an FIT-Connect angebunden haben. @@ -41,10 +43,10 @@ import MailToButton from '@components/MailToButton' Mit der Schaltfläche oben rufen Sie Ihr E-Mail-Programm auf, mit einer vorbereiteten E-Mail. Senden Sie uns diese E-Mail und wir informieren Sie über Veranstaltungen zum Thema "FIT-Connect nutzen". <br/> </p> - </Card> + </CardTermine> </div> <div style={{ width: "33%" }} > - <Card title={'FIT-Connect für Entwickler:innen'} icon={'Bug'}> + <CardTermine title={'Entwickler:innen'} icon={'Bug'}> <br/> <p className="text-gray-600 text-center"> Diese Veranstaltungen richten sich an Entwickler:innen, die ihre Systeme gerade an FIT-Connect anbinden oder bereits angebunden haben. @@ -56,6 +58,8 @@ import MailToButton from '@components/MailToButton' Diese Veranstaltung findet bei Bedarf jeden zweiten Donnerstag im Monat statt. <br/> Mit der Schaltfläche oben rufen Sie Ihr E-Mail-Programm auf, mit einer vorbereiteten E-Mail. Senden Sie uns diese E-Mail und wir informieren Sie über Veranstaltungen zum Thema "FIT-Connect im Detail". </p> - </Card> + </CardTermine> </div> -</BannerTermine> \ No newline at end of file +</BannerTermine> + +