# All files / Navbar index.tsx

0% Statements 0/6
0% Branches 0/5
0% Functions 0/1
0% Lines 0/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52

     import { AppBar, Toolbar, Typography } from "@mui/material";
    import { Icon } from "../Icon";
    import { colors } from "../../theme/colors";
    import React from "react";
    interface Props {
      onBackIconClick: () => void;
      backIconColor?: string;
      navbarStyle?: React.CSSProperties;
      title: string;
      titleStyle?: React.CSSProperties;
      actions?: React.ReactNode;
    }

    export const Navbar = ({
      onBackIconClick,
      backIconColor = "white",
      navbarStyle = {
        background: colors.accent["500"],
        width: "100%",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        boxShadow: "none",
      },
      titleStyle = {
        color: "white",
      },
      title,
      actions,
    }: Props) => {
      return (
        <AppBar position="static" style={{ boxShadow: "none" }}>
          <Toolbar style={navbarStyle}>
            <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
              <Icon
                name="ArrowLeft"
                color={backIconColor}
                onClick={onBackIconClick}
                style={{ cursor: "pointer" }}
                size={20}
              />
              <Typography variant="h6" style={titleStyle}>
                {title}
              </Typography>
            </div>

            {actions && actions}
          </Toolbar>
        </AppBar>
      );
    };