Implemented CalloutPanel

src/panels/Callout/CalloutPanel.tsx

+import React from 'react';
+import PanelWrapper from "../../meta/PanelWrapper";
+import PanelContent from "../../meta/PanelContent";
+import {Warning} from "@phosphor-icons/react";
+
+export type CalloutPanelDefinition = {
+  type?: "warning",
+  title?: string,
+  description?: string
+}
+
+const CalloutPanel = (props: {definition: CalloutPanelDefinition}) => {
+  return (
+    <PanelWrapper>
+      <div className={"flex flex-row h-full w-full"}>
+        <div
+          className={"bg-yellow-500 aspect-square flex justify-center items-center"}
+        >
+          <Warning size={48} className={"text-zinc-900"} />
+        </div>
+
+        <PanelContent className={"flex-1 flex justify-start items-center"} padding={false}>
+          <div className={"px-6 py-5"}>
+            {props.definition.title && (
+              <h2 className={"text-lg font-semibold"}>
+                {props.definition.title}
+              </h2>
+            )}
+
+            {props.definition.description && (
+              <p className={"mt-1 text-sm"}>
+                {props.definition.description}
+              </p>
+            )}
+          </div>
+        </PanelContent>
+      </div>
+    </PanelWrapper>
+  );
+};
+
+export default CalloutPanel;

src/panels/_Panels.tsx

@@ -9,13 +9,14 @@ import {PanelDefinition} from "../types/LayoutConfig";
 import PanelWrapper from "../meta/PanelWrapper";
 import BildPanel from "./Bild/BildPanel";
 import MensaplanPanel from "./Mensaplan/MensaplanPanel";
+import CalloutPanel from "./Callout/CalloutPanel";
 
 /*
  * First, please claim a unique id for your panel here. Convention is that it is all lowercase, in snake-case to be
  * precise. So if you want to call your panel "My awesome Panel", please claim "my-awesome-panel". Add it by adding
  * `| "my-awesome-panel"` before the semicolon in the type below this comment.
  */
-export type PanelTypes = "fahrplan" | "bild";
+export type PanelTypes = "fahrplan" | "bild" | "mensaplan" | "callout";
 
 /*
  * Next, add your renderer. You'll get the definition that was written in the layout config as a prop. If you'd like to
@@ -26,6 +27,7 @@ export const PanelRenderers: {[panelType: string]: React.FC<any & {definition: P
   "fahrplan": FahrplanPanel,
   "bild": BildPanel,
   "mensaplan": MensaplanPanel,
+  "callout": CalloutPanel,
   "placeholder": () => (
     <PanelWrapper className={"flex flex-col items-center justify-center text-zinc-400"}>
       Dieses Panel wird noch entwickelt