412 lines
13 KiB
TypeScript
412 lines
13 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
|
|
import { useSnapshot } from "valtio";
|
|
import { useRouter } from "next/router";
|
|
import { FolderOpen, X, ArrowUpRight, BookOpen } from "phosphor-react";
|
|
|
|
import Stack from "./Stack";
|
|
import Logo from "./Logo";
|
|
import Button from "./Button";
|
|
import Flex from "./Flex";
|
|
import Container from "./Container";
|
|
import Box from "./Box";
|
|
import ThemeChanger from "./ThemeChanger";
|
|
import state from "../state";
|
|
import Heading from "./Heading";
|
|
import Text from "./Text";
|
|
import Spinner from "./Spinner";
|
|
import truncate from "../utils/truncate";
|
|
import ButtonGroup from "./ButtonGroup";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "./Dialog";
|
|
import PanelBox from "./PanelBox";
|
|
import { templateFileIds } from "../state/constants";
|
|
import { styled } from "../stitches.config";
|
|
|
|
const ImageWrapper = styled(Flex, {
|
|
position: "relative",
|
|
mt: "$2",
|
|
mb: "$10",
|
|
svg: {
|
|
// fill: "red",
|
|
".angle": {
|
|
fill: "$text",
|
|
},
|
|
":not(.angle)": {
|
|
stroke: "$text",
|
|
},
|
|
},
|
|
});
|
|
|
|
const Navigation = () => {
|
|
const router = useRouter();
|
|
const snap = useSnapshot(state);
|
|
const slug = router.query?.slug;
|
|
const gistId = Array.isArray(slug) ? slug[0] : null;
|
|
|
|
return (
|
|
<Box
|
|
as="nav"
|
|
css={{
|
|
display: "flex",
|
|
backgroundColor: "$mauve1",
|
|
borderBottom: "1px solid $mauve6",
|
|
position: "relative",
|
|
zIndex: 2003,
|
|
height: "60px",
|
|
}}
|
|
>
|
|
<Container
|
|
css={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Flex
|
|
css={{
|
|
flex: 1,
|
|
alignItems: "center",
|
|
borderRight: "1px solid $colors$mauve6",
|
|
py: "$3",
|
|
pr: "$4",
|
|
}}
|
|
>
|
|
<Link href={gistId ? `/develop/${gistId}` : "/develop"} passHref>
|
|
<Box
|
|
as="a"
|
|
css={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
color: "$textColor",
|
|
}}
|
|
>
|
|
<Logo width="32px" height="32px" />
|
|
</Box>
|
|
</Link>
|
|
<Flex
|
|
css={{
|
|
ml: "$5",
|
|
flexDirection: "column",
|
|
gap: "1px",
|
|
}}
|
|
>
|
|
{snap.loading ? (
|
|
<Spinner />
|
|
) : (
|
|
<>
|
|
<Heading css={{ lineHeight: 1 }}>
|
|
{snap.files?.[0]?.name || "XRPL Hooks"}
|
|
</Heading>
|
|
<Text
|
|
css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}
|
|
>
|
|
{snap.files.length > 0 ? "Gist: " : "Builder"}
|
|
{snap.files.length > 0 && (
|
|
<Link
|
|
href={`https://gist.github.com/${snap.gistOwner || ""}/${
|
|
snap.gistId || ""
|
|
}`}
|
|
passHref
|
|
>
|
|
<Text
|
|
as="a"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
css={{ color: "$mauve12" }}
|
|
>
|
|
{`${snap.gistOwner || "-"}/${truncate(
|
|
snap.gistId || ""
|
|
)}`}
|
|
</Text>
|
|
</Link>
|
|
)}
|
|
</Text>
|
|
</>
|
|
)}
|
|
</Flex>
|
|
{router.isReady && (
|
|
<ButtonGroup css={{ marginLeft: "auto" }}>
|
|
<Dialog
|
|
open={snap.mainModalOpen}
|
|
onOpenChange={(open) => (state.mainModalOpen = open)}
|
|
>
|
|
<DialogTrigger asChild>
|
|
<Button outline>
|
|
<FolderOpen size="15px" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent
|
|
css={{
|
|
display: "flex",
|
|
maxWidth: "1080px",
|
|
width: "80vw",
|
|
maxHeight: "80%",
|
|
backgroundColor: "$mauve1 !important",
|
|
overflowY: "auto",
|
|
background: "black",
|
|
p: 0,
|
|
}}
|
|
>
|
|
<Flex
|
|
css={{
|
|
flexDirection: "column",
|
|
height: "100%",
|
|
"@md": {
|
|
flexDirection: "row",
|
|
height: "100%",
|
|
},
|
|
}}
|
|
>
|
|
<Flex
|
|
css={{
|
|
borderBottom: "1px solid $colors$mauve5",
|
|
width: "100%",
|
|
minWidth: "240px",
|
|
flexDirection: "column",
|
|
p: "$7",
|
|
backgroundColor: "$mauve2",
|
|
"@md": {
|
|
width: "30%",
|
|
maxWidth: "300px",
|
|
borderBottom: "0px",
|
|
borderRight: "1px solid $colors$mauve5",
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle
|
|
css={{
|
|
textTransform: "uppercase",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "$3",
|
|
fontSize: "$xl",
|
|
lineHeight: "$one",
|
|
fontWeight: "$bold",
|
|
}}
|
|
>
|
|
<Logo width="48px" height="48px" /> XRPL Hooks Builder
|
|
</DialogTitle>
|
|
<DialogDescription as="div">
|
|
<Text
|
|
css={{
|
|
display: "inline-flex",
|
|
color: "inherit",
|
|
my: "$5",
|
|
mb: "$7",
|
|
}}
|
|
>
|
|
Hooks add smart contract functionality to the XRP
|
|
Ledger.
|
|
</Text>
|
|
<Flex
|
|
css={{ flexDirection: "column", gap: "$2", mt: "$2" }}
|
|
>
|
|
<Text
|
|
css={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "$3",
|
|
color: "$purple11",
|
|
"&:hover": {
|
|
color: "$purple12",
|
|
},
|
|
"&:focus": {
|
|
outline: 0,
|
|
},
|
|
}}
|
|
as="a"
|
|
rel="noreferrer noopener"
|
|
target="_blank"
|
|
href="https://github.com/XRPL-Labs/xrpld-hooks"
|
|
>
|
|
<ArrowUpRight size="15px" /> Hooks Github
|
|
</Text>
|
|
|
|
<Text
|
|
css={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "$3",
|
|
color: "$purple11",
|
|
"&:hover": {
|
|
color: "$purple12",
|
|
},
|
|
"&:focus": {
|
|
outline: 0,
|
|
},
|
|
}}
|
|
as="a"
|
|
rel="noreferrer noopener"
|
|
target="_blank"
|
|
href="https://xrpl-hooks.readme.io/v2.0/docs"
|
|
>
|
|
<ArrowUpRight size="15px" /> Hooks documentation
|
|
</Text>
|
|
<Text
|
|
css={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "$3",
|
|
color: "$purple11",
|
|
"&:hover": {
|
|
color: "$purple12",
|
|
},
|
|
"&:focus": {
|
|
outline: 0,
|
|
},
|
|
}}
|
|
as="a"
|
|
rel="noreferrer noopener"
|
|
target="_blank"
|
|
href="https://xrpl.org/docs.html"
|
|
>
|
|
<ArrowUpRight size="15px" /> XRPL documentation
|
|
</Text>
|
|
</Flex>
|
|
</DialogDescription>
|
|
</Flex>
|
|
|
|
<Flex
|
|
css={{
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr",
|
|
gridTemplateRows: "max-content",
|
|
flex: 1,
|
|
p: "$7",
|
|
pb: "$16",
|
|
gap: "$3",
|
|
alignItems: "normal",
|
|
flexWrap: "wrap",
|
|
backgroundColor: "$mauve1",
|
|
"@md": {
|
|
gridTemplateColumns: "1fr 1fr",
|
|
gridTemplateRows: "max-content",
|
|
},
|
|
"@lg": {
|
|
gridTemplateColumns: "1fr 1fr 1fr",
|
|
gridTemplateRows: "max-content",
|
|
},
|
|
}}
|
|
>
|
|
{Object.values(templateFileIds).map((template) => (
|
|
<PanelBox
|
|
key={template.id}
|
|
as="a"
|
|
href={`/develop/${template.id}`}
|
|
>
|
|
<ImageWrapper>{template.icon()}</ImageWrapper>
|
|
<Heading>{template.name}</Heading>
|
|
|
|
<Text>{template.description}</Text>
|
|
</PanelBox>
|
|
))}
|
|
</Flex>
|
|
</Flex>
|
|
<DialogClose asChild>
|
|
<Box
|
|
css={{
|
|
position: "absolute",
|
|
top: "$1",
|
|
right: "$1",
|
|
cursor: "pointer",
|
|
background: "$mauve1",
|
|
display: "flex",
|
|
borderRadius: "$full",
|
|
p: "$1",
|
|
}}
|
|
>
|
|
<X size="20px" />
|
|
</Box>
|
|
</DialogClose>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<ThemeChanger />
|
|
</ButtonGroup>
|
|
)}
|
|
</Flex>
|
|
<Flex
|
|
css={{
|
|
flexWrap: "nowrap",
|
|
marginLeft: "$4",
|
|
overflowX: "scroll",
|
|
"&::-webkit-scrollbar": {
|
|
height: 0,
|
|
background: "transparent",
|
|
},
|
|
scrollbarColor: "transparent",
|
|
scrollbarWidth: "none",
|
|
}}
|
|
>
|
|
<Stack
|
|
css={{
|
|
ml: "$4",
|
|
gap: "$3",
|
|
flexWrap: "nowrap",
|
|
alignItems: "center",
|
|
marginLeft: "auto",
|
|
}}
|
|
>
|
|
<ButtonGroup>
|
|
<Link
|
|
href={gistId ? `/develop/${gistId}` : "/develop"}
|
|
passHref
|
|
shallow
|
|
>
|
|
<Button
|
|
as="a"
|
|
outline={!router.pathname.includes("/develop")}
|
|
uppercase
|
|
>
|
|
Develop
|
|
</Button>
|
|
</Link>
|
|
<Link
|
|
href={gistId ? `/deploy/${gistId}` : "/deploy"}
|
|
passHref
|
|
shallow
|
|
>
|
|
<Button
|
|
as="a"
|
|
outline={!router.pathname.includes("/deploy")}
|
|
uppercase
|
|
>
|
|
Deploy
|
|
</Button>
|
|
</Link>
|
|
<Link
|
|
href={gistId ? `/test/${gistId}` : "/test"}
|
|
passHref
|
|
shallow
|
|
>
|
|
<Button
|
|
as="a"
|
|
outline={!router.pathname.includes("/test")}
|
|
uppercase
|
|
>
|
|
Test
|
|
</Button>
|
|
</Link>
|
|
</ButtonGroup>
|
|
<Link href="https://xrpl-hooks.readme.io/v2.0" passHref>
|
|
<a target="_blank" rel="noreferrer noopener">
|
|
<Button outline>
|
|
<BookOpen size="15px" />
|
|
</Button>
|
|
</a>
|
|
</Link>
|
|
</Stack>
|
|
</Flex>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|