87 lines
1.8 KiB
TypeScript
87 lines
1.8 KiB
TypeScript
import { Constants } from "core/utils/utils";
|
|
import styles from "./styles.module.css";
|
|
import { useSelector } from "react-redux";
|
|
import { bannerUrl } from "core/reducers/appSlice";
|
|
|
|
export default function MyBanner({
|
|
title,
|
|
subtitle,
|
|
headerBar,
|
|
}: {
|
|
title: string;
|
|
subtitle?: string;
|
|
headerBar?: React.ReactNode;
|
|
}) {
|
|
const appBannerUrl = useSelector(bannerUrl);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
}}
|
|
>
|
|
{appBannerUrl !== null ? (
|
|
<img
|
|
src={`${Constants.STATIC_CONTENT_ADDRESS}${
|
|
appBannerUrl || Constants.DEMO_BANNER_URL
|
|
}`}
|
|
alt="banner"
|
|
style={{
|
|
height: 228,
|
|
width: "100%",
|
|
objectFit: "cover",
|
|
userSelect: "none",
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
style={{
|
|
height: 228,
|
|
backgroundColor: "#000",
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<div className={styles.gradientContainer}></div>
|
|
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
zIndex: 1,
|
|
width: "100%",
|
|
height: 228,
|
|
}}
|
|
>
|
|
{headerBar}
|
|
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
paddingLeft: 24,
|
|
paddingRight: 24,
|
|
bottom: 24,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{subtitle && (
|
|
<div style={{ fontSize: 12, color: "#A4A4A4" }}>{subtitle}</div>
|
|
)}
|
|
<div style={{ fontWeight: "bold", fontSize: 36, color: "#fff" }}>
|
|
{title}
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: 2,
|
|
marginTop: 16,
|
|
background: "rgba(253, 253, 253, 0.3)",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|