GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

add vscode link

Browse Source
This commit is contained in:
AykutSarac 2022-09-27 12:48:14 +03:00
parent 6fc9d43857
commit 507e3a8f32
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/containers/Home/index.tsx
View File

@ -8,6 +8,7 @@ import {
HiOutlineDownload,
HiOutlineSearchCircle,
} from "react-icons/hi";
import { SiVisualstudiocode } from "react-icons/si";
import { TwitterTweetEmbed } from "react-twitter-embed";
import { CarbonAds } from "src/components/CarbonAds";
import { Producthunt } from "src/components/Producthunt";
@ -49,9 +50,21 @@ const HeroSection = () => {
graphs.
</Styles.StyledSubTitle>
<Styles.StyledMinorTitle>Paste - Import - Fetch!</Styles.StyledMinorTitle>
<Styles.StyledButton rel="prefetch" href="/editor" target="_blank" link>
GO TO EDITOR
</Styles.StyledButton>
<Styles.StyledButtonWrapper>
<Styles.StyledButton rel="prefetch" href="/editor" target="_blank" link>
GO TO EDITOR
</Styles.StyledButton>
<Link
href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
passHref
>
<Styles.StyledSponsorButton isBlue>
GET IT ON VS CODE
<SiVisualstudiocode />
</Styles.StyledSponsorButton>
</Link>
</Styles.StyledButtonWrapper>
<Styles.StyledSponsorButton onClick={() => setModalVisible(true)}>
Help JSON Crack&apos;s Goals

13
src/containers/Home/styles.tsx
View File

@ -1,6 +1,11 @@
import { Button } from "src/components/Button";
import styled from "styled-components";
export const StyledButtonWrapper = styled.div`
display: flex;
gap: 18px;
`;
export const StyledImageWrapper = styled.div`
width: 100%;
height: 100%;
@ -122,17 +127,17 @@ export const StyledButton = styled(Button)`
}
`;
export const StyledSponsorButton = styled(StyledButton)`
export const StyledSponsorButton = styled(StyledButton)<{ isBlue?: boolean }>`
background: transparent;
border: 1px solid #ee3d48;
border: 1px solid ${({ isBlue }) => (isBlue ? "#1F9CF0" : "#ee3d48")};
transition: all 200ms;
svg {
color: #ee3d48;
color: ${({ isBlue }) => (isBlue ? "#1F9CF0" : "#ee3d48")};
}
&:hover {
background: #ee3d48;
background: ${({ isBlue }) => (isBlue ? "#1F9CF0" : "#ee3d48")};
svg {
color: white;