Skip to content

Commit

Permalink
creating banner for homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
TalBenAvi committed Mar 18, 2024
1 parent 18039fe commit 8ede4da
Show file tree
Hide file tree
Showing 3 changed files with 230 additions and 170 deletions.
284 changes: 144 additions & 140 deletions workspaces/website/src/pages/(components)/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import { NavbarHeading } from "@ui/Layout/Navbar/NavbarHeading";
import { Flex } from "@chakra-ui/react";
import { getComputedLinkData } from "src/utils/utils";
import { MainSearch } from "./MainSearch";
import React, { Fragment } from "react";
import React, { Fragment, useState } from "react";
import { Box, ButtonGroup } from "@chakra-ui/react";
import { IconButton } from "@ui/IconButton";
import { SiDiscord, SiGithub, SiTwitter, SiYoutube } from "react-icons/si";
import { SEOTexts } from "@starknet-io/cms-data/src/seo";
import { usePageContext } from "src/renderer/PageContextProvider";
import Tabs from "@chakra-ui/pro-theme/src/components/tabs";
import NavbarBanner from "./NavbarBanner/NavbarBanner";

export interface Props {
readonly mainMenu: MainMenu;
Expand All @@ -34,161 +34,165 @@ export default function Navbar({
languageCenterSeo,
}: Props) {
const { locale, urlPathname: pathname } = usePageContext();
const [isOpen, setIsOpen] = useState<boolean>(true);

return (
<NavbarContainer>
<NavBar
search={
<div>
<MainSearch env={env} seo={searchSEO} />
</div>
}
seo={languageCenterSeo}
desktopNavItems={mainMenu?.items?.map(
(mainMenuItem, mainMenuItemIndex) => (
<MenuItemWithDropdown
key={`${mainMenuItemIndex}-${pathname}`}
label={mainMenuItem.title}
>
<Flex
// bg="red"
maxW="900px"
mx="auto"
gap="48px"
// display="block"
// sx={{ columnCount: [1, 2, 3, 4] }}
<>
<NavbarContainer>
<NavBar
search={
<div>
<MainSearch env={env} seo={searchSEO} />
</div>
}
seo={languageCenterSeo}
desktopNavItems={mainMenu?.items?.map(
(mainMenuItem, mainMenuItemIndex) => (
<MenuItemWithDropdown
key={`${mainMenuItemIndex}-${pathname}`}
label={mainMenuItem.title}
>
{mainMenuItem.columns?.length &&
mainMenuItem.columns?.map((column, columnIndex) => (
<Box key={columnIndex}>
{column.blocks?.map((block, blockIndex) => {
const blocks = block.items?.map((item, itemIndex) => {
const { href, label } = getComputedLinkData(
locale,
item
);
<Flex
// bg="red"
maxW="900px"
mx="auto"
gap="48px"
// display="block"
// sx={{ columnCount: [1, 2, 3, 4] }}
>
{mainMenuItem.columns?.length &&
mainMenuItem.columns?.map((column, columnIndex) => (
<Box key={columnIndex}>
{column.blocks?.map((block, blockIndex) => {
const blocks = block.items?.map((item, itemIndex) => {
const { href, label } = getComputedLinkData(
locale,
item
);

if (!href) {
return <span key={itemIndex}>{label}</span>;
}

if (!href) {
return <span key={itemIndex}>{label}</span>;
}
if (item.custom_icon) {
return (
<IconButton
// isExternal={item.custom_external_link != null}
href={href}
key={itemIndex}
as="a"
aria-label={label!}
icon={
item.custom_icon === "SiDiscord" ? (
<SiDiscord fontSize="1.25rem" />
) : item.custom_icon === "SiGithub" ? (
<SiGithub fontSize="1.25rem" />
) : item.custom_icon === "SiTwitter" ? (
<SiTwitter fontSize="1.25rem" />
) : item.custom_icon === "SiYoutube" ? (
<Box ml="-16px">
<SiYoutube fontSize="1.25rem" />
</Box>
) : (
<React.Fragment />
)
}
/>
);
}

if (item.custom_icon) {
return (
<IconButton
// isExternal={item.custom_external_link != null}
href={href}
<NavBarLink
isExternal={item.custom_external_link != null}
key={itemIndex}
as="a"
aria-label={label!}
icon={
item.custom_icon === "SiDiscord" ? (
<SiDiscord fontSize="1.25rem" />
) : item.custom_icon === "SiGithub" ? (
<SiGithub fontSize="1.25rem" />
) : item.custom_icon === "SiTwitter" ? (
<SiTwitter fontSize="1.25rem" />
) : item.custom_icon === "SiYoutube" ? (
<Box ml="-16px">
<SiYoutube fontSize="1.25rem" />
</Box>
) : (
<React.Fragment />
)
}
/>
href={href}
>
{label}
</NavBarLink>
);
}
});

return (
<NavBarLink
isExternal={item.custom_external_link != null}
key={itemIndex}
href={href}
>
{label}
</NavBarLink>
const iconsOnly = block.items?.every(
(b) => b.custom_icon
);
});

const iconsOnly = block.items?.every(
(b) => b.custom_icon
);

return (
<Box mb="24px" key={blockIndex}>
{block.title && (
<NavbarHeading>{block.title}</NavbarHeading>
)}
{iconsOnly ? (
<ButtonGroup variant="ghost" mx="16px">
{blocks}
</ButtonGroup>
) : (
blocks
)}
</Box>
);
})}
</Box>
))}
</Flex>
</MenuItemWithDropdown>
)
)}
mobileNavItems={
<NavAccordian.Root>
{mainMenu?.items?.map((mainMenuItem, mainMenuItemIndex) => {
return (
<NavAccordian.Item key={mainMenuItemIndex}>
<NavAccordian.Button title={mainMenuItem.title} />
<NavAccordian.Panel>
{mainMenuItem.columns?.length &&
mainMenuItem.columns?.map((column, columnIndex) => (
<Box key={columnIndex}>
{column.blocks?.map((block, blockIndex) => (
<Fragment key={blockIndex}>
return (
<Box mb="24px" key={blockIndex}>
{block.title && (
<NavbarHeading pt="24px">
{block.title}
</NavbarHeading>
<NavbarHeading>{block.title}</NavbarHeading>
)}
{iconsOnly ? (
<ButtonGroup variant="ghost" mx="16px">
{blocks}
</ButtonGroup>
) : (
blocks
)}
</Box>
);
})}
</Box>
))}
</Flex>
</MenuItemWithDropdown>
)
)}
mobileNavItems={
<NavAccordian.Root>
{mainMenu?.items?.map((mainMenuItem, mainMenuItemIndex) => {
return (
<NavAccordian.Item key={mainMenuItemIndex}>
<NavAccordian.Button title={mainMenuItem.title} />
<NavAccordian.Panel>
{mainMenuItem.columns?.length &&
mainMenuItem.columns?.map((column, columnIndex) => (
<Box key={columnIndex}>
{column.blocks?.map((block, blockIndex) => (
<Fragment key={blockIndex}>
{block.title && (
<NavbarHeading pt="24px">
{block.title}
</NavbarHeading>
)}

{block.items?.map((item, itemIndex) => {
const { href, label } = getComputedLinkData(
locale,
item
);
{block.items?.map((item, itemIndex) => {
const { href, label } = getComputedLinkData(
locale,
item
);

if (!href) {
return <span key={itemIndex}>{label}</span>;
}
if (!href) {
return <span key={itemIndex}>{label}</span>;
}

return (
<NavBarLink
isExternal={
item.custom_external_link != null
}
key={itemIndex}
href={href}
>
{label}
{/* {item.custom_icon && (
return (
<NavBarLink
isExternal={
item.custom_external_link != null
}
key={itemIndex}
href={href}
>
{label}
{/* {item.custom_icon && (
<Icon as={item.custom_icon } />
)} */}
</NavBarLink>
);
})}
</Fragment>
))}
</Box>
))}
</NavAccordian.Panel>
</NavAccordian.Item>
);
})}
</NavAccordian.Root>
}
/>
</NavbarContainer>
</NavBarLink>
);
})}
</Fragment>
))}
</Box>
))}
</NavAccordian.Panel>
</NavAccordian.Item>
);
})}
</NavAccordian.Root>
}
/>
{isOpen && <NavbarBanner setIsOpen={setIsOpen} />}
</NavbarContainer>
</>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Center, Text, Button, IconButton } from "@chakra-ui/react";
import CloseIcon from "@ui/ProvisionsPopup/CloseIcon/CloseIcon";
import { useState } from "react";
const text =
"Starknet is the secure scaling technology bringing Ethereum’s benefits to the world.";

interface NavbarBannerProps {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
const NavbarBanner = ({ setIsOpen }: NavbarBannerProps) => {
return (
<Center
height={12}
bgColor={"snNavy"}
display="flex"
gap={6}
zIndex={10}
_dark={{ bgColor: "#A4A4EA" }}
>
<Center margin="auto" gap={6}>
<Text color="white" _dark={{ color: "snNavy" }}>
{text}
</Text>
<Button
px={4}
py={1}
borderRadius={8}
bgColor="white"
color="snNavy"
_dark={{
color: "white",
bgColor: "darkMode.card",
borderColor: "darkMode.card",
}}
>
See more
</Button>
</Center>
<IconButton
aria-label="Close"
_dark={{
color: "snNavy",
bgColor: "transparent",
borderColor: "transparent",
_hover: { bgColor: "transparent" },
}}
onClick={() => setIsOpen((prev) => !prev)}
>
<CloseIcon />
</IconButton>
</Center>
);
};

export default NavbarBanner;
Loading

0 comments on commit 8ede4da

Please sign in to comment.