Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: enhanced sources and boss banner #152

Merged
merged 2 commits into from
Nov 29, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Addition of boss banner (#151)
* chore(banner): add boss banner

* chore(version): updated bdp-ui patch fix
  • Loading branch information
0tuedon authored and Emmanuel-Develops committed Nov 29, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit bf233c40ca421e712ec9069941734130ace44fb7
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@
"prettier:fix": "prettier --write . --ignore-path .gitignore"
},
"dependencies": {
"@bitcoin-dev-project/bdp-ui": "^1.5.2",
"@chakra-ui/react": "^2.0.0",
"@elastic/elasticsearch": "^8.8.0",
"@elastic/react-search-ui": "1.20.2",
56 changes: 14 additions & 42 deletions src/components/Banner.tsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,20 @@
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { Banner } from "@bitcoin-dev-project/bdp-ui";

const BANNER_KEY = "FOSS-banner";

const Banner = () => {
const [isOpen, setIsOpen] = useState(false);

const handleClose = () => {
if (typeof window !== "undefined") {
sessionStorage.setItem(BANNER_KEY, "hidden");
}
setIsOpen(false);
};

useEffect(() => {
const banner_in_session = window.sessionStorage.getItem(BANNER_KEY);
if (banner_in_session === "hidden") {
setIsOpen(false);
} else {
setIsOpen(true);
}
}, []);

if (!isOpen) return null;
const BossBanner = () => {
return (
<div className="bg-orange-100 flex items-center w-full sticky top-0 z-[10] p-2">
<div className="flex flex-col grow items-center text-sm md:text-base text-gray-600 font-medium text-center">
<p className="">{`Start Your Career in Bitcoin Open Source`}</p>
<div className="flex gap-2 items-center">
<span>{`Development in 2024 `}</span>
<Link href="https://learning.chaincode.com/#FOSS" target="_blank">
<span className="uppercase text-custom-brightOrange-200 underline whitespace-nowrap">{`Apply Today!`}</span>
</Link>
</div>
</div>
<button
onClick={handleClose}
className="relative h-[18px] w-[18px] grid place-items-center rounded-full hover:bg-orange-300"
>
<Image src="/close_icon.svg" width={10} height={10} alt="close" />
</button>
<div className={`w-full bg-bdp-background sticky top-0`}>
<Banner
headingText="Start your career in bitcoin open source —"
linkText="APPLY TODAY"
linkTo="https://learning.chaincode.com/#BOSS"
hasBoss
styles={{
container: "data-[has-heading='true']:h-auto",
bannerInfoContainer: "py-2",
}}
/>
</div>
);
};

export default Banner;
export default BossBanner;
4 changes: 3 additions & 1 deletion src/components/navBar/NavBar.tsx
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@ import useSearchQuery from "@/hooks/useSearchQuery";
import { removeMarkdownCharacters } from "@/utils/elastic-search-ui-functions";
import { useTheme } from "@/context/Theme";
import { Tooltip } from "@chakra-ui/react";
import BossBanner from "../Banner";

function ThemeSwitcher() {
const { theme, toggleTheme } = useTheme();
@@ -128,10 +129,11 @@ const NavBar = () => {

return (
<nav
className={`navBar pointer-events-auto fixed top-0 text-left md:text-center w-full text-xs md:text-base 2xl:text-xl leading-normal z-20 ${
className={`navBar pointer-events-auto fixed top-0 text-left md:text-center w-full text-xs md:text-base 2xl:text-xl leading-normal z-40 ${
hiddenHomeFacet ? "bg-custom-hover-state shadow-md" : ""
}`}
>
{!hiddenHomeFacet && <BossBanner />}
<div
className={`flex items-center justify-between p-3 md:p-5 2xl:p-7 w-full max-w-[1920px] m-auto ${
!hiddenHomeFacet ? "flex-row-reverse" : ""
1 change: 1 addition & 0 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import "@fontsource/geist-sans/600.css";
import "@fontsource/geist-sans/700.css";
import "@fontsource/geist-sans/800.css";

import "@bitcoin-dev-project/bdp-ui/styles.css";
import "../styles/globals.css";
import "../styles/custom.scss";
import "../components/customResults/styles.results.scss";