Prompt Operators
Understanding how to use prompt operations to include, exclude or merge prompts and their contexts together.
Prompt Operator Example
Prompt
prompt:
create a navigation bar or drawer for a bicycle rental web app in react chakra uiResponse
import { Box, Flex, Link, Text } from "@chakra-ui/core";
const Navbar = () => (
<Flex
as="nav"
align="center"
justify="space-between"
wrap="wrap"
padding="1.5rem"
bg="teal.500"
color="white"
>
<Flex align="center" mr={5}>
<Text fontSize="xl">Bicycle Rental</Text>
</Flex>
<Box display={{ sm: "block", md: "none" }} onClick={toggle}>
<svg
fill="white"
width="12px"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</Box>
<Box
display={{ sm: show ? "block" : "none", md: "flex" }}
width={{ sm: "full", md: "auto" }}
alignItems="center"
flexGrow={1}
>
<Link
mx="3"
fontWeight="medium"
color="white"
fontSize="lg"
_hover={{ color: "teal.200" }}
>
Home
</Link>
<Link
mx="3"
fontWeight="medium"
color="white"
fontSize="lg"
_hover={{ color: "teal.200" }}
>
Bikes
</Link>
<Link
mx="3"
fontWeight="medium"
color="white"
fontSize="lg"
_hover={{ color: "teal.200" }}
>
Rentals
</Link>
</Box>
</Flex>
);
export default Navbar;Last updated