|
@@ -9,6 +9,7 @@ import { Footer } from "src/components/Footer";
|
|
|
import Link from "next/link";
|
|
import Link from "next/link";
|
|
|
import Head from "next/head";
|
|
import Head from "next/head";
|
|
|
import { Producthunt } from "src/components/Producthunt";
|
|
import { Producthunt } from "src/components/Producthunt";
|
|
|
|
|
+import { useRouter } from "next/router";
|
|
|
|
|
|
|
|
const StyledHome = styled.div`
|
|
const StyledHome = styled.div`
|
|
|
padding: 24px;
|
|
padding: 24px;
|
|
@@ -49,6 +50,8 @@ const StyledText = styled.span<{ white?: boolean }>`
|
|
|
`;
|
|
`;
|
|
|
|
|
|
|
|
const Home: React.FC = () => {
|
|
const Home: React.FC = () => {
|
|
|
|
|
+ const { push } = useRouter();
|
|
|
|
|
+
|
|
|
return (
|
|
return (
|
|
|
<StyledHome>
|
|
<StyledHome>
|
|
|
<Head>
|
|
<Head>
|
|
@@ -64,11 +67,9 @@ const Home: React.FC = () => {
|
|
|
Simple visualization tool for your JSON data. No forced structure,
|
|
Simple visualization tool for your JSON data. No forced structure,
|
|
|
paste your JSON and view it instantly.
|
|
paste your JSON and view it instantly.
|
|
|
</StyledSubContent>
|
|
</StyledSubContent>
|
|
|
- <Link href="/editor" passHref>
|
|
|
|
|
- <a>
|
|
|
|
|
- <Button status="SECONDARY">Start Generating</Button>
|
|
|
|
|
- </a>
|
|
|
|
|
- </Link>
|
|
|
|
|
|
|
+ <Button status="SECONDARY" onClick={() => push("/editor")}>
|
|
|
|
|
+ Start Generating
|
|
|
|
|
+ </Button>
|
|
|
</StyledContent>
|
|
</StyledContent>
|
|
|
<Image src="421.svg" width={500} height={400} alt="graphs" />
|
|
<Image src="421.svg" width={500} height={400} alt="graphs" />
|
|
|
</Container>
|
|
</Container>
|
|
@@ -81,11 +82,9 @@ const Home: React.FC = () => {
|
|
|
it into graphs. We've done it at our side, so you can just
|
|
it into graphs. We've done it at our side, so you can just
|
|
|
paste your JSON.
|
|
paste your JSON.
|
|
|
</StyledSubContent>
|
|
</StyledSubContent>
|
|
|
- <Link href="/editor" passHref>
|
|
|
|
|
- <a>
|
|
|
|
|
- <Button status="SUCCESS">Paste It!</Button>
|
|
|
|
|
- </a>
|
|
|
|
|
- </Link>
|
|
|
|
|
|
|
+ <Button status="SUCCESS" onClick={() => push("/editor")}>
|
|
|
|
|
+ Paste It!
|
|
|
|
|
+ </Button>
|
|
|
</StyledContent>
|
|
</StyledContent>
|
|
|
<Image src="graphs3.svg" width={500} height={400} alt="preview" />
|
|
<Image src="graphs3.svg" width={500} height={400} alt="preview" />
|
|
|
</Container>
|
|
</Container>
|
|
@@ -97,11 +96,9 @@ const Home: React.FC = () => {
|
|
|
Have an existing file for your data? No worries, directly import it
|
|
Have an existing file for your data? No worries, directly import it
|
|
|
into our editor without having to scroll through all of it!
|
|
into our editor without having to scroll through all of it!
|
|
|
</StyledSubContent>
|
|
</StyledSubContent>
|
|
|
- <Link href="/editor" passHref>
|
|
|
|
|
- <a>
|
|
|
|
|
- <Button status="SUCCESS">Import JSON</Button>
|
|
|
|
|
- </a>
|
|
|
|
|
- </Link>
|
|
|
|
|
|
|
+ <Button status="SUCCESS" onClick={() => push("/editor")}>
|
|
|
|
|
+ Import JSON
|
|
|
|
|
+ </Button>
|
|
|
</StyledContent>
|
|
</StyledContent>
|
|
|
<Image src="graphs4.svg" width={500} height={400} alt="preview" />
|
|
<Image src="graphs4.svg" width={500} height={400} alt="preview" />
|
|
|
</Container>
|
|
</Container>
|
|
@@ -114,14 +111,12 @@ const Home: React.FC = () => {
|
|
|
<StyledText> JSON</StyledText>
|
|
<StyledText> JSON</StyledText>
|
|
|
<StyledText white> Visio</StyledText> at GitHub!
|
|
<StyledText white> Visio</StyledText> at GitHub!
|
|
|
</StyledSubContent>
|
|
</StyledSubContent>
|
|
|
- <Link href="https://github.com/AykutSarac/jsonvisio.com" passHref>
|
|
|
|
|
- <a rel="me" target="_blank">
|
|
|
|
|
- <Button>
|
|
|
|
|
- <AiFillGithub size={20} />
|
|
|
|
|
- Check GitHub
|
|
|
|
|
- </Button>
|
|
|
|
|
- </a>
|
|
|
|
|
- </Link>
|
|
|
|
|
|
|
+ <Button
|
|
|
|
|
+ onClick={() => push("https://github.com/AykutSarac/jsonvisio.com")}
|
|
|
|
|
+ >
|
|
|
|
|
+ <AiFillGithub size={20} />
|
|
|
|
|
+ Check GitHub
|
|
|
|
|
+ </Button>
|
|
|
</StyledContent>
|
|
</StyledContent>
|
|
|
<Image src="graphs5.svg" width={500} height={400} alt="preview" />
|
|
<Image src="graphs5.svg" width={500} height={400} alt="preview" />
|
|
|
</Container>
|
|
</Container>
|
AykutSarac