UI: add back button to header

This commit is contained in:
Johannes Kirschbauer
2024-12-11 11:33:15 +01:00
parent 91d713e5ee
commit 7bb8c10943

View File

@@ -1,14 +1,17 @@
import { JSX } from "solid-js"; import { JSX } from "solid-js";
import { Typography } from "../components/Typography"; import { Typography } from "../components/Typography";
import { BackButton } from "../components/BackButton";
interface HeaderProps { interface HeaderProps {
title: string; title: string;
toolbar?: JSX.Element; toolbar?: JSX.Element;
showBack?: boolean;
} }
export const Header = (props: HeaderProps) => { export const Header = (props: HeaderProps) => {
return ( return (
<div class="navbar border-b px-6 py-4 border-def-3"> <div class="navbar border-b px-6 py-4 border-def-3">
<div class="flex-none"> <div class="flex-none">
{props.showBack && <BackButton />}
<span class="tooltip tooltip-bottom lg:hidden" data-tip="Menu"> <span class="tooltip tooltip-bottom lg:hidden" data-tip="Menu">
<label <label
class="btn btn-square btn-ghost drawer-button" class="btn btn-square btn-ghost drawer-button"
@@ -19,7 +22,7 @@ export const Header = (props: HeaderProps) => {
</span> </span>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<Typography hierarchy="title" size="m" weight="medium"> <Typography hierarchy="title" size="m" weight="medium" class="">
{props.title} {props.title}
</Typography> </Typography>
</div> </div>