GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-20 05:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve a11y

Browse Source
This commit is contained in:
AykutSarac 2022-04-15 17:09:12 +03:00
parent 03d2ff988d
commit 89847c5f4f
2 changed files with 20 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Footer/index.tsx
View File

@ -29,12 +29,12 @@ export const Footer: React.FC = () => {
<StyledFooter>
<StyledSocial>
<Link href="https://github.com/AykutSarac/jsonvisio.com">
<a rel="me" target="_blank">
<a aria-label="GitHub" rel="me" target="_blank">
<AiFillGithub />
</a>
</Link>
<Link href="https://twitter.com/aykutsarach">
<a rel="me" target="_blank">
<a aria-label="Twitter" rel="me" target="_blank">
<AiOutlineTwitter />
</a>
</Link>

41
src/pages/index.tsx
View File

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