theme-ui#Container JavaScript Examples
The following examples show how to use
theme-ui#Container.
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: index.js From developer-portal with Apache License 2.0 | 6 votes |
Filter = ({ options, activeGroup, onChange, count, mobile }) => {
return (
<Box sx={{ mb: 6 }}>
<Box sx={{ border: 'light', borderColor: 'muted', borderWidth: '1px 0 1px 0', mb: 2 }}>
<Container sx={{ p: 0 }}>
<Grid columns={[2, '1fr 2fr 1fr']}>
<Text variant="plainText" sx={{ fontSize: 3, p: 2, my: 'auto' }}>
Show me guides about:
</Text>
<Flex
sx={{
border: 'light',
borderColor: 'muted',
borderWidth: mobile ? '0 0 0 1px' : '0 1px 0 1px',
px: 4,
py: 2,
}}
>
<Dropdown
sx={{ width: [7, 8] }}
options={options}
activeGroup={activeGroup}
onChange={onChange}
/>
</Flex>
{!mobile && <FeaturedCount count={count} sx={{ py: 2, px: 4 }} />}
</Grid>
</Container>
</Box>
{mobile && <FeaturedCount count={count} sx={{ px: 2 }} />}
</Box>
);
}
Example #2
Source File: Banners.js From developer-portal with Apache License 2.0 | 6 votes |
Banners = ({ bannerData }) => {
const [changelog] = bannerData || bannerJson;
return (
<Banner
content={
<Container>
<ThemeLink href={changelog.url} target="_blank">
<Flex
sx={{
width: '100%',
justifyContent: 'space-between',
}}
>
<Text
sx={{
fontWeight: 'body',
color: 'onBackgroundMuted',
fontSize: 2,
'& strong': { color: 'text', px: 1, fontWeight: 'body' },
'& p': {
m: 0,
},
}}
>
{changelog.text}
</Text>
<Flex sx={{ alignItems: 'center', justifyContent: 'flex-end', width: '33%' }}>
<Icon color="text" name="increase"></Icon>
<Text sx={{ color: 'text', pl: 2, fontWeight: 'body' }}>{changelog.linkText}</Text>
</Flex>
</Flex>
</ThemeLink>
</Container>
}
/>
);
}
Example #3
Source File: SignupCta.js From developer-portal with Apache License 2.0 | 6 votes |
SignupCta = () => {
const placeholder = 'We saved a slot for your email';
return (
<Container>
<Grid columns={2} sx={{ mb: 6, mx: 5 }}>
<Box sx={{ p: 5 }}>
<Heading variant="largeHeading">
Want Maker dev updates dripping into your mailbox?
</Heading>
</Box>
<Flex sx={{ justifyContent: 'center', alignItems: 'center' }}>
<EmailSignup placeholder={placeholder} />
</Flex>
</Grid>
</Container>
);
}
Example #4
Source File: Footer.js From developer-portal with Apache License 2.0 | 6 votes |
Footer = () => {
return (
<Container as="footer" sx={{ pt: 6 }}>
<Grid sx={{ pb: 4 }} columns={[2, 3, 6]} gap={4}>
<Flex sx={{ flexDirection: 'column', height: ['100%', '50%', '50%'] }}>
<Flex sx={{ pb: 2 }}>
<IconLink name="maker_full" url="https://www.makerdao.com" width={127} />
</Flex>
<Flex>
<Flex sx={{ pr: 4 }}>
<IconLink name="github" url="https://github.com/makerdao/" />
</Flex>
<Flex>
<IconLink name="rocketchat" url="https://chat.makerdao.com/channel/dev" />
</Flex>
</Flex>
<ColorModeToggle />
</Flex>
{links.map(([title, content]) => {
return <Section key={title} title={title} content={content} />;
})}
</Grid>
</Container>
);
}
Example #5
Source File: GuideGrid.js From developer-portal with Apache License 2.0 | 6 votes |
GuideGrid = ({ resources, path }) => {
return (
<Container>
<Grid columns={[1, 3, 4]} sx={{ gridRowGap: [5, 6], gridColumnGap: 5 }}>
{resources.map(
(
{
data: {
frontmatter: { group, title, slug, description, tags },
},
},
i
) => {
return (
<GuideCard
key={title}
title={title}
type={group}
description={description}
link={`/${path}/${slug}/`}
linkText={'Read'}
icon={`stamp_${(i % 5) + 1}`}
tags={tags}
/>
);
}
)}
</Grid>
</Container>
);
}
Example #6
Source File: 404.js From github-covid-finder with MIT License | 6 votes |
NotFound = () => {
return (
<Layout>
<SEO />
<Container
sx={{
backgroundColor: 'background',
padding: 16,
borderRadius: '3px',
marginTop: '80px',
letterSpacing: '4px',
fontSize: '56px',
color: '#FF4136',
fontFamily: 'inter',
textAlign: 'center',
fontWeight: 700,
}}
>
<Text>#STAY THE FUCK HOME</Text>
</Container>
<Container
sx={{
fontFamily: 'inter',
textAlign: 'center',
backgroundColor: 'background',
color: 'text',
borderRadius: '3px',
}}
>
<p>Not sure if the page you are searching exist!</p>
<p>While I check feel free to navigate to the Home page</p>
</Container>
</Layout>
)
}
Example #7
Source File: Header.js From developer-portal with Apache License 2.0 | 5 votes |
MobileMenu = ({ close, query, bannerData }) => {
const [{ linkText, url, text }] = bannerData;
return (
<Container
sx={{
bg: 'background',
height: '100%',
position: 'fixed',
zIndex: 1,
}}
>
<Flex sx={{ justifyContent: 'space-between', mb: 6, py: 2 }}>
<Link href="/" passHref>
<ThemeLink>
<Icon name="maker" color="text" size={4} />
</ThemeLink>
</Link>
<IconButton sx={{ cursor: 'pointer', pt: 3 }}>
<Icon
name="dp_close"
size="auto"
color="text"
sx={{
cursor: 'pointer',
height: 20,
width: 20,
}}
onClick={close}
/>
</IconButton>
</Flex>
<Flex as="nav" sx={{ flexDirection: 'column', px: 2 }}>
<ThemeLink href={url} target="_blank">
<Flex sx={{ alignItems: 'center', px: 2 }}>
<Icon color="primary" name="increase"></Icon>
<Text sx={{ px: 2, fontSize: 5, color: 'text' }}>{linkText}</Text>
</Flex>
</ThemeLink>
<Text sx={{ px: 2, fontSize: 2, color: 'onBackgroundMuted' }}>{text}</Text>
{LINKS.map(({ name, url }) => (
<Link href={{ pathname: url, query }} passHref key={name}>
<NavLink
key={name}
sx={{
py: 4,
fontSize: 7,
}}
variant="links.mobileNav"
>
{name}
</NavLink>
</Link>
))}
</Flex>
</Container>
);
}
Example #8
Source File: index.js From developer-portal with Apache License 2.0 | 5 votes |
Page = ({ file, guides, documentation, bannerFile, featGuidesFile, preview }) => {
const [mobile, setMobile] = useState(false);
const bpi = useBreakpointIndex({ defaultIndex: 2 });
const router = useRouter();
const [data, form] = useGithubJsonForm(file, landingPageFormOptions);
const [bannerData, bannerForm] = useBannerForm(bannerFile, preview);
const [featGuidesData, featGuidesForm] = useFeaturedGuidesForm(featGuidesFile, preview);
useFormScreenPlugin(bannerForm);
useFormScreenPlugin(featGuidesForm);
usePlugin(form);
useGithubToolbarPlugins();
useCreateDocument([...guides, ...documentation]);
useEffect(() => {
setMobile(bpi < 2);
}, [bpi]);
const featuredGuides = featGuidesData.featuredGuides.map((slug) =>
guides.find(({ data }) => data.frontmatter.slug === slug)
);
return (
<SingleLayout bannerData={bannerData.banner} mobile={mobile} router={router}>
<Head>
<title>Maker Protocol Developer Portal</title>
</Head>
<InlineForm form={form}>
<Grid sx={{ rowGap: 6 }}>
<PageLead cta="Start learning about the Maker Protocol" mobile={mobile} />
<GuideList title="Featured Guides" path="guides" guides={featuredGuides} />
<IntroText mobile={mobile} />
<Grid>
<Container>
<Heading variant="megaHeading">
Get Started <span sx={{ color: 'onBackgroundMuted' }}>With</span>
</Heading>
</Container>
<Grid sx={{ rowGap: 5 }}>
<DocumentationList />
<LibrariesSdks />
</Grid>
</Grid>
<SecurityFeatures />
<CommunityCta mobile={mobile} />
<AboutThisSite preview={preview} />
<NewsletterCallout />
</Grid>
</InlineForm>
</SingleLayout>
);
}
Example #9
Source File: authorizing.js From developer-portal with Apache License 2.0 | 5 votes |
// Our GitHub app redirects back to this page with auth code
export default function Authorizing() {
// Let the main app know, that we received an auth code from the GitHub redirect
useGithubAuthRedirect();
return <Container>Authorizing with GitHub, please wait...</Container>;
}
Example #10
Source File: ResourcesLayout.js From developer-portal with Apache License 2.0 | 5 votes |
ResourcesLayout = ({
resourcePath,
sidebar,
slug,
toc,
navData,
mobile,
router,
children,
}) => {
return resourcePath === ContentTypes.DOCUMENTATION ? (
<SingleLayout
mobile={mobile}
subnav={<SubNav links={navData.navItems} router={router} />}
router={router}
>
<Grid columns={['auto', 'auto', '1fr 4fr 1fr']} gap="0">
{sidebar || <Box />}
<Box
sx={{
borderRadius: 0,
py: 0,
px: 4,
pb: 4,
border: mobile ? undefined : 'solid',
borderColor: 'muted',
borderWidth: '0 1px 0 0',
}}
>
{children}
</Box>
{!mobile && <Infobar resourcePath={resourcePath} slug={slug} toc={toc} />}
</Grid>
</SingleLayout>
) : (
<GuidesLayout
mobile={mobile}
subnav={<SubNav links={navData.navItems} router={router} />}
router={router}
infobar={!mobile && <Infobar resourcePath={resourcePath} slug={slug} toc={toc} />}
>
<Container sx={{}}>
<Grid columns={'auto'}>
<Box
sx={{
border: mobile ? undefined : 'solid',
borderColor: 'muted',
borderWidth: '0 1px 0 0',
pr: [0, 0, 4],
}}
>
{children}
</Box>
</Grid>
</Container>
</GuidesLayout>
);
}
Example #11
Source File: SubNav.js From developer-portal with Apache License 2.0 | 5 votes |
SubNav = ({ links, query, router }) => {
const activeGroup = useStore((state) => state.activeGroup);
const activeLink = links.find((link) => link.slug === activeGroup);
const refs = useMemo(() => Array.from({ length: links.length }).map(() => createRef()), [
links.length,
]);
useEffect(() => {
setTimeout(() => {
const idx = links.indexOf(activeLink);
refs[idx]?.current?.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center',
});
}, 200);
}, [activeLink, links, refs, router?.query.slug]);
return (
<Box
sx={{
border: 'light',
borderColor: 'muted',
borderWidth: '1px 0 1px 0',
bg: 'background',
}}
>
<Container sx={{ mt: 2 }}>
<Flex
as="nav"
sx={{
alignItems: 'center',
pb: 2,
overflow: 'auto',
'::-webkit-scrollbar': {
display: 'none',
},
scrollbarWidth: 'none',
}}
>
{links.map(({ name, url, slug }, i) => (
<Link href={{ pathname: url, query }} passHref key={name}>
<NavLink
ref={refs[i]}
sx={{
color: slug === activeGroup ? 'primary' : undefined,
minWidth: 'max-content',
pl: 2,
pr: 4,
'&:first-of-type': { pl: 0 },
}}
>
{name}
</NavLink>
</Link>
))}
</Flex>
</Container>
</Box>
);
}
Example #12
Source File: SecurityFeatures.js From developer-portal with Apache License 2.0 | 5 votes |
SecurityFeatures = () => {
return (
<Container>
<Flex
sx={{
flexDirection: 'column',
}}
>
<Heading variant="largeHeading">Security Features</Heading>
<Flex
sx={{
alignItems: 'center',
mt: 5,
}}
>
<Grid columns={[1, '1fr 2fr']}>
<Icon color="textMuted" name="security" size={7} sx={{ ml: 4 }} />
<Flex
sx={{
flexDirection: 'column',
width: ['100%', '80%', '100%'],
p: 0,
ml: [0, 5, 0],
}}
>
<Heading variant="mediumHeading" sx={{ pb: 3 }}>
Security details
</Heading>
<Text sx={{ pb: 3, fontSize: [4, 5], color: 'onBackgroundMuted' }}>
<InlineTextarea name="securitySubtext" />
</Text>
<Link href="/security">
<Flex sx={{ alignItems: 'center' }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink>Learn more about Security</ThemeLink>
</Flex>
</Link>
</Flex>
</Grid>
</Flex>
</Flex>
</Container>
);
}
Example #13
Source File: IntroText.js From developer-portal with Apache License 2.0 | 5 votes |
IntroText = ({ mobile }) => {
return (
<Container>
<Flex
sx={{
alignItems: 'center',
flexWrap: mobile ? 'wrap' : 'nowrap',
}}
>
<Flex pb="4" sx={{ width: '100%', flexDirection: 'column', minWidth: ['50vw', 600] }}>
<Heading variant="megaHeading">About</Heading>
<Heading
variant="megaHeading"
sx={{
color: 'onBackgroundMuted',
}}
>
The Protocol
</Heading>
</Flex>
<Heading
sx={{
pb: 4,
color: 'onBackgroundMuted',
}}
>
<InlineTextarea name="aboutSubheading" />
</Heading>
</Flex>
<Grid columns={[1, 2]}>
<Flex sx={{ flexDirection: 'column', width: '100%' }}>
<Text
sx={{
pb: 4,
color: 'onBackgroundMuted',
}}
>
<InlineTextarea name="aboutMakerProtocol" />
</Text>
<Link href="/documentation/introduction-to-the-maker-protocol">
<Flex sx={{ alignItems: 'center', pb: [5, 0] }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink>Learn more about the Maker Protocol.</ThemeLink>
</Flex>
</Link>
</Flex>
<Flex sx={{ px: 4, flexDirection: 'column' }}>
<Heading sx={{ pb: 3, pr: [0, 0, 6] }}>
<InlineText name="devUpdates1" />
</Heading>
<EmailSignup sx={{ fontSize: 5 }} placeholder="We saved a slot for your email" />
</Flex>
</Grid>
</Container>
);
}
Example #14
Source File: Header.js From developer-portal with Apache License 2.0 | 5 votes |
Header = ({ query, subnav, mobile, router }) => {
const [mobileOpened, setMobileOpened] = useState(false);
useEffect(() => {
setMobileOpened(false);
}, [router?.asPath]);
return (
<Box
sx={{ width: '100%', zIndex: 1, position: [mobileOpened ? 'fixed' : undefined, undefined] }}
>
{mobileOpened ? (
<MobileMenu close={() => setMobileOpened(false)} bannerData={bannerData} />
) : (
<>
{!mobile && <Banners bannerData={bannerData} />}
<Container as="header" mt={[0, 2]} sx={{ bg: 'background' }}>
<Flex
sx={{
alignItems: 'center',
justifyContent: 'space-between',
mb: [0, 3],
py: [2, 0],
}}
>
<Link href="/" passHref>
<ThemeLink>
<Icon name="maker" color="text" size={4} />
</ThemeLink>
</Link>
<Flex sx={{ alignItems: 'center' }}>
<Flex
as="nav"
sx={{
alignItems: 'center',
}}
>
{LINKS.map(({ name, url }) => (
<Link href={{ pathname: url, query }} passHref key={name}>
<NavLink
key={name}
sx={{
display: ['none', 'none', 'block'],
pr: 4,
'&:last-child': { pr: [null, 0] },
}}
variant="links.nav"
>
{name}
</NavLink>
</Link>
))}
</Flex>
<IconButton sx={{ display: ['block', 'block', 'none'], cursor: 'pointer' }}>
<Icon
name="dp_menu"
size="auto"
color="text"
sx={{
height: 24,
width: 19,
}}
onClick={() => setMobileOpened(!mobileOpened)}
/>
</IconButton>
</Flex>
</Flex>
</Container>
</>
)}
{subnav ?? null}
</Box>
);
}
Example #15
Source File: GuideList.js From developer-portal with Apache License 2.0 | 5 votes |
GuideList = ({ guides, title, path }) => {
return (
<Flex>
<Box>
<Container>
<Flex
sx={{
alignItems: 'center',
flexWrap: 'wrap',
mb: 3,
}}
>
<Heading variant="largeHeading">{title}</Heading>
<Link href={'/guides'} passHref>
<Flex sx={{ ml: 'auto', alignItems: 'center' }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>View All</ThemeLink>
</Flex>
</Link>
</Flex>
</Container>
<Grid
gap={4}
sx={{
ml: [0, 2],
gridAutoFlow: 'column',
overflowX: 'auto',
pl: [2, 'calc(50% - 1140px / 2)'],
'::-webkit-scrollbar': {
display: 'none',
},
scrollbarWidth: 'none',
}}
>
{guides.map((guide, i) => {
if (!guide) return null;
const {
data: {
frontmatter: { group, title, slug, description, tags },
},
} = guide;
return (
<GuideCard
key={title}
title={title}
type={group}
description={description}
link={`/${path}/${slug}/`}
linkText={'Read'}
icon={`stamp_${(i % 5) + 1}`}
tags={tags}
sx={{
width: 7,
border: 'light',
borderColor: 'muted',
borderRadius: 'small',
'&:hover': {
borderColor: 'primaryEmphasis',
},
p: 3,
}}
/>
);
})}
</Grid>
</Box>
</Flex>
);
}
Example #16
Source File: Ecosystem.js From developer-portal with Apache License 2.0 | 5 votes |
Ecosystem = ({ title, items }) => {
const tabs = items
.reduce((acc, { categories }) => acc.push(...categories) && acc, [])
.filter((item, idx, array) => array.indexOf(item) === idx)
.sort();
const [activeTab, setActiveTab] = useState(tabs[0]);
return (
<Container>
<Flex
sx={{
flexDirection: 'column',
mb: 6,
}}
>
<Flex
sx={{
pb: 4,
alignItems: 'center',
}}
>
<Flex sx={{ width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
<Heading>{title}</Heading>
<ThemeLink href={SUBMIT_LINK} target="_blank">
<Flex sx={{ alignItems: 'center' }}>
<Text sx={{ color: 'text', cursor: 'pointer' }}>Submit your tool</Text>
<Icon sx={{ ml: 2 }} color="primary" name={'arrow_right'}></Icon>
</Flex>
</ThemeLink>
</Flex>
</Flex>
<Flex
sx={{
alignItems: 'center',
pb: 2,
overflow: 'auto',
}}
>
{tabs.map((name) => (
<NavLink
key={name}
onClick={() => setActiveTab(name)}
sx={{
color: activeTab === name ? 'primary' : undefined,
minWidth: 'max-content',
pl: 2,
pr: 4,
'&:first-of-type': { pl: 0 },
}}
>
{EcosystemCategories[name]}
</NavLink>
))}
</Flex>
<Grid columns={[1, 2]} sx={{ width: '100%' }}>
{items
.filter(({ categories }) => categories.includes(activeTab))
.map(({ title, link, description }) => {
return <ListItem key={title} title={title} description={description} link={link} />;
})}
</Grid>
</Flex>
</Container>
);
}
Example #17
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 #18
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 #19
Source File: ArticlesList.js From developer-portal with Apache License 2.0 | 5 votes |
ArticlesList = ({ resources, title, path }) => {
const bpi = useBreakpointIndex({ defaultIndex: 2 });
return (
<Container>
<Flex
sx={{
flexDirection: 'column',
}}
>
<Flex
sx={{
pb: 4,
alignItems: 'center',
}}
>
<Heading pr={3}>{title}</Heading>
</Flex>
<Grid sx={{ width: '100%' }}>
{resources.map(
({
data: {
frontmatter: { group, title, slug, description },
},
}) => {
return (
<ListItem
key={title}
title={title}
type={group}
description={description}
link={`/${path}/${slug}/`}
linkText={'Read'}
isMobile={bpi < 2}
/>
);
}
)}
</Grid>
</Flex>
</Container>
);
}
Example #20
Source File: AboutThisSite.js From developer-portal with Apache License 2.0 | 5 votes |
AboutThisSite = ({ preview }) => {
return (
<Container>
<Grid columns={[1, 2]}>
<Flex sx={{ flexDirection: 'column', alignSelf: 'end' }}>
<Heading
variant="megaHeading"
sx={{
color: 'onBackgroundMuted',
}}
>
About
</Heading>
<Heading variant="megaHeading">This Site</Heading>
</Flex>
<Heading sx={{ alignSelf: 'end', pb: 3 }}>
<InlineTextarea name="aboutThisSiteSubheading" />
</Heading>
</Grid>
<Flex>
<Text
sx={{
py: [0, 4],
color: 'onBackgroundMuted',
columns: preview ? undefined : '2 200px',
width: '100%',
}}
>
<InlineTextarea name="aboutThisSiteSubtext" />
</Text>
</Flex>
<Flex sx={{ width: '100%', justifyContent: 'center' }}>
<Flex sx={{ flexDirection: 'column', pt: 2, justifyContent: 'center' }}>
<Box
sx={{
ml: [0, 'auto'],
px: [0, 4],
py: [3, 3, 4],
}}
>
<EditLink />
</Box>
<ThemeLink href={`${GITHUB_EDIT_LINK}/data/landingPage.json`} target="_blank">
<Flex sx={{ alignItems: 'center', justifyContent: 'center' }}>
<Icon sx={{ mr: 2 }} color="primary" name="github"></Icon>
<Text sx={{ color: 'text', cursor: 'pointer' }}>Edit on Github</Text>
</Flex>
</ThemeLink>
</Flex>
</Flex>
</Container>
);
}
Example #21
Source File: about.js From github-covid-finder with MIT License | 5 votes |
About = () => {
return (
<Layout>
<SEO />
<Container
sx={{
padding: 4,
color: 'text',
fontFamily: 'inter',
textAlign: 'center',
backgroundColor: 'cardBackground',
borderRadius: '8px',
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'cardBorder',
lineHeight: '24px',
}}
>
<Box p={4}>
<h3>
"Opportunity 3 - Start <em>contributing</em> immediately
</h3>
<Text>
It would be great if any software engineer with spare time can just
peruse open Github issues across all OpenAir [Covid-19] projects,
filter for their area of expertise and just submit little PRs within
their specific time constraints. You shouldn’t even need to engage
too deeply with the wider project organisation; just see a list of
valuable quickwins that you can tackle rapidly to add value to any
team that needs it."
</Text>
</Box>
<p>
This project was inspired by the above excerpt from
<Link
href="https://jonnyparris.github.io/COVID-helping"
sx={{ color: 'secondary' }}
target="_blank"
rel="noopener noreferrer"
>
this blogpost.
</Link>
</p>
</Container>
</Layout>
)
}
Example #22
Source File: LibrariesSdks.js From developer-portal with Apache License 2.0 | 4 votes |
LibrariesSdks = () => {
const daijsCode = `import Maker from '@makerdao/dai';
const maker =
await Maker.create('http', {
url: myRpcUrl,
privateKey: myPrivateKey
});
const vault =
await maker
.service('mcd:cdpManager')
.openLockAndDraw(
'ETH-A', ETH(50), DAI(1000)
);`;
return (
<Container>
<Heading variant="largeHeading" pb={3}>
Libraries
</Heading>
<Grid columns={[1, '1fr auto']} sx={{ gridColumnGap: 4, gridRowGap: [4, 'auto'] }}>
<CodeWindow code={daijsCode} />
<Grid columns={[1, 'auto', 2]} sx={{ gridRowGap: 3, gridTemplateRows: '2em' }}>
<Heading variant="smallHeading">Dai.js</Heading>
<Flex
sx={{
flexDirection: 'column',
gridRowStart: 2,
justifyContent: 'space-between',
pb: [4, 0],
}}
>
<Flex sx={{ flexDirection: 'column', color: 'onBackgroundMuted' }}>
<Text
variant="plainText"
sx={{
pb: 2,
}}
>
<InlineTextarea name="sdksAndToolsHeading" />
</Text>
<Text>
<InlineTextarea name="sdksAndToolsText" />
</Text>
</Flex>
<Link href="/documentation/introduction-to-dai-js">
<Flex sx={{ alignItems: 'center', py: [3, 3, 0] }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink>View Dai.js docs</ThemeLink>
</Flex>
</Link>
</Flex>
<Flex
sx={{
flexDirection: 'column',
gridRowStart: ['auto', 4, 2],
gridColumnStart: [1, 1, 2],
}}
>
<Flex
sx={{
flexDirection: 'column',
color: 'onBackgroundMuted',
}}
>
<Text sx={{ pb: 2, fontSize: [4, 5] }}>
<InlineTextarea name="pyMakerHeading" />
</Text>
<Text>
<InlineTextarea name="pyMakerSubtext" />
</Text>
</Flex>
<Link href="/documentation/pymaker">
<Flex sx={{ alignItems: 'center', py: [3, 3, 4] }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink>View pyMaker docs</ThemeLink>
</Flex>
</Link>
</Flex>
</Grid>
</Grid>
<Grid
columns={[1, 'auto', 3]}
sx={{
pt: 4,
}}
>
<Heading
variant="largeHeading"
sx={{ py: 4, gridColumnStart: [1, 2], gridColumnEnd: [2, 4] }}
>
<InlineTextarea name="toolsHeading" />
</Heading>
<Flex
sx={{
flexDirection: 'column',
gridColumnStart: [1, 2],
}}
>
<Icon name="keeper" color="textMuted" sx={{ width: '164px', height: '164px', mb: 4 }} />
<Heading>Keepers</Heading>
<Text sx={{ py: 3, color: 'onBackgroundMuted' }}>
<InlineTextarea name="keepersSubtext" />
</Text>
<Link href="/documentation/introduction-to-auction-keepers">
<Flex sx={{ alignItems: 'center' }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink>Learn more about Maker Keepers</ThemeLink>
</Flex>
</Link>
</Flex>
<Flex
sx={{
flexDirection: 'column',
gridColumnStart: [1, 3],
mt: [4, 0],
}}
>
<Icon
name="wireframeGlobe"
color="textMuted"
sx={{ width: '164px', height: '164px', mb: 4 }}
/>
<Heading>CLIs</Heading>
<Text sx={{ py: 3, color: 'onBackgroundMuted' }}>
<InlineTextarea name="CLIsSubtext" />
</Text>
<Link href="/documentation/mcd-cli">
<Flex sx={{ alignItems: 'center', mt: 'auto' }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink>Learn more about the CLIs</ThemeLink>
</Flex>
</Link>
</Flex>
</Grid>
</Container>
);
}
Example #23
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>
);
}
Example #24
Source File: PageLead.js From developer-portal with Apache License 2.0 | 4 votes |
PageLead = ({ cta, mobile }) => {
return (
<Container>
<Flex sx={{ py: [4, 4, 6], flexDirection: 'column', position: 'relative' }}>
<Icon
color="textMuted"
name="rect_1"
size="100px"
sx={{
position: 'absolute',
left: mobile ? '5%' : '30%',
transform: mobile ? 'scale(0.5, 0.5)' : undefined,
top: mobile ? '-10%' : '30px',
}}
/>
<Icon
color="textMuted"
name="rect_2"
size="120px"
sx={{
position: 'absolute',
top: mobile ? '-50px' : '85px',
right: mobile ? '30%' : '200px',
transform: mobile ? 'scale(0.5, 0.5)' : undefined,
}}
/>
<Icon
color="textMuted"
name="rect_3"
size="160px"
sx={{
position: 'absolute',
top: mobile ? '-50px' : '200px',
right: mobile ? '-5%' : '25px',
transform: mobile ? 'scale(0.3, 0.3)' : undefined,
}}
/>
<Icon
color="textMuted"
name="rect_4"
size="120px"
sx={{
position: 'absolute',
bottom: mobile ? '-15%' : '65px',
right: mobile ? '10%' : '225px',
transform: mobile ? 'scale(0.5, 0.5)' : undefined,
}}
/>
<Icon
color="textMuted"
name="rect_5"
size="115px"
sx={{
position: 'absolute',
bottom: mobile ? '-60%' : '-50px',
left: mobile ? '60%' : '400px',
transform: mobile ? 'translate(-100%, -100%) scale(0.5, 0.5);' : undefined,
}}
/>
<Icon
color="textMuted"
name="rect_6"
size="180px"
sx={{
position: 'absolute',
bottom: mobile ? '20px' : '40px',
left: mobile ? undefined : '-65px',
right: mobile ? '67%' : undefined,
transform: mobile ? 'scale(0.4, 0.4)' : undefined,
}}
/>
<Heading variant="megaHeading">
<InlineText name="primaryNavHeader" />
</Heading>
<Heading sx={{ color: 'onBackgroundMuted' }} variant="megaHeading">
<InlineText name="secondaryNavHeader" />
</Heading>
<Flex sx={{ flexDirection: 'column', pl: [5, 7], mt: 3, width: ['100%', '75%'] }}>
<Text
className="subtext"
sx={{
color: 'onBackgroundMuted',
mb: 2,
}}
>
<InlineText name="subtext" />
</Text>
<Link href="/documentation/introduction-to-the-maker-protocol">
<Flex sx={{ alignItems: 'center' }}>
<Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
<ThemeLink>{cta}</ThemeLink>
</Flex>
</Link>
</Flex>
</Flex>
</Container>
);
}
Example #25
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>
);
}