<Blogheader />

 folder health-blog-header:---

import { border, padding, flex, gap, screen, margin } from "@ebh/capsule/theme";

import { Text } from "@ebh/capsule";

import { THEME_COLORS } from "../../../theme/color";

import { useScreen } from "@ebh/capsule/hooks";

import { useNavigate } from "react-router";

import { ArrowForwardIcon, ArrowChevronRight } from "@ebh/capsule/icons";

export default function Blogheader() {

const isPhone = !useScreen("md");

const navigate = useNavigate();

const handleNavigateBack = () => {

navigate(-1);

};

return (

<>

<div

css={[

flex("row", "justify-start", "items-center"),

gap(2),

padding(3, "x"),

padding(3, "y"),

border(2, "bottom"),

{

position: "sticky",

top: 0,

backgroundColor: THEME_COLORS["white"],

zIndex: 10,

},

screen(

"md",

border(0, "bottom"),

padding(20, "x"),

padding(10, "y")

),

]}

>

{isPhone && (

<ArrowForwardIcon

css={{ transform: "rotate(180deg)", cursor: "pointer" }}

onClick={handleNavigateBack}

/>

)}

{isPhone ? (

<div css={[flex("column", "justify-between")]}>

<Text variant="header-3">Health Blogs</Text>

</div>

) : (

<div>

<div css={[flex("row"), margin(5, "bottom"), gap(2)]}>

<div css={[padding(1, "y")]}>

<Text variant="body-1" color="primary-500">

Corporate Benefits

</Text>

</div>

<div>

<ArrowChevronRight />

</div>

<div css={[padding(1, "y")]}>

<Text variant="body-2" color="gray-300">

Health library

</Text>

</div>

</div>

<div css={[flex("column", "justify-between")]}>

<Text variant="header-1" color="gray-600">Health library</Text>

<Text variant="sub-heading-1" color="gray-300">

All your helpful content at one place

</Text>

</div>

</div>

)}

</div>

{isPhone && (

<div css={[padding(5, "x"), padding(3, "y")]}>

<Text variant="header-1">Health library</Text>

<Text variant="sub-heading-1">

All your helpful content at one place

</Text>

</div>

)}

</>

);

}