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

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