import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import styled from "styled-components";
import { ThemeProvider } from "styled-components";
import Nav from "./index";
import Button from "../button";
import T from "../typography";
import { DeviceProvider } from "../../../contexts/device";
import ScreenView from "../../screen-view";
import DropdownIcon from "../dropdown-icon";
import equilibriumTheme from "../theme/equilibrium.theme";
import genshiroTheme from "../theme/genshiro.theme";
const BurgerLinks = styled.div `
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding-bottom: 16px;

  a {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    height: 40px;
    margin-left: 16px;
  }

  a:nth-child(n + 5) {
    height: 24px;
  }

  .delimiter {
    margin: 10px 16px;
    width: calc(100% - 32px);
    height: 1px;
    background: rgb(204, 218, 233);
  }

  * {
    white-space: nowrap;
  }
`;
const BlockGray = styled.div `
  width: 100vw;
  height: 100vh;
  background: gray;
`;
export default {
    title: "New/Navigation",
};
export const Dex = () => {
    const [openedBurger, setOpenedBurger] = useState(false);
    const [lang, setLang] = useState("en");
    return (_jsx(ThemeProvider, { theme: equilibriumTheme, children: _jsxs(Nav, { children: [_jsx(Nav.Space, { right: "52px" }), _jsx(Nav.EquilibriumLogo, {}), _jsx(Nav.Space, { right: "40px" }), _jsx(Nav.Link, { active: true, children: "Link 1" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { children: "Link 2" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { children: "Link 3" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { children: "Link 4" }), _jsx(Nav.Space, { right: "auto" }), _jsx(Nav.Langs, { selected: lang, handleSelectLang: setLang })] }) }));
};
export const Equilibrium = () => {
    const [openedBurger, setOpenedBurger] = useState(false);
    const [lang, setLang] = useState("en");
    const colors = equilibriumTheme.new?.colors;
    return (_jsx(ThemeProvider, { theme: equilibriumTheme, children: _jsxs(DeviceProvider, { children: [_jsx(ScreenView.Large, { children: _jsxs(Nav, { children: [_jsx(Nav.EquilibriumLogo, {}), _jsx(Nav.Space, { right: "40px" }), _jsx(Nav.Link, { active: true, children: "EQ Token" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { children: "Careers" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { children: "About us" }), _jsx(Nav.Space, { right: "auto" }), _jsx(Nav.Langs, { selected: lang, handleSelectLang: setLang }), _jsx(Nav.Space, { right: "120px" }), _jsx(Nav.Link, { style: { color: colors?.primary900 }, children: "Fluid xDOT" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { style: { color: colors?.primary900 }, children: "Crowdloan" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { style: { color: colors?.primary900 }, children: "Genshiro" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Burger, { opened: openedBurger, handleClickIcon: () => setOpenedBurger(!openedBurger), handleClickOutside: () => setOpenedBurger(false), children: _jsxs(BurgerLinks, { children: [_jsx("a", { href: "#", children: _jsx(T.B14, { children: "NUT/EQ token swap" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { children: "Tokenomy" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { children: "Whitepaper" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { children: "Knowledge base" }) }), _jsx("div", { className: "delimiter" }), _jsx("a", { href: "#", children: _jsx(T.G12, { children: "Twitter" }) }), _jsx("a", { href: "#", children: _jsx(T.G12, { children: "Telegram" }) }), _jsx("a", { href: "#", children: _jsx(T.G12, { children: "Medium" }) }), _jsx("a", { href: "#", children: _jsx(T.G12, { children: "Github" }) }), _jsx("a", { href: "#", children: _jsx(T.G12, { children: "Blog" }) })] }) })] }) }), _jsx(ScreenView.NotLarge, { children: _jsxs(Nav, { children: [_jsx(Nav.EquilibriumLogo, {}), _jsx(Nav.Space, { right: "auto" }), _jsx(Nav.Burger, { opened: openedBurger, handleClickIcon: () => setOpenedBurger(!openedBurger), handleClickOutside: () => setOpenedBurger(false), children: _jsxs(Nav.Mobile, { children: [_jsxs(Nav.Mobile.Links, { children: [_jsx("a", { href: "#", children: _jsx(T.B14, { children: "EQ token" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { children: "Careers" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { children: "About us" }) }), _jsx(Nav.Space, { top: "20px" }), _jsx("a", { href: "#", children: _jsx(T.B14, { children: "Tokenomy" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { children: "NUT/EQ token swap" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { children: "Knowledge base" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { children: "Whitepaper" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { style: { color: colors?.primary900 }, children: "Fluid xDOT" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { style: { color: colors?.primary900 }, children: "Crowdloan" }) }), _jsx("a", { href: "#", children: _jsx(T.B14, { style: { color: colors?.primary900 }, children: "Genshiro" }) })] }), _jsx(Nav.MobileLangs, { selected: lang, handleSelectLang: setLang })] }) })] }) }), _jsx(BlockGray, {})] }) }));
};
export const Genshiro = () => {
    const [openedBurger, setOpenedBurger] = useState(false);
    const [openedWallets, setOpenedwallets] = useState(false);
    const [lang, setLang] = useState("en");
    return (_jsx(ThemeProvider, { theme: genshiroTheme, children: _jsxs(Nav, { children: [_jsx(Nav.Space, { right: "52px" }), _jsx(Nav.GenshiroLogo, {}), _jsx(Nav.Space, { right: "40px" }), _jsx(Nav.Link, { active: true, children: "Link 1" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { children: "Link 2" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { children: "Link 3" }), _jsx(Nav.Space, { right: "24px" }), _jsx(Nav.Link, { children: "Link 4" }), _jsx(Nav.Space, { right: "24px" }), _jsxs(Nav.Link, { style: { display: "flex", alignItems: "center" }, children: [_jsx(Nav.EquilibriumMonochromeLogo, {}), _jsx(Nav.Space, { right: "10px" }), "Equilibrium"] }), _jsx(Nav.Space, { right: "auto" }), _jsx(Nav.Langs, { selected: lang, handleSelectLang: setLang }), _jsx(Nav.Space, { right: "24px" }), _jsx(Button, { label: "Connect wallet" }), _jsx(Nav.Space, { right: "24px" }), _jsxs(DropdownIcon, { icon: _jsx(DropdownIcon.WalletIcon, { opened: openedWallets }), opened: openedWallets, handleClickIcon: () => setOpenedwallets(!openedWallets), handleClickOutside: () => setOpenedwallets(false), children: [_jsx(T, { children: "item 1" }), _jsx(T, { children: "item 2" }), _jsx(T, { children: "item 3" }), _jsx(T, { children: "item 4" })] })] }) }));
};
//# sourceMappingURL=navigation.stories.js.map