forked from prismicio-community/nextjs-starter-prismic-blog
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Header.tsx
31 lines (29 loc) · 896 Bytes
/
Header.tsx
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
import { Container, StyledContainer } from "@nextui-org/react";
import Image from "next/image";
import { IHeaderProps } from "./interfaces";
import NavigationBar from "./NavigationBar";
const Header: React.FC<IHeaderProps> = ({ navItems, heroImage, lqipImage }) => {
return (
<>
<StyledContainer css={{ img: { transition: "0.3s ease" } }}>
<Image
src={heroImage.url ?? ""}
layout="responsive"
alt={heroImage.alt ?? ""}
width={heroImage.dimensions?.width}
height={heroImage.dimensions?.height}
blurDataURL={lqipImage}
placeholder="blur"
/>
</StyledContainer>
<Container
fluid
justify="center"
css={{ height: "100vh", position: "absolute", top: 0 }}
>
<NavigationBar navItems={navItems} />
</Container>
</>
);
};
export default Header;