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>
  );
};