theme-ui#NavLink TypeScript Examples
The following examples show how to use
theme-ui#NavLink.
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: Header.tsx From nft-market with MIT License | 5 votes |
|
Header = () => {
const history = useHistory()
const location = useLocation()
const { user, isAuthenticated } = useAppState()
return (
<Box bg="black">
<Flex sx={{ alignItems: 'center', p: 3 }} as="nav">
<Image
onClick={() => {
history.push('/')
}}
sx={{ width: 50, cursor: 'pointer' }}
src="/static/logo.png"
/>
<Heading sx={{ ml: [1, 2], color: 'white' }} as="h4">
ERC721 Marketplace{' '}
<Text sx={{ display: ['none', 'block'] }}>+ OpenSea.io on Rinkeby Network</Text>
</Heading>
<UserMenu />
</Flex>
{isAuthenticated && user && (
<Flex bg="midGray" py={3} sx={{ justifyContent: 'center' }}>
<NavLink
sx={{
pointerEvents: location.pathname === '/' ? 'none' : 'visible',
color: location.pathname === '/' ? 'green' : 'white',
}}
onClick={() => history.push('/')}
>
Marketplace
</NavLink>
<Box sx={{ width: 50 }} />
<NavLink
sx={{
pointerEvents: location.pathname === '/profile' ? 'none' : 'visible',
color: location.pathname === '/profile' ? 'green' : 'white',
}}
onClick={() => history.push('/profile')}
>
Profile
</NavLink>
</Flex>
)}
</Box>
)
}
Example #2
| Source File: CartSidebarView.tsx From nextjs-shopify with MIT License | 4 votes |
|
CartSidebarView: FC = () => {
const checkoutUrl = useCheckoutUrl()
const cart = useCart()
const subTotal = cart?.subtotalPrice
const total = ' - '
const items = cart?.lineItems ?? []
const isEmpty = items.length === 0
const [cartUpsell, setCartUpsell] = useState()
useEffect(() => {
async function fetchContent() {
const items = cart?.lineItems || []
const cartUpsellContent = await builder
.get('cart-upsell-sidebar', {
cacheSeconds: 120,
userAttributes: {
itemInCart: items.map((item: any) => item.variant.product.handle),
} as any,
})
.toPromise()
setCartUpsell(cartUpsellContent)
}
fetchContent()
}, [cart?.lineItems])
return (
<Themed.div
sx={{
height: '100%',
overflow: 'auto',
paddingBottom: 5,
bg: 'text',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
px: 2,
color: 'background',
...(isEmpty && { justifyContent: 'center' }),
}}
>
{isEmpty ? (
<>
<Bag />
Your cart is empty
<Text>
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</Text>
</>
) : (
<>
{items.map((item: any) => (
<CartItem
key={item.id}
item={item}
// todo update types
currencyCode={item.variant?.priceV2?.currencyCode || 'USD'}
/>
))}
<Card sx={{ marginLeft: 'auto', minWidth: '10rem', paddingLeft: 5 }}>
<Grid gap={1} columns={2} sx={{ my: 3 }}>
<Text>Subtotal:</Text>
<Text sx={{ marginLeft: 'auto' }}>{subTotal}</Text>
<Text>Shipping:</Text>
<Text sx={{ marginLeft: 'auto' }}> - </Text>
<Text>Tax: </Text>
<Text sx={{ marginLeft: 'auto' }}> - </Text>
</Grid>
<Divider />
<Grid gap={1} columns={2}>
<Text variant="bold">Estimated Total:</Text>
<Text variant="bold" sx={{ marginLeft: 'auto' }}>
{total}
</Text>
</Grid>
</Card>
<BuilderComponent content={cartUpsell} model="cart-upsell-sidebar" />
{checkoutUrl && (
<NavLink
variant="nav"
sx={{ width: '100%', m: 2, p: 12, textAlign: 'center' }}
href={checkoutUrl!}
>
Proceed to Checkout
</NavLink>
)}
</>
)}
</Themed.div>
)
}
Example #3
| Source File: Token.tsx From nft-market with MIT License | 4 votes |
|
Token = ({ token, isOnSale, onTransfer, onBuy, onSale }: TokenCompProps) => {
const [transfer, setTransfer] = useState<boolean>(false)
const [onSaleActive, setOnSale] = useState<boolean>(false)
const [address, setAddress] = useState<string>('')
const [price, setPrice] = useState<string>('')
const { user, ethPrice, contractDetails, transferToken, buyToken, setTokenSale } = useAppState()
const onTransferClick = async (e: FormEvent | MouseEvent) => {
e.preventDefault()
if (onTransfer && utils.isAddress(address)) {
transferToken(token.id, address)
setTransfer(false)
}
}
const onBuyClick = (e: MouseEvent) => {
e.preventDefault()
onBuy && buyToken(token.id, token.price)
}
const onSaleClick = async (e: MouseEvent) => {
e.preventDefault()
if (!onSale) return
try {
await setTokenSale(token.id, utils.parseEther(price), true)
setOnSale(false)
} catch (e) {
throw e
}
}
const { data: owner } = useSWR(token.id, fetchOwner)
const { data } = useSWR(`${METADATA_API}/token/${token.id}`, fetcherMetadata)
const tokenPriceEth = formatPriceEth(token.price, ethPrice)
if (!data)
return (
<Card variant="nft">
<Spinner />
</Card>
)
if (!data.name) return null
return (
<Card variant="nft">
<Image
sx={{ width: '100%', bg: 'white', borderBottom: '1px solid black' }}
src={data.image}
/>
<Box p={3} pt={2}>
<Heading as="h2">{data.name}</Heading>
<Divider variant="divider.nft" />
<Box>
<Text sx={{ color: 'lightBlue', fontSize: 1, fontWeight: 'bold' }}>Price</Text>
<Heading as="h3" sx={{ color: 'green', m: 0, fontWeight: 'bold' }}>
{constants.EtherSymbol} {Number(utils.formatEther(token.price)).toFixed(2)}{' '}
<Text sx={{ color: 'navy' }} as="span" variant="text.body">
({tokenPriceEth})
</Text>
</Heading>
{owner && typeof owner === 'string' && !onTransfer && (
<Box mt={2}>
<Text as="p" sx={{ color: 'lightBlue', fontSize: 1, fontWeight: 'bold' }}>
Owner
</Text>
<NavLink
target="_blank"
href={`https://rinkeby.etherscan.io/address/${owner}`}
variant="owner"
style={{
textOverflow: 'ellipsis',
width: '100%',
position: 'relative',
overflow: 'hidden',
}}
>
{toShort(owner)}
</NavLink>
</Box>
)}
<Box mt={2}>
<NavLink
target="_blank"
href={`https://testnets.opensea.io/assets/${contractDetails?.address}/${token.id}`}
variant="openSea"
>
View on Opensea.io
</NavLink>
</Box>
</Box>
{onTransfer && (
<Flex mt={3} sx={{ justifyContent: 'center' }}>
{transfer && (
<Box sx={{ width: '100%' }}>
<Flex
onSubmit={onTransferClick}
sx={{ width: '100%', flexDirection: 'column' }}
as="form"
>
<Input
onChange={e => setAddress(e.currentTarget.value)}
placeholder="ETH Address 0x0..."
/>
</Flex>
<Flex mt={2}>
<Button sx={{ bg: 'green' }} onClick={onTransferClick} variant="quartiary">
Confirm
</Button>
<Button
sx={{ bg: 'red' }}
ml={2}
onClick={() => setTransfer(false)}
variant="quartiary"
>
Cancel
</Button>
</Flex>
</Box>
)}
{onSaleActive && (
<Box sx={{ width: '100%' }}>
<Flex
onSubmit={onTransferClick}
sx={{ width: '100%', flexDirection: 'column' }}
as="form"
>
<Input
onChange={e => setPrice(e.currentTarget.value)}
placeholder="Token Price in ETH"
/>
</Flex>
<Flex mt={2}>
<Button sx={{ bg: 'green' }} onClick={onSaleClick} variant="quartiary">
Confirm
</Button>
<Button
sx={{ bg: 'red' }}
ml={2}
onClick={() => setOnSale(false)}
variant="quartiary"
>
Cancel
</Button>
</Flex>
</Box>
)}
{!transfer && !onSaleActive && (
<Flex sx={{ flexDirection: 'column', width: '100%', justifyContent: 'center' }}>
<Button onClick={() => setTransfer(!transfer)} variant="tertiary">
Transfer
</Button>
{isOnSale ? (
<Button
mt={2}
onClick={() => onSale && setTokenSale(token.id, token.price, false)}
variant="tertiary"
>
Remove from Sale
</Button>
) : (
<Button mt={2} onClick={() => setOnSale(!onSaleActive)} variant="tertiary">
Put Token for Sale
</Button>
)}
</Flex>
)}
</Flex>
)}
{onBuy && (
<Flex mt={3} sx={{ justifyContent: 'center', width: '100%' }}>
<Button
sx={{
opacity: !!user?.ownedTokens.find(
a => utils.formatUnits(a.id) === utils.formatUnits(token.id)
)
? 0.5
: 1,
pointerEvents: !!user?.ownedTokens.find(
a => utils.formatUnits(a.id) === utils.formatUnits(token.id)
)
? 'none'
: 'visible',
}}
onClick={onBuyClick}
variant="quartiary"
>
Buy Token
</Button>
</Flex>
)}
</Box>
</Card>
)
}
