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;