74 lines
1.7 KiB
JavaScript
74 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
import { Flex, Box } from 'reflexbox';
|
|
|
|
import Page from 'components/Page';
|
|
import Sidebar from 'components/Sidebar';
|
|
import useExamplePages from 'hooks/useExamplePages';
|
|
import CodeBlock from 'components/CodeBlock';
|
|
import { H4 } from 'components/Typo';
|
|
|
|
import 'example-flows/Overview';
|
|
|
|
const Wrapper = styled(Flex)`
|
|
border-top: 1px solid ${(p) => p.theme.colors.silverLighten30};
|
|
flex-grow: 1;
|
|
`;
|
|
|
|
const ReactFlowWrapper = styled(Box)`
|
|
flex-grow: 1;
|
|
|
|
.react-flow {
|
|
height: 65vh;
|
|
}
|
|
`;
|
|
|
|
const SourceWrapper = styled(Box)`
|
|
border-top: 1px solid #eee;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
`;
|
|
|
|
const SourceCodeBlock = ({ absolutePath, internal }) => {
|
|
const splittedPath = absolutePath.split('/');
|
|
const fileName = splittedPath[splittedPath.length - 1];
|
|
|
|
return (
|
|
<Box>
|
|
<Box>{fileName}</Box>
|
|
<CodeBlock code={internal.content} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ({ children, title, slug, sourceCodeFiles = [] }) => {
|
|
const menu = useExamplePages();
|
|
|
|
const metaTags = {
|
|
title: `React Flow - ${title} Example`,
|
|
siteUrl: `https://reactflow.dev/examples/${slug}`,
|
|
robots: 'index, follow',
|
|
};
|
|
|
|
const hasSource = sourceCodeFiles.length > 0;
|
|
|
|
return (
|
|
<Page metaTags={metaTags} footerBorder>
|
|
<Wrapper>
|
|
<Sidebar menu={menu} />
|
|
<ReactFlowWrapper>
|
|
{children}
|
|
{hasSource && (
|
|
<SourceWrapper p={3}>
|
|
<H4 as="div">Source Code</H4>
|
|
{sourceCodeFiles.map((source) => (
|
|
<SourceCodeBlock key={source.absolutePath} {...source} />
|
|
))}
|
|
</SourceWrapper>
|
|
)}
|
|
</ReactFlowWrapper>
|
|
</Wrapper>
|
|
</Page>
|
|
);
|
|
};
|