Created
March 23, 2021 14:46
-
-
Save brandon-nash/551653ebb093800435a9b1e623f6e91f to your computer and use it in GitHub Desktop.
Responsive Stacks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
{loading ? ( | |
<Flex align="center" sx={{ py: 5 }}> | |
<Loading size="large" color="#ccc" /> | |
</Flex> | |
) : null} | |
{ ( | |
<Stack spacing={3}> | |
<Text as="div"> | |
<a onClick={() => navigate(-1)}>Return to your breach list</a> | |
</Text> | |
<HighlightBox | |
bg={colors.background} | |
sx={{ | |
p: 3, | |
fontSize: 18, | |
lineHeight: 1.4, | |
textAlign: "left", | |
mb: 0, | |
}} | |
> | |
<Stack isInline={true} alignItems="center"> | |
<Stack flex={1}> | |
<Text fontWeight="600" as="h2" sx={{ m: 0 }}> | |
{breach.name} | |
</Text> | |
<Text fontWeight="400" size="xs" as="div"> | |
Breached on {format(parseISO(breach.date), "MMMM d, yyyy")} | |
</Text> | |
</Stack> | |
<Stack isInline={true}> | |
{ | |
!isActionBusy && | |
<div> | |
{isAddedToHistory && | |
<a href="#" onClick={(evt) => { evt.preventDefault(); handleRemoveFromMyHistory(); }}>Remove from my history </a> | |
} | |
{!isAddedToHistory && | |
<a href="#" onClick={(evt) => { evt.preventDefault(); handleAddToMyHistory(); }}>Add to my history </a> | |
} | |
</div> | |
|| <Loading size="small" color="#ccc" /> | |
} | |
</Stack> | |
</Stack> | |
</HighlightBox> | |
<Stack direction={["column", "row"]}> | |
<Stack spacing={2} flex={1} className="mar--lg"> | |
<h3>This breach leaked:</h3> | |
<div className="mar--lg"> | |
<ul className="mar-x--lg" sx={{ fontSize: 14, mb: 0 }}> | |
{breach.credentials.map((credential) => { | |
return ( | |
<li key={credential.id} sx={{ mb: 2 }} style={{ listStyle: "disc" }}> | |
{credential.description} | |
</li> | |
); | |
})} | |
</ul> | |
</div> | |
</Stack> | |
<Stack isInline={true} spacing={3}> | |
<Box flex={1}> | |
<Card variant="flat"> | |
<CardBanner>Here are the risks caused by this breach</CardBanner> | |
<HarmCard breach={breach} /> | |
</Card> | |
</Box> | |
<Box flex={1}> | |
<ActionsCard actions={breach.actions} /> | |
</Box> | |
</Stack> | |
</Stack> | |
</Stack> | |
)} | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment