Last active
April 12, 2021 07:48
-
-
Save jacques-blom/11dd350ab982aecc73facb7880899ab1 to your computer and use it in GitHub Desktop.
Wrapping Up our Drawing Tool
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
import {Box, Text, VStack} from '@chakra-ui/layout' | |
import {Skeleton} from '@chakra-ui/skeleton' | |
export const ImageInfo = () => { | |
return ( | |
<VStack spacing={2} alignItems="flex-start" width="100%"> | |
<Info label="Author" value="Value goes here" /> | |
<Info label="Image URL" value="Value goes here" /> | |
</VStack> | |
) | |
} | |
export const Info = ({label, value}: {label: string; value?: string}) => { | |
return ( | |
<Box width="175px"> | |
<Text fontSize="14px" fontWeight="500" mb="2px"> | |
{label} | |
</Text> | |
{value === undefined ? <Skeleton width="100%" height="21px" /> : <Text fontSize="14px">{value}</Text>} | |
</Box> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment