mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
feat(pages/get-started/guide): add jumperPrototype
This commit is contained in:
parent
3894232078
commit
37f164f4cc
@ -5,11 +5,10 @@ import * as SVG from "~/common/svg";
|
|||||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||||
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
||||||
|
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
import { useEventListener } from "~/common/hooks";
|
import { useEventListener } from "~/common/hooks";
|
||||||
import { convertToV1Slate } from "~/common/conversions";
|
|
||||||
import e from "express";
|
|
||||||
|
|
||||||
const STYLES_ROOT = css`
|
const STYLES_ROOT = css`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -68,7 +67,7 @@ const STYLES_BODY = css`
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 49px;
|
||||||
|
|
||||||
@keyframes fade-in {
|
@keyframes fade-in {
|
||||||
0% {
|
0% {
|
||||||
@ -117,6 +116,61 @@ const STYLES_BUTTON = css`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const VIEWS_ACTIONS = [
|
||||||
|
{ label: "Current Window" },
|
||||||
|
{ label: "All Open Tabs" },
|
||||||
|
{ label: "Recent" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const CUSTOM_VIEWS_ACTIONS = [
|
||||||
|
{ label: "Twitter", Favicon: SVG.TwitterFavicon },
|
||||||
|
{ label: "Youtube", Favicon: SVG.YoutubeFavicon },
|
||||||
|
];
|
||||||
|
|
||||||
|
const OBJECTS = [
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
isSaved: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Paul Prudence on Twitter: Computers and Automation [August-12-2022]",
|
||||||
|
isSelected: true,
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
isSaved: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
isSaved: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Concrete Architecture (@architeg) / Twitter",
|
||||||
|
Favicon: SVG.TwitterFavicon,
|
||||||
|
isSaved: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const useGuideKeyCommands = (handleNext, handlePrev) => {
|
const useGuideKeyCommands = (handleNext, handlePrev) => {
|
||||||
console.log("ping");
|
console.log("ping");
|
||||||
const handleKeyUp = (e) => {
|
const handleKeyUp = (e) => {
|
||||||
@ -167,6 +221,43 @@ export default function Guide(props) {
|
|||||||
<div css={STYLES_CONTAINER}>
|
<div css={STYLES_CONTAINER}>
|
||||||
<div css={STYLES_HEADING}>{props.heading}</div>
|
<div css={STYLES_HEADING}>{props.heading}</div>
|
||||||
<div css={STYLES_BODY}>{props.body}</div>
|
<div css={STYLES_BODY}>{props.body}</div>
|
||||||
|
<JumperPrototype.TopPanel>
|
||||||
|
{VIEWS_ACTIONS.map((action) => (
|
||||||
|
<JumperPrototype.ViewAction key={action.label}>
|
||||||
|
{action.label}
|
||||||
|
</JumperPrototype.ViewAction>
|
||||||
|
))}
|
||||||
|
<JumperPrototype.Divider
|
||||||
|
height="none"
|
||||||
|
width="1px"
|
||||||
|
style={{ margin: "0px 4px", flexShrink: 0 }}
|
||||||
|
/>
|
||||||
|
{CUSTOM_VIEWS_ACTIONS.map((action, i) => (
|
||||||
|
<JumperPrototype.ViewAction
|
||||||
|
isSelected={i === 0}
|
||||||
|
key={action.label}
|
||||||
|
Favicon={action.Favicon}
|
||||||
|
>
|
||||||
|
{action.label}
|
||||||
|
</JumperPrototype.ViewAction>
|
||||||
|
))}
|
||||||
|
<JumperPrototype.ViewAddButton style={{ marginLeft: "auto" }} />
|
||||||
|
</JumperPrototype.TopPanel>
|
||||||
|
<JumperPrototype.Root style={{ marginTop: 16 }}>
|
||||||
|
<JumperPrototype.Header />
|
||||||
|
<JumperPrototype.Divider />
|
||||||
|
<JumperPrototype.Body>
|
||||||
|
{OBJECTS.map((object) => (
|
||||||
|
<JumperPrototype.Object
|
||||||
|
key={object.title}
|
||||||
|
title={object.title}
|
||||||
|
Favicon={object.Favicon}
|
||||||
|
isSelected={object.isSelected}
|
||||||
|
isSaved={object.isSaved}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</JumperPrototype.Body>
|
||||||
|
</JumperPrototype.Root>
|
||||||
<div css={STYLES_FLEX}>
|
<div css={STYLES_FLEX}>
|
||||||
<a css={STYLES_BUTTON} href={props.prev} style={{ marginRight: `12px` }}>
|
<a css={STYLES_BUTTON} href={props.prev} style={{ marginRight: `12px` }}>
|
||||||
<SVG.LeftArrow height={16} width={16} />
|
<SVG.LeftArrow height={16} width={16} />
|
||||||
|
Loading…
Reference in New Issue
Block a user