theme-ui#Image JavaScript Examples
The following examples show how to use
theme-ui#Image.
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: 404.js From ziggurat-web with BSD Zero Clause License | 6 votes |
|
render() {
const {memeURL} = this.state
return (
<Layout>
<meta http-equiv="refresh" content="10;url=/" />
<SEO title="404: Not found" />
<Flex
sx={{
justifyContent:"center",
alignItems:"center",
flexDirection: "column",
}}>
<h1 sx={{
fontFamily: "body",
fontSize: ["1.3rem", "1.5rem", "2rem", "2rem", "2.5rem"],
color: "white",
textAlign: "center",
letterSpacing: "0.05em",
}}>404: You got lost in Mesopotamia</h1>
<p
sx={{
fontFamily: "body",
color: "white",
textAlign: "center",
width: "60%",
fontSize: ["0.8rem", "1.2rem", "1.5rem", "1.5rem", "1.8rem"],
lineHeight: "1.5",
}}
>
Here's a programmer meme to cheer you up while we get you back to Ziggurat!</p>
<Image sx={{
width: ["80%", "60%", "40%", "45%", "40%", "25%"]
}} src={memeURL}></Image>
</Flex>
</Layout>
)
}
Example #2
| Source File: price-product.js From use-shopping-cart with MIT License | 5 votes |
|
PriceProduct = (product) => {
const { addItem, redirectToCheckout } = useShoppingCart()
const { name, price, image, currency } = product
async function handleCheckout() {
const response = await fetch('/.netlify/functions/prices-create-session', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ [product.price_id]: { ...product, quantity: 1 } })
})
.then((res) => {
return res.json()
})
.catch((error) => console.log(error))
redirectToCheckout({ sessionId: response.sessionId })
}
return (
<Flex
sx={{
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Image
src={image}
sx={{ width: 200, height: 200, objectFit: 'contain' }}
/>
<Box>
<h3>{name}</h3>
<p>{formatCurrencyString({ value: price, currency })}</p>
</Box>
<Flex sx={{ flexDirection: 'column' }}>
<Button
onClick={() => addItem(product)}
backgroundColor={'black'}
marginBottom={10}
>
Add To Cart
</Button>
<Button onClick={handleCheckout} backgroundColor={'black'}>
Buy Now
</Button>
</Flex>
</Flex>
)
}
Example #3
| Source File: product.js From use-shopping-cart with MIT License | 5 votes |
|
Product = (product) => {
const { addItem, redirectToCheckout } = useShoppingCart()
const { name, price, image, currency } = product
async function handleCheckout() {
const response = await fetch('/.netlify/functions/create-session', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ [product.sku]: { ...product, quantity: 1 } })
})
.then((res) => {
return res.json()
})
.catch((error) => console.log(error))
redirectToCheckout({ sessionId: response.sessionId })
}
return (
<Flex
sx={{
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Image
src={image}
sx={{ width: 200, height: 200, objectFit: 'contain' }}
/>
<Box>
<h3>{name}</h3>
<p>{formatCurrencyString({ value: price, currency })}</p>
</Box>
<Flex sx={{ flexDirection: 'column' }}>
<Button
onClick={() => addItem(product)}
backgroundColor={'black'}
marginBottom={10}
>
Add To Cart
</Button>
<Button onClick={handleCheckout} backgroundColor={'black'}>
Buy Now
</Button>
</Flex>
</Flex>
)
}
Example #4
| Source File: MarkdownWrapper.js From developer-portal with Apache License 2.0 | 5 votes |
|
ImageWrapper = ({ alt, src, title }) => {
return <Image alt={alt} src={src} title={title} />;
}
Example #5
| Source File: index.js From medusa with MIT License | 5 votes |
|
Sidebar = ({ data, api }) => {
const [scrollPos, setScrollPos] = useState(0)
const [colorMode,] = useColorMode()
useEffect(() => {
const nav = document.querySelector("#nav")
const handleScroll = e => {
const pos = e.srcElement.scrollTop / 50
if (pos < 1) {
setScrollPos(pos)
}
}
nav.addEventListener("scroll", handleScroll)
return () => nav.removeEventListener("scroll", handleScroll)
}, [])
return (
<SideBarContainer
sx={{
position: "sticky",
top: "0",
bottom: "0",
height: "100vh",
backgroundColor: "var(--theme-ui-colors-background)",
boxShadow: "sidebarShadow",
minWidth: "var(--side-bar-width)",
flexDirection: "column",
}}
className="sidebar-container"
>
<Flex
sx={{
px: "4",
pt: "3",
background: "var(--theme-ui-colors-background)",
width: "calc(var(--side-bar-width) - 1px)",
flexDirection: "column",
}}
>
<Flex>
<Image
src={colorMode === 'light' ? Logo : LogoDark}
alt="Medusa logo"
onClick={() => navigate("/")}
sx={{
height: "32px",
cursor: "pointer",
}}
/>
</Flex>
<Flex py={4}>
<SideBarSelector api={api} />
</Flex>
</Flex>
<Flex
id="nav"
sx={{
flex: 1,
position: "relative",
px: "3",
pb: "3",
mr: "1px",
flexDirection: "column",
overflowY: "scroll",
pr: "6px",
scrollbarColor: "faded light",
}}
>
<SideBarFade opacity={scrollPos} />
{data.sections.map((s, i) => {
return <SideBarItem item={s} key={i} />
})}
</Flex>
</SideBarContainer>
)
}
Example #6
| Source File: overlay-about.js From cards with MIT License | 5 votes |
|
export default function OverlayAbout () {
const { theme } = useContext(AppContext)
const { color, contrast } = theme
return (
<>
<Box as='header'>
<Image
src='https://cdn.microlink.io/banner/cards.png'
alt='microlink cards'
/>
</Box>
<Text sx={{ color, my: 3, fontSize: 2, fontWeight: 'normal' }}>
<b>Microlink Cards</b> generates social images on demand, ready to be
embedded in your{' '}
<Text as='code' sx={{ fontFamily: 'mono' }}>
<meta>
</Text>{' '}
tags.
</Text>
<Text sx={{ color, my: 3, fontSize: 2, fontWeight: 'normal' }}>
Just write your preset once, feed it with dynamic content and reuse
forever. Read more into{' '}
<ExternalLink
sx={{ textDecoration: 'none', color: contrast }}
href='https://microlink.io/docs/cards/getting-started/overview'
>
documentation
</ExternalLink>
portal.
</Text>
<Text sx={{ my: 3, fontSize: 2, fontWeight: 'normal' }}>
Starts from <b>free</b> and code is available on{' '}
<ExternalLink
sx={{ textDecoration: 'none', color: contrast }}
href='https://github.com/microlinkhq/cards'
>
GitHub
</ExternalLink>
.
</Text>
</>
)
}
Example #7
| Source File: cart-display.js From use-shopping-cart with MIT License | 4 votes |
|
CartDisplay = () => {
const {
cartDetails,
cartCount,
formattedTotalPrice,
redirectToCheckout,
clearCart,
setItemQuantity
} = useShoppingCart()
async function handleSubmit(event) {
event.preventDefault()
const response = await fetch('/.netlify/functions/create-session', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(cartDetails)
})
.then((res) => res.json())
.catch((error) => console.log(error))
redirectToCheckout({ sessionId: response.sessionId })
}
async function handleCheckout(event) {
event.preventDefault()
const response = await fetch('/.netlify/functions/redirect-to-checkout', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(cartDetails)
})
.then((res) => res.json())
.catch((error) => console.log(error))
console.log('Checkout result:', response)
}
if (cartCount === 0) {
return (
<Flex
sx={{
textAlign: 'center',
flexDirection: 'column',
alignItems: 'center'
}}
>
<h2>Shopping Cart Display Panel</h2>
<p style={{ maxWidth: 300 }}>
You haven't added any items to your cart yet. That's a shame.
</p>
</Flex>
)
} else {
return (
<Flex
sx={{
flexDirection: 'column'
}}
>
<h2>Shopping Cart Display Panel</h2>
{Object.keys(cartDetails).map((sku, index) => {
const { name, quantity, image } = cartDetails[sku]
return (
<Flex
key={sku}
sx={{
flexDirection: 'column',
width: '100%',
marginBottom: 25,
paddingLeft: 20
}}
>
<Flex sx={{ alignItems: 'center' }}>
<Image
sx={{ width: 50, height: 'auto', marginRight: 10 }}
src={image}
/>
<p>{name}</p>
</Flex>
<Input
type={'number'}
max={99}
sx={{ width: 60 }}
value={quantity}
onChange={(event) => {
setItemQuantity(sku, event.target.valueAsNumber)
}}
/>
</Flex>
)
})}
<Box>
<p aria-live="polite" aria-atomic="true">
Total Item Count: {cartCount}
</p>
<p aria-live="polite" aria-atomic="true">
Total Price: {formattedTotalPrice}
</p>
</Box>
<Button
sx={{ backgroundColor: 'black' }}
marginBottom={10}
onClick={handleSubmit}
>
Checkout
</Button>
<Button
sx={{ backgroundColor: 'black' }}
marginBottom={10}
onClick={() => clearCart()}
>
Clear Cart Items
</Button>
<Button sx={{ backgroundColor: 'black' }} onClick={handleCheckout}>
Redirect To Checkout
</Button>
</Flex>
)
}
}
Example #8
| Source File: header.js From github-covid-finder with MIT License | 4 votes |
|
Header = ({ isShowSearch, searchCompProps, toggleModal }) => {
const [colorMode, setColorMode] = useColorMode()
return (
<Box
sx={{
borderBottom: "1px solid",
borderColor: 'cardBorder',
marginBottom: '24px'
}}>
<Flex
as="header"
sx={{
height: '120px',
alignItems: 'center',
justifyContent: 'space-between',
margin: '0 auto',
maxWidth: ['100%', '768px', '992px', '1400px'],
px: '15px',
}}
>
<Flex
sx={{
flex: 1,
alignItems: 'center',
}}
>
<Text
sx={{
fontSize: '24px',
color: 'white',
fontFamily: 'inter',
textAlign: 'center',
}}
>
<Link to="/" style={{ display: 'block', lineHeight: 0 }} >
<Image style={{ fill: '#FF4136', width: 180 }} src={colorMode === 'dark' ? logoWhite : logoBlack} />
</Link>
</Text>
{ isShowSearch &&
<Box
sx={{
width: '76%',
margin: '16px 16px 0px 16px',
'@media only screen and (max-width: 916px)': {
marginTop: 0,
width: 'auto',
display: 'flex',
justifyContent: 'flex-end',
margin: '0px 16px 0px auto',
},
'@media only screen and (max-width: 320px)': {
margin: '0px 6px',
},
}}
>
<Box
sx={{
'@media only screen and (max-width: 916px)': {
display: 'none',
},
}}
>
<Search {...searchCompProps}/>
</Box>
<Button
name="toggle-modal-with-search"
onClick={toggleModal}
backgroundColor="rgb(157, 31, 30)"
sx={{
padding: '6px 12px',
'@media only screen and (min-width: 916px)': {
display: 'none',
},
}}
>
<SearchIcon
style={{
width: 16,
height: 16,
}}
/>
</Button>
</Box>
}
</Flex>
<Flex
sx={{
alignItems: 'center',
justifyContent: 'space-between',
'@media only screen and (min-width: 916px)': {
marginBottom: 9,
},
}}
>
<Link to="/about">
<Text
sx={{
fontSize: '16px',
color: 'text',
fontFamily: 'inter',
textAlign: 'center',
mr: '1em'
}}
>
About
</Text>
</Link>
<a href="https://github.com/luisFilipePT/github-covid-finder" target="_blank" rel="noopener noreferrer">
<Text sx={{color: 'text', marginTop: '4px'}}>
<GithubIcon />
</Text>
</a>
<Button sx={{
fontFamily: 'inter',
marginLeft: '24px',
cursor: 'pointer'
}}
variant='selectTheme'
onClick={e => {
setColorMode(colorMode === 'default' ? 'dark' : 'default')
}}>
{colorMode === 'default' ? 'Dark' : 'Light'}
</Button>
</Flex>
</Flex>
</Box>
)
}
