@chakra-ui/react#Code JavaScript Examples
The following examples show how to use
@chakra-ui/react#Code.
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: MDXComponents.js From benjamincarlson.io with MIT License | 6 votes |
|
MDXComponents = {
h1: (props) => <Heading as="h1" size="xl" my={4} {...props} />,
h2: (props) => <Heading as="h2" size="lg" fontWeight="bold" {...props} />,
h3: (props) => <Heading as="h3" size="md" fontWeight="bold" {...props} />,
h4: (props) => <Heading as="h4" size="sm" fontWeight="bold" {...props} />,
h5: (props) => <Heading as="h5" size="sm" fontWeight="bold" {...props} />,
h6: (props) => <Heading as="h6" size="xs" fontWeight="bold" {...props} />,
inlineCode: (props) => (
<Code colorScheme="yellow" fontSize="0.84em" {...props} />
),
br: (props) => <Box height="24px" {...props} />,
hr: Hr,
a: CustomLink,
p: (props) => <Text as="p" mt={0} lineHeight="tall" {...props} />,
ul: (props) => <Box as="ul" pt={2} pl={4} ml={2} {...props} />,
ol: (props) => <Box as="ol" pt={2} pl={4} ml={2} {...props} />,
li: (props) => <Box as="li" pb={1} {...props} />,
blockquote: Quote,
}
Example #2
| Source File: chakraMarkdownTheme.jsx From scaffold-directory with MIT License | 6 votes |
|
MdCode = ({ children }) => {
const { codeFontColor, codeBgColor } = useCustomColorModes();
return (
<Code borderRadius="md" px={2} py={1} color={codeFontColor} bg={codeBgColor}>
{children}
</Code>
);
}
Example #3
| Source File: TechStack.js From benjamincarlson.io with MIT License | 5 votes |
|
TechStack = () => {
const { colorMode } = useColorMode()
const colorSecondary = {
light: 'gray.600',
dark: 'gray.400'
}
const linkColor = {
light: 'blue.400',
dark: 'blue.600'
}
return (
<Box as="section" w="100%" mt={10} mb={20}>
<Heading letterSpacing="tight" size="lg" fontWeight={700} as="h2" mb={4}>
Tech Stack ⚙️
</Heading>
<Text color={colorSecondary[colorMode]} mb={4}>Each piece of technology used in this website is carefully thought out. I believe this is one of the best stacks there is to build websites of any size and domain.</Text>
<Box flexDir="column" overflowX="auto">
<Table variant="simple">
<Thead>
<Tr>
<Th>Type</Th>
<Th>Name</Th>
<Th>Route</Th>
<Th>Description</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>JS Framework</Td>
<Td><Link href="https://nextjs.org" color={linkColor[colorMode]} isExternal>Next JS</Link></Td>
<Td>n/a</Td>
<Td>Next.js was an easy choice given its large community and ability for rapid development.</Td>
</Tr>
<Tr>
<Td>CSS Framework</Td>
<Td><Link href="https://chakra-ui.com" color={linkColor[colorMode]} isExternal>Chakra UI</Link></Td>
<Td>n/a</Td>
<Td>I use Chakra UI because its components make a beautiful UI out of the box and are highly customizable.</Td>
</Tr>
<Tr>
<Td>Blog</Td>
<Td><Code>next-mdx-remote</Code></Td>
<Td>/blog/[slug].js</Td>
<Td>I use <Link href="https://github.com/hashicorp/next-mdx-remote" color={linkColor[colorMode]} isExternal>next-mdx-remote</Link> for my blog. Posts are stored in <Code>mdx</Code> files and pre-rendered.</Td>
</Tr>
<Tr>
<Td>Real-Time Statistics</Td>
<Td>Next.js api routes</Td>
<Td>/api/[].js</Td>
<Td>Multiple api routes that interact with the GitHub, YouTube, and Strava api to fetch my real-time social media data using Next.JS <Link href="https://nextjs.org/docs/api-routes/introduction" color={linkColor[colorMode]} isExternal>serverless functions</Link>.</Td>
</Tr>
<Tr>
<Td>Realtime Blog Post View/Like Count</Td>
<Td>Firebase Realtime Db</Td>
<Td>/api</Td>
<Td>I use <Link href="https://firebase.google.com" color={linkColor[colorMode]} isExternal>Google's Firebase</Link> to store view and like counts for my blog posts.</Td>
</Tr>
<Tr>
<Td>Deployment</Td>
<Td>Vercel</Td>
<Td>n/a</Td>
<Td>I use <Link href="https://vercel.com" color={linkColor[colorMode]} isExternal>Vercel</Link> to deploy my app. It's free, fast, integrates with GitHub, and overall a great experience.</Td>
</Tr>
<Tr>
<Td>Domain</Td>
<Td>Namecheap</Td>
<Td>n/a</Td>
<Td>My domain name is bought and stored through <Link color="blue.500" href="https://www.namecheap.com/" isExternal>Namecheap</Link>.</Td>
</Tr>
</Tbody>
</Table>
</Box>
</Box>
)
}
Example #4
| Source File: components.js From idena-web with MIT License | 5 votes |
|
export function Debug({children}) {
return (
<Code whiteSpace="pre" borderRadius="md" p={2}>
{JSON.stringify(children, null, 2)}
</Code>
)
}
Example #5
| Source File: Container.jsx From bottle-radio with MIT License | 4 votes |
|
Container = () => {
const { colorMode, toggleColorMode } = useColorMode();
const color = { light: "black", dark: "white" };
const [logoSpinning, setLogoSpinning] = useState(false);
const [modal, setModal] = useState();
const [showVisualiser, setShowVisualiser] = useState(false);
const [player, setPlayer] = useState();
const EmbedCode = () => {
const [show, setShow] = React.useState(false);
const handleToggle = () => setShow(!show);
return (
<Box mt="auto" pt={2} mb={3} mx={2}>
<Collapse in={show}>
<Code my={2} p={2} overflow="auto">
{`<iframe src = '${window.location.protocol}//${window.location.host}/embed' frameborder = '0' allowtransparency = 'true' style = 'width: 100%; min-height: 150px; border: 0;'></iframe>`}
</Code>
</Collapse>
<Button colorScheme="blue" variant="link" onClick={handleToggle}>
Embed player
</Button>
</Box>
);
};
return (
<Fragment>
<VisualiserProvider value={{ player, setPlayer }}>
<Box
width="100%"
minHeight="100vh"
bg={colorMode === "light" ? "#99c0ff" : "#1a202c"}
color={colorMode === "light" ? "black" : "white"}
>
{player && (
<Box pos="absolute" bottom={0} left={0} pointerEvents="none">
<Collapse in={showVisualiser}>
<Visualisation audio={player.current} />
</Collapse>
</Box>
)}
<Flex
direction="column"
justify="flex-start"
align="center"
width="100%"
maxWidth="960px"
minHeight="100vh"
mx="auto"
pt={5}
pos="relative"
zindex={1}
>
<Box
as={colorMode === "light" ? FaMoon : FaSun}
w="30px"
h="30px"
onClick={toggleColorMode}
color={color[colorMode]}
/>
<Box px={5}>
<Image
src="/logo512.png"
maxWidth="230px"
mx="auto"
mt={3}
className={logoSpinning ? "icon-spin" : ""}
onClick={() =>
logoSpinning ? setLogoSpinning(false) : setLogoSpinning(true)
}
/>
<ModalProvider value={{ modal, setModal }}>
<Player />
</ModalProvider>
<Links />
<Button
mt={2}
variant="link"
onClick={() => setShowVisualiser(!showVisualiser)}
>
Visualiser
</Button>
</Box>
<EmbedCode />
<Text mb={3}>
Powered by{" "}
<Link
href="https://github.com/MrLemur/bottle-radio"
color="teal.500"
isExternal
>
Bottle Radio
</Link>
</Text>
</Flex>
</Box>
</VisualiserProvider>
</Fragment>
);
}
