theme-ui#Card JavaScript Examples
The following examples show how to use
theme-ui#Card.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ArticlesList.js From developer-portal with Apache License 2.0 | 6 votes |
|
ListItem = ({ title, type, link, linkText, description, isMobile }) => {
return (
<Card px={4}>
<Link href={link} passHref>
<Grid columns={['1fr auto', '1fr 1fr auto']}>
<Flex sx={{ flexDirection: 'column' }}>
<Heading sx={{ cursor: 'pointer' }} variant="microHeading">
{title}
</Heading>
<Text sx={{ cursor: 'pointer' }}>{description}</Text>
</Flex>
{!isMobile && (
<Flex sx={{ alignItems: 'center' }}>
<Text>{type}</Text>
</Flex>
)}
<Flex sx={{ alignItems: 'center', justifyContent: 'flex-end' }}>
<Text sx={{ variant: 'smallText', cursor: 'pointer' }} pr={2}>
{linkText}
</Text>
<Icon name="increase" />
</Flex>
</Grid>
</Link>
</Card>
);
}
Example #2
| Source File: Ecosystem.js From developer-portal with Apache License 2.0 | 6 votes |
|
ListItem = ({ title, link, description }) => (
<Card px={4}>
<ThemeLink href={link} target="_blank">
<Grid columns={'1fr auto'}>
<Flex sx={{ flexDirection: 'column' }}>
<Heading sx={{ cursor: 'pointer' }} variant="microHeading">
{title}
</Heading>
<Text sx={{ cursor: 'pointer' }} variant="smallText">
{description}
</Text>
</Flex>
<Flex sx={{ alignItems: 'center', justifyContent: 'flex-end' }}>
<Icon name="increase" color="text" />
</Flex>
</Grid>
</ThemeLink>
</Card>
)
Example #3
| Source File: CodeBox.js From developer-portal with Apache License 2.0 | 5 votes |
|
CodeBox = ({ cta, sections }) => {
const [activeTool, setActiveTool] = useState(0);
return (
<Container>
<Heading sx={{ pb: [3, 4] }} variant="mediumHeading">
{cta}
</Heading>
<Grid
columns={[1, '1fr auto']}
sx={{
columnGap: 4,
}}
>
<Box>
<Card
sx={{
height: '500px',
width: '100%',
bg: 'background',
}}
>
<CodeWrapper
value={sections[activeTool].code}
language={sections[activeTool].language}
/>
</Card>
</Box>
<Box>
<Grid
sx={{
rowGap: 4,
}}
>
{sections.map((tool, i) => {
const { title, des, link } = tool;
const isActive = i === activeTool;
return (
<Box key={tool.title}>
<Heading
variant="microHeading"
onClick={() => {
setActiveTool(i);
}}
sx={{ cursor: 'pointer' }}
>
{title}
</Heading>
{!isActive ? null : (
<Grid
sx={{
rowGap: 2,
pt: 2,
}}
>
<Text>{des}</Text>
<Link href={link} passHref>
<Flex sx={{ alignItems: 'center' }}>
<Icon sx={{ mr: 2 }} name={'arrow_right'}></Icon>
<ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>Read More</ThemeLink>
</Flex>
</Link>
</Grid>
)}
</Box>
);
})}
</Grid>
</Box>
</Grid>
</Container>
);
}
Example #4
| Source File: DocumentationList.js From developer-portal with Apache License 2.0 | 5 votes |
|
DocumentationList = () => {
return (
<Box>
<Container>
<Flex sx={{ mb: 3, alignItems: 'center', justifyContent: 'space-between' }}>
<Heading variant="largeHeading">Documentation</Heading>
<Link href={'/documentation'} passHref>
<Flex sx={{ ml: 3, alignItems: 'center' }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>Start learning</ThemeLink>
</Flex>
</Link>
</Flex>
</Container>
<Grid
sx={{
columnGap: 3,
gridAutoFlow: 'column',
overflowX: 'auto',
pl: [2, 'calc(50% - 1140px / 2)'],
'::-webkit-scrollbar': {
display: 'none',
},
scrollbarWidth: 'none',
gridTemplateRows: 'auto',
rowGap: 3,
}}
>
{docLinks.map(({ name, url }) => {
return (
<Link key={name} href={`${url}`} passHref>
<Card
sx={{
width: 180,
border: 'light',
bg: 'background',
borderColor: 'muted',
cursor: 'pointer',
'&:hover': {
borderColor: 'primaryEmphasis',
},
}}
>
<Flex
sx={{
flexDirection: 'column',
justifyContent: 'space-between',
height: '100%',
}}
>
<Heading>{name}</Heading>
<Flex sx={{ alignItems: 'center' }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>View Docs</ThemeLink>
</Flex>
</Flex>
</Card>
</Link>
);
})}
</Grid>
</Box>
);
}
Example #5
| Source File: repoCard.js From github-covid-finder with MIT License | 4 votes |
|
RepoCard = ({ repo }) => {
return (
<Card
sx={{
backgroundColor: 'cardBackground',
fontFamily: 'inter',
borderRadius: 8,
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'cardBorder',
padding: '15px 15px 25px 20px',
':hover': {
cursor: 'pointer',
},
}}
onClick={() => openGithubPage(repo.html_url)}
>
<Box
sx={{
paddingBottom: 25,
height: '80%',
}}
>
<Text sx={{ wordBreak: 'break-all', fontSize: 20, py: '8px' }}>
{repo.name}
</Text>
<Text
sx={{
wordBreak: 'break-all',
fontSize: 16,
py: '4px',
color: '#9d1e1e',
}}
>
{repo.full_name}
</Text>
<Text
sx={{ pt: '4px', color: '#805f5f', lineHeight: '20px', fontSize: 14 }}
>
{repo.description}
</Text>
</Box>
<Grid
columns={4}
sx={{
borderTop: 'solid 1px rgba(255, 255, 255, 0.05)',
paddingTop: 15,
textAlign: 'center',
fontSize: 14,
}}
>
<Text>
<span
role="img"
aria-label="star"
style={{ verticalAlign: 'middle' }}
>
<StarIcon />
</span>{' '}
{repo.stargazers_count}
</Text>
<Text>
<span
role="img"
aria-label="issues"
style={{ verticalAlign: 'middle' }}
>
<IssueIcon />
</span>{' '}
{repo.open_issues_count}
</Text>
<a href={repo.html_url} style={{ color: 'currentColor' }}>
<Text>
<span
role="img"
aria-label="github"
style={{ verticalAlign: 'middle' }}
>
<GithubIcon />
</span>{' '}
Github
</Text>
</a>
{displayLogo()}
</Grid>
</Card>
)
function displayLogo() {
//check if logoMapper contains the repo.language as a key
if (logoMapper[repo.language] !== undefined) {
return (
<Text>
<span
className="tooltip"
role="img"
aria-label="language"
style={{ verticalAlign: 'middle' }}
>
<img
width="16px"
height="16px"
src={logoMapper[repo.language]}
alt={repo.language}
/>
{checkNullLang()}
</span>
</Text>
) //checkNullLang() for tool tip visibility.
}
//when either repo.language is null or not in logoMapper just displaying code icon with repo.language with no tooltip
else {
return (
<Text>
<span
role="img"
aria-label="code"
style={{ verticalAlign: 'middle' }}
>
<CodeIcon />
</span>{' '}
{repo.language}
</Text>
)
}
}
function checkNullLang() {
if (repo.language !== null)
return <span className="tooltiptext">{repo.language}</span>
}
}
Example #6
| Source File: CommunityCta.js From developer-portal with Apache License 2.0 | 4 votes |
|
CommunitySection = ({ mobile }) => {
const ctaContent = [
{
title: 'Join our dev community',
link: 'https://chat.makerdao.com/channel/dev',
text: 'Join our chat',
},
{
title: 'Join the conversation',
link: 'https://forum.makerdao.com/c/devs/19',
text: 'Join our forum',
},
{
title: 'Be a contributor',
link: 'https://github.com/makerdao/developer-portal',
text: 'Github',
},
];
return (
<Container>
<Card sx={{ p: 0, display: 'flex', width: '100%', position: 'relative', zIndex: 0 }}>
<Icon
color="textMuted"
name="tri_1"
size="150px"
sx={{
position: 'absolute',
top: '-70px',
left: '60px',
transform: mobile ? 'scale(0.5, 0.5)' : undefined,
}}
/>
<Icon
color="textMuted"
name="tri_2"
size="250px"
sx={{
position: 'absolute',
alignSelf: 'flex-end',
right: '5px',
top: '-120px',
transform: mobile ? 'scale(0.5, 0.5)' : undefined,
}}
/>
<Icon
color="textMuted"
name="tri_3"
size="240px"
sx={{
position: 'absolute',
left: '-130px',
top: '240px',
}}
/>
<Icon
color="textMuted"
name="tri_4"
size="90px"
sx={{
position: 'absolute',
alignSelf: 'flex-end',
right: '60px',
bottom: '-50px',
}}
/>
<Grid sx={{ p: 4, rowGap: 4 }}>
<Flex sx={{ justifyContent: 'center' }}>
<Heading variant="largeHeading">
<InlineText name="joinUs" />
</Heading>
</Flex>
<Grid columns={[1, 3]} sx={{ py: 4 }}>
{ctaContent.map(({ title, link, text }) => (
<Card sx={{ p: [3, 3, 4], bg: 'onBackground' }} key={title}>
<Grid sx={{ height: '100%' }}>
<Heading sx={{ color: 'background' }}>{title}</Heading>
<ThemeLink sx={{ alignSelf: 'end' }} href={link} target="_blank">
<Flex sx={{ alignItems: 'center' }}>
<Icon name="increase" color="primary"></Icon>
<Text variant="largeText" sx={{ color: 'background', px: 2 }}>
{text}
</Text>
</Flex>
</ThemeLink>
</Grid>
</Card>
))}
</Grid>
</Grid>
</Card>
<Flex
sx={{
justifyContent: mobile ? 'space-between' : 'center',
alignItems: 'center',
px: [0, 5, 4],
py: [5, 4],
}}
>
<Icon color="textMuted" name="smiley" size={6} />
<Flex sx={{ width: ['50%', '100%', '50%'], p: [0, 4] }}>
<Heading>
<InlineTextarea name="communityCallout" />
</Heading>
</Flex>
</Flex>
</Container>
);
}
Example #7
| Source File: Feedback.js From developer-portal with Apache License 2.0 | 4 votes |
|
Feedback = ({ route, cms, mobile }) => {
const ref = useRef(null);
const rcRef = useRef(null);
const [reaction, setReaction] = useState(null);
const isNegative = reaction === 'negative';
const isPositive = reaction === 'positive';
const isSubmitted = reaction === 'submitted';
const { title, placeholder } = isNegative
? {
title: mobile ? 'sorryMobile' : 'sorry',
placeholder: 'Please let us know how we can improve it.',
}
: isPositive
? {
title: mobile ? 'gladMobile' : 'glad',
placeholder: 'Please let us know how we can make it even better.',
}
: isSubmitted
? { title: mobile ? 'thanksMobile' : 'thanks' }
: { title: mobile ? 'helpfulMobile' : 'helpful' };
const sendFeedback = useCallback(async () => {
const markdown = constructMarkdownString(reaction, rcRef.current?.value, ref.current?.value);
try {
const response = await fetch(process.env.FEEDBACK_ENDPOINT || '/api/feedback', {
body: JSON.stringify({
reaction,
comment: markdown,
tags: ['feedback', window.location.pathname],
}),
headers: {
'Content-Type': 'application/json',
},
method: 'POST',
credentials: 'same-origin',
referrerPolicy: 'no-referrer',
});
if (!response.ok) {
throw Error(response.statusText);
}
cms.alerts.success('Your feedback has been submitted');
setReaction('submitted');
} catch (err) {
console.error(err);
cms.alerts.error('there was an error in submitting your feedback');
}
}, [reaction, cms.alerts]);
useEffect(() => {
setReaction(null);
}, [route]);
return (
<Card
sx={{
bg: 'background',
border: 'light',
borderColor: 'muted',
borderRadius: 'small',
width: '100%',
}}
>
<Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Flex sx={{ alignItems: 'center' }}>
<Icon
sx={{ mr: 2 }}
color="primary"
size="auto"
height="20px"
width="20px"
name="document"
></Icon>
<Heading variant="smallHeading">
<InlineText name={title} />
</Heading>
</Flex>
{isSubmitted ? (
<Flex
sx={{
alignItems: 'center',
justifyContent: 'center',
bg: 'primary',
size: 4,
borderRadius: 'round',
ml: 'auto',
}}
>
<Icon name="checkmark" size="3" />
</Flex>
) : (
<Grid columns={2}>
<Button
variant="contrastButtonSmall"
sx={{
bg: isPositive ? 'primary' : undefined,
color: isPositive ? 'onPrimary' : undefined,
minWidth: 42,
}}
onClick={() => setReaction('positive')}
>
Yes
</Button>
<Button
variant="contrastButtonSmall"
sx={{
bg: isNegative ? 'primary' : undefined,
color: isNegative ? 'onPrimary' : undefined,
minWidth: 42,
}}
onClick={() => setReaction('negative')}
>
No
</Button>
</Grid>
)}
</Flex>
{(isNegative || isPositive) && (
<Flex sx={{ flexDirection: 'column', alignItems: 'flex-start' }}>
<Text sx={{ fontWeight: 'body', mb: 2, mt: 3 }} variant="caps">
FEEDBACK
</Text>
<Textarea
aria-label="Feedback textarea"
ref={ref}
placeholder={placeholder}
sx={{
mb: 2,
bg: 'surface',
borderColor: 'muted',
fontSize: 3,
}}
></Textarea>
<Text sx={{ fontWeight: 'body', mb: 2, mt: 3 }} variant="caps">
ROCKET CHAT HANDLE (OPTIONAL)
</Text>
<Flex sx={{ justifyContent: 'space-between', width: '100%' }}>
<Input
sx={{
mr: 3,
fontFamily: 'body',
fontSize: 3,
bg: 'surface',
borderColor: 'muted',
width: ['66%', '100%'],
}}
type="email"
aria-label="Feedback handle"
placeholder="Enter your Rocket Chat handle if you would like to be in contact."
ref={rcRef}
></Input>
<Button
sx={{ px: [2, 4], width: ['33%', 'initial'] }}
variant="small"
onClick={sendFeedback}
>
Submit
</Button>
</Flex>
<Flex sx={{ pt: 3, flexWrap: 'wrap' }}>
<Text sx={{ color: 'onBackgroundMuted', pr: 3 }}>
<InlineText name="additional" />
</Text>
<ThemeLink href={'https://chat.makerdao.com/channel/dev'} target="_blank">
<Flex sx={{ alignItems: 'center' }}>
<Icon sx={{ mr: 2 }} color="primary" name="chat"></Icon>
<Text
sx={{
color: 'text',
cursor: 'pointer',
'&:hover': {
color: 'primaryEmphasis',
},
}}
>
chat.makerdao.com
</Text>
</Flex>
</ThemeLink>
</Flex>
</Flex>
)}
</Card>
);
}
Example #8
| Source File: NewsletterCallout.js From developer-portal with Apache License 2.0 | 4 votes |
|
NewsletterCallout = () => {
const { inputEl, subscribe, loading, success, errorMessage } = useEmailSubscribe();
return (
<Container sx={{ display: 'flex', justifyContent: 'center', pb: 6 }}>
<Grid gap={3}>
<Heading sx={{ display: 'flex', justifyContent: 'center' }} variant="mediumHeading">
Want Maker dev updates dripping into your inbox?
</Heading>
<Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
<Text variant="plainText" sx={{ alignSelf: 'center' }}>
<InlineTextarea name="devUpdatesSubtext1" />
</Text>
<Text sx={{ alignSelf: 'center', pb: 3 }} variant="plainText">
<InlineTextarea name="devUpdatesSubtext2" />
</Text>
</Flex>
{success ? (
<Card sx={{ p: 4 }}>
<Flex sx={{ flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
<Flex
sx={{
position: 'absolute',
top: '-50px',
alignItems: 'center',
justifyContent: 'center',
bg: 'primary',
size: '40px',
borderRadius: 'round',
mx: 2,
}}
>
<Icon name="checkmark" size="3" />
</Flex>
<Text variant="plainText" sx={{ fontWeight: 'bold', fontSize: 4 }}>
Thank you for signing up!
</Text>
<Text variant="plainText" sx={{ fontSize: 2 }}>
Stay tuned, you will get dev updates soon.
</Text>
</Flex>
</Card>
) : (
<>
<Flex sx={{ flexDirection: 'column' }}>
<Flex sx={{ justifyContent: 'center' }}>
<Input
aria-label="Email for newsletter"
ref={inputEl}
type="email"
placeholder="Email"
disabled={loading}
sx={{
fontFamily: 'heading',
fontSize: 5,
bg: 'onBackground',
borderColor: 'onBackground',
borderRadius: (theme) =>
`${theme.radii.small}px 0px 0px ${theme.radii.small}px`,
pl: 4,
'&:focus': {
color: 'background',
},
}}
></Input>
<Button
disabled={loading}
onClick={subscribe}
sx={{
borderColor: 'primary',
borderRadius: (theme) =>
`0px ${theme.radii.small}px ${theme.radii.small}px 0px`,
py: 2,
width: 7,
fontSize: 5,
}}
>
Sign up
</Button>
</Flex>
{errorMessage && (
<Text variant="plainText" sx={{ py: 2, px: 4, fontSize: 1, color: 'primary' }}>
{errorMessage}
</Text>
)}
</Flex>
</>
)}
</Grid>
</Container>
);
}
