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

style ErrorContainer

Browse Source
This commit is contained in:
AykutSarac 2022-04-10 16:03:10 +03:00
parent 5f2768292f
commit 7993542c9b
1 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/containers/JsonEditor/ErrorContainer.tsx
View File

@ -4,6 +4,7 @@ import {
MdExpandMore, MdExpandMore,
MdExpandLess, MdExpandLess,
MdReportGmailerrorred, MdReportGmailerrorred,
MdOutlineCheckCircleOutline,
} from "react-icons/md"; } from "react-icons/md";
export type Error = { export type Error = {
@ -18,18 +19,23 @@ interface ErrorContainerProps {
const StyledErrorWrapper = styled.div``; const StyledErrorWrapper = styled.div``;
const StyledErrorHeader = styled.a` const StyledErrorHeader = styled.button<{ error: boolean }>`
display: flex; display: flex;
width: 100%;
border-radius: 0;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: ${({ theme }) => theme.BLACK_DARK}; background: ${({ theme }) => theme.BLACK_DARK};
padding: 6px 12px; padding: 4px 16px;
color: ${({ theme }) => theme.DANGER}; color: ${({ theme, error }) => (error ? theme.DANGER : theme.TEXT_POSITIVE)};
font-size: 22px;
cursor: pointer; cursor: pointer;
height: 28px;
border-bottom: 1px solid #1f2124;
pointer-events: ${({ error }) => !error && "none"};
&:hover { &:hover {
color: ${({ theme }) => theme.DANGER}; color: ${({ theme }) => theme.DANGER};
box-shadow: none;
} }
`; `;
@ -37,15 +43,14 @@ const StyledTitle = styled.span`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-weight: 600; font-weight: 500;
gap: 10px; gap: 10px;
font-size: 16px;
`; `;
const StyledError = styled.pre` const StyledError = styled.pre`
color: ${({ theme }) => theme.DANGER}; color: ${({ theme }) => theme.DANGER};
border: 1px solid ${({ theme }) => theme.SILVER_DARK}; border-bottom: 1px solid ${({ theme }) => theme.SILVER_DARK};
border-left: none;
border-right: none;
font-size: 12px; font-size: 12px;
padding: 12px; padding: 12px;
margin: 0; margin: 0;
@ -60,20 +65,29 @@ export const ErrorContainer: React.FC<ErrorContainerProps> = ({
return ( return (
<StyledErrorWrapper> <StyledErrorWrapper>
<StyledErrorHeader <StyledErrorHeader
error={!!error.message}
onClick={() => onClick={() =>
setError((err: Error) => ({ ...err, isExpanded: !err.isExpanded })) setError((err: Error) => ({ ...err, isExpanded: !err.isExpanded }))
} }
> >
<StyledTitle> <StyledTitle>
<MdReportGmailerrorred size={26} /> Error {error.message ? (
<MdReportGmailerrorred size={20} />
) : (
<MdOutlineCheckCircleOutline size={20} />
)}
{error.message ? "Error" : "JSON Valid"}
</StyledTitle> </StyledTitle>
{error.isExpanded ? ( {error.message &&
(error.isExpanded ? (
<MdExpandLess size={22} /> <MdExpandLess size={22} />
) : ( ) : (
<MdExpandMore size={22} /> <MdExpandMore size={22} />
)} ))}
</StyledErrorHeader> </StyledErrorHeader>
{error.isExpanded && <StyledError>{error.message}</StyledError>} {error.isExpanded && error.message && (
<StyledError>{error.message}</StyledError>
)}
</StyledErrorWrapper> </StyledErrorWrapper>
); );
}; };