Implemented Bild Panel

src/index.css

@@ -8,3 +8,7 @@
     grid-template-rows: repeat(auto-fill, 45px);
     grid-gap: 30px;
 }
+
+.bg-lower-gradient {
+    background-image: linear-gradient(180deg, rgba(24, 24, 27, 0) 0%, rgba(24, 24, 27, 0.70) 60%, rgba(24, 24, 27, 1.00) 100%)
+}

src/panels/Bild.tsx

+import React from 'react';
+import PanelWrapper from "../meta/PanelWrapper";
+import classNames from "../util/classNames";
+import PanelContent from "../meta/PanelContent";
+
+export type BildPanelDefinition = {
+  url: string,
+  fit?: "fill" | "fit",
+  title?: string,
+  description?: string
+}
+
+const BildPanel = (props: {definition: BildPanelDefinition}) => {
+  return (
+    <PanelWrapper className={"relative"}>
+      <div
+        className={"absolute inset-0 h-full w-full bg-cover blur-lg backdrop-brightness-75"}
+        style={{backgroundImage: `url('${props.definition.url}')`}}
+      >
+      </div>
+
+      <div className={"absolute inset-0 h-full w-full flex"}>
+        <div
+          className={classNames(
+            "bg-no-repeat bg-center flex-1 relative",
+            (props.definition.fit === "fit") ? "bg-contain" : "bg-cover"
+          )}
+          style={{
+            backgroundImage: `url('${props.definition.url}')`
+          }}
+        >
+          {props.definition.title && (
+            <>
+              <div className={"absolute inset-0 w-full h-full bg-lower-gradient"}>
+              </div>
+
+              <PanelContent className={"absolute inset-0 w-full h-full flex flex-col justify-end"}>
+                <h2 className={"text-xl font-semibold"}>
+                  {props.definition.title}
+                </h2>
+
+                {props.definition.description && (
+                  <p className={"pr-6 leading-tight mt-1"}>
+                    {props.definition.description}
+                  </p>
+                )}
+              </PanelContent>
+            </>
+          )}
+        </div>
+      </div>
+    </PanelWrapper>
+  );
+};
+
+export default BildPanel;

src/panels/_Panels.tsx

@@ -6,13 +6,14 @@
 import React from "react";
 import FahrplanPanel from "./Fahrplan/FahrplanPanel";
 import {PanelDefinition} from "../types/LayoutConfig";
+import BildPanel from "./Bild";
 
 /*
  * 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";
+export type PanelTypes = "fahrplan" | "bild";
 
 /*
  * Next, add your renderer. You'll get the definition that was written in the layout config as a prop. If you'd like to
@@ -21,15 +22,7 @@ export type PanelTypes = "fahrplan";
  */
 export const PanelRenderers: {[panelType: string]: React.FC<any & {definition: PanelDefinition<any>}>} = {
   "fahrplan": FahrplanPanel,
-  "test": () => (
-    <h1>Test!</h1>
-  ),
-  "demo": () => (
-    <p>Demo!</p>
-  ),
-  "foobar": () => (
-    <p>FooBar!</p>
-  )
+  "bild": BildPanel
 };