Skip to content

Commit

Permalink
feat: popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@flagg2
flagg2 committed Jun 6, 2024
1 parent 2c0a19b commit 24c2d3d
Show file tree
Hide file tree
Showing 5 changed files with 509 additions and 67 deletions.
Binary file added bun.lockb
View file
Binary file not shown.
179 changes: 179 additions & 0 deletions components/popup.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import H2 from "./h2/content-h2.component";
import P from "./content-p/content-p.component";
import { Button } from "./button/button.component";
import Link from "next/link";
import styled, { css } from "styled-components";

export default function Popup() {
let [showPopup, setShowPopup] = useState(false);
useEffect(() => {
if (typeof window !== "undefined") {
if (window.localStorage.getItem("popup") !== "true") {
setShowPopup(true);
}
}
}, []);

// return null;
if (!showPopup) return null;

return createPortal(
<div
suppressHydrationWarning={true}
style={{
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.5)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 9999,
}}
>
<div
style={{
position: "relative",
width: "96%",
maxWidth: 606,
padding: 16,
backgroundColor: "#111320",
borderRadius: 8,
}}
>
<img
src="./assets/close-small.svg"
alt="close"
style={{
position: "absolute",
top: 16,
right: 16,
cursor: "pointer",
}}
onClick={() => {
setShowPopup(false);
}}
/>
<div
style={{
padding:
"clamp(1.563rem, 0.134rem + 4.571vi, 3.563rem) clamp(1.563rem, -1.964rem + 11.286vi, 6.5rem)",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 12,
}}
>
<img src="./assets/warning.svg" alt="warning" />
<h2
style={{
color: "white",
fontFamily: "FontOver",
fontSize: "19px",
fontWeight: "500",
lineHeight: "24.7px",
textAlign: "center",
}}
>
hydradx.io is migrating to Hydration.net
</h2>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 24,
}}
>
<P
style={{
color: "white",
marginBottom: 0,
fontWeight: 400,
fontSize: "16px",
textAlign: "center",
}}
>
As part of the rebranding, this app has moved to
app.hydration.net.
</P>
<P
style={{
color: "white",
marginBottom: 0,
fontWeight: 400,
fontSize: "16px",
}}
>
Open the app to transfer your settings.
</P>
</div>
</div>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginTop: 16,
padding: 26,
}}
>
<ButtonLink href="https://hydration.net">GO TO HYDRATION</ButtonLink>
<a href="https://app.hydration.net">
<Button>OPEN APP</Button>
</a>
</div>
</div>
</div>,
document.body
);
}

const buttonStyles = css`
cursor: crosshair;
background: transparent;
display: inline-block;
border-radius: 0.4rem;
padding: 12px 3.7rem;
font-family: "Chakra Petch";
font-style: normal;
font-weight: 500;
font-size: 1.4rem;
line-height: 150%;
letter-spacing: 0.105em;
text-transform: uppercase;
color: #ffffff;
transition: all 0.3s ease-out;
`;

const ButtonLink = styled.a`
${buttonStyles}
text-align: center;
text-transform: uppercase;
background: rgba(76, 213, 243, 0.12);
border: 1px solid #85d1ff;
color: #85d1ff;
&:hover {
background-color: rgba(1, 107, 172, 0.9);
color: #ffffff;
}
&:active {
background-color: #3192cd;
border: 1px solid #a6ddff;
color: #ffffff;
}
`;
136 changes: 69 additions & 67 deletions layouts/page/page.layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,88 @@
// Utils
import styled from "styled-components"
import styled from "styled-components";

// Components

import Header from "../../components/header/header.component"
import Footer from "../../components/footer/footer.component"
import Header from "../../components/header/header.component";
import Footer from "../../components/footer/footer.component";

// Types
import { INavItem } from "../../types/nav.types"
import { INavItem } from "../../types/nav.types";
import Popup from "../../components/popup";
export interface IProps {
children: React.ReactNode | React.ReactNode[]
children: React.ReactNode | React.ReactNode[];
}

const PageLayout = ({ children }: IProps) => {
const navItems: INavItem[] = [
// {
// label: "Start",
// href: "/",
// },
// {
// label: "Socials",
// href: "/#socials",
// },
{
label: "Docs",
href: "https://docs.hydradx.io/",
// hasIcon: true,
rel: "noopener noreferrer",
target: "_blank",
},
{
label: "Tokenomics",
href: "https://docs.hydradx.io/tokenomics",
// hasIcon: true,
rel: "noopener noreferrer",
target: "_blank",
},
{
label: "Github",
href: "https://github.com/galacticcouncil",
// hasIcon: true,
rel: "noopener noreferrer",
target: "_blank",
},
{
label: "Newsletter",
href: "https://hydradx.substack.com/",
// hasIcon: true,
rel: "noopener noreferrer",
target: "_blank",
},
]
const navItems: INavItem[] = [
// {
// label: "Start",
// href: "/",
// },
// {
// label: "Socials",
// href: "/#socials",
// },
{
label: "Docs",
href: "https://docs.hydradx.io/",
// hasIcon: true,
rel: "noopener noreferrer",
target: "_blank",
},
{
label: "Tokenomics",
href: "https://docs.hydradx.io/tokenomics",
// hasIcon: true,
rel: "noopener noreferrer",
target: "_blank",
},
{
label: "Github",
href: "https://github.com/galacticcouncil",
// hasIcon: true,
rel: "noopener noreferrer",
target: "_blank",
},
{
label: "Newsletter",
href: "https://hydradx.substack.com/",
// hasIcon: true,
rel: "noopener noreferrer",
target: "_blank",
},
];

// const cta = {
// label: "Contact us",
// href: "/#contact-us",
// width: "14.2rem",
// }
// const cta = {
// label: "Contact us",
// href: "/#contact-us",
// width: "14.2rem",
// }

return (
<PageLayoutContainer>
<Header
navItems={navItems}
// cta={cta}
/>
return (
<PageLayoutContainer>
<Header
navItems={navItems}
// cta={cta}
/>

<Main>{children}</Main>
<Main>{children}</Main>

<Footer />
</PageLayoutContainer>
)
}
<Footer />
<Popup />
</PageLayoutContainer>
);
};

export default PageLayout
export default PageLayout;

const PageLayoutContainer = styled.div`
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 9rem 2rem 0;
`
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 9rem 2rem 0;
`;

const Main = styled.main`
flex: 1;
`
flex: 1;
`;
5 changes: 5 additions & 0 deletions public/assets/close-small.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 24c2d3d

Please sign in to comment.