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

fix collapse icon

Browse Source
This commit is contained in:
Aykut Saraç 2022-02-16 23:29:55 +03:00
parent bbf98a958f
commit 5394bbb0b3
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/containers/JsonEditor/index.tsx
View File

@ -22,13 +22,19 @@ const StyledEditorWrapper = styled.div`
const StyledErrorWrapper = styled.div``; const StyledErrorWrapper = styled.div``;
const StyledErrorHeader = styled.div` const StyledErrorHeader = styled.a`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
background: ${({ theme }) => theme.BLACK_DARK}; background: ${({ theme }) => theme.BLACK_DARK};
padding: 6px 12px; padding: 6px 12px;
color: ${({ theme }) => theme.DANGER}; color: ${({ theme }) => theme.DANGER};
font-size: 22px; font-size: 22px;
cursor: pointer;
&:hover {
color: ${({ theme }) => theme.DANGER};
}
`; `;
const StyledTitle = styled.span` const StyledTitle = styled.span`
@ -39,19 +45,6 @@ const StyledTitle = styled.span`
gap: 10px; gap: 10px;
`; `;
const StyledCollapse = styled.button`
display: flex;
justify-content: center;
align-items: center;
background: none;
color: ${({ theme }) => theme.DANGER};
cursor: pointer;
&:hover {
box-shadow: none;
}
`;
const StyledError = styled.pre` const StyledError = styled.pre`
color: ${({ theme }) => theme.DANGER}; color: ${({ theme }) => theme.DANGER};
border: 1px solid ${({ theme }) => theme.SILVER_DARK}; border: 1px solid ${({ theme }) => theme.SILVER_DARK};
@ -142,17 +135,19 @@ const JsonEditor: React.FC<{
<StyledEditorWrapper> <StyledEditorWrapper>
{error.message && ( {error.message && (
<StyledErrorWrapper> <StyledErrorWrapper>
<StyledErrorHeader> <StyledErrorHeader
<StyledTitle>
<MdReportGmailerrorred size={26} /> Error
</StyledTitle>
<StyledCollapse
onClick={() => onClick={() =>
setError((err) => ({ ...err, isExpanded: !err.isExpanded })) setError((err) => ({ ...err, isExpanded: !err.isExpanded }))
} }
> >
{true ? <MdExpandMore size={22} /> : <MdExpandLess size={22} />} <StyledTitle>
</StyledCollapse> <MdReportGmailerrorred size={26} /> Error
</StyledTitle>
{error.isExpanded ? (
<MdExpandLess size={22} />
) : (
<MdExpandMore size={22} />
)}
</StyledErrorHeader> </StyledErrorHeader>
{error.isExpanded && <StyledError>{error.message}</StyledError>} {error.isExpanded && <StyledError>{error.message}</StyledError>}
</StyledErrorWrapper> </StyledErrorWrapper>