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

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

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