@chakra-ui/core#Stack JavaScript Examples
The following examples show how to use
@chakra-ui/core#Stack.
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: index.js From youtube with MIT License | 6 votes |
|
export default function Home() {
const color = useColorModeValue("red.500", "white")
return (
<Stack
as="main"
align="center"
>
<Flex
flexDirection="column"
maxWidth="700px"
>
<Flex
direction="row"
w="700px"
pt={4}
justify="space-between"
>
<DarkModeSwitch />
<Text color={color}>Home</Text>
</Flex>
<Heading
as="h1"
size="2xl"
fontWeight="bold"
>
Hello, World!
</Heading>
<Text my={4}>Hello, again</Text>
</Flex>
</Stack>
)
}
Example #2
| Source File: footer.js From dashboard with MIT License | 6 votes |
|
export default function Footer() {
const color = useColorModeValue('gray.900', 'gray.200');
const bgColor = useColorModeValue('gray.200', 'gray.500');
return (
<Stack direction="row" as="footer" mt={12} justify="center">
{links.map(([icon, route, title]) => (
<Link
href={route}
key={route}
isExternal
title={title}
color={color}
borderRadius="lg"
p={2}
_hover={{ bg: bgColor }}
>
<Box as={icon} boxSize={6} />
</Link>
))}
</Stack>
);
}
Example #3
| Source File: launch-pad.js From space-rockets-challenge with MIT License | 6 votes |
|
function RecentLaunches({ launches }) {
if (!launches?.length) {
return null;
}
return (
<Stack my="8" spacing="3">
<Text fontSize="xl" fontWeight="bold">
Last launches
</Text>
<SimpleGrid minChildWidth="350px" spacing="4">
{launches.map((launch) => (
<LaunchItem launch={launch} key={launch.flight_number} />
))}
</SimpleGrid>
</Stack>
);
}
Example #4
| Source File: header.js From covid-19-website with MIT License | 5 votes |
|
Header = () => {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<Flex
as="header"
backgroundColor="white"
paddingX={["1rem", "4.5rem"]}
paddingY={[1,6]}
justifyContent="space-between"
alignItems="center"
>
<GatsbyLink to="/">
<Code4Covid width={200}/>
</GatsbyLink>
<IconButton
display={["block", "block", "block", "block", "none"]} // Match this with the inverse of the buttons stack to use Chakra breakpoints
variant="ghost"
size="lg"
aria-label="Navigation Button"
icon="menu"
onClick={onOpen}
/>
<Drawer isOpen={isOpen} placement="right" onClose={onClose}>
<DrawerOverlay />
<DarkMode>
<DrawerContent backgroundColor="gray.700" color="white">
<DrawerCloseButton />
<DrawerBody>
<Stack as="nav" direction="column" marginTop={16} spacing={8}>
{PAGES.map(page => (
<NavLink
key={page.children + page.to}
fontSize={28}
color="white"
css={css`
[aria-current]& {
font-weight: 700;
}
`}
{...page}
/>
))}
<Link textAlign="center" href="https://twitter.com/code4covid" isExternal>
<TwitterIcon width="40px" style={{ display: "inline-block" }} />
</Link>
</Stack>
</DrawerBody>
</DrawerContent>
</DarkMode>
</Drawer>
</Flex>
)
}
Example #5
| Source File: home.js From space-rockets-challenge with MIT License | 5 votes |
|
export default function Home() {
return (
<Stack m="6" spacing="6">
<PageLink url="/launches">Browse SpaceX Launches</PageLink>
<PageLink url="/launch-pads">Browse SpaceX Launch Pads</PageLink>
</Stack>
);
}
Example #6
| Source File: launch-pad.js From space-rockets-challenge with MIT License | 5 votes |
|
function Header({ launchPad }) {
return (
<Flex
background={`linear-gradient(${randomColor()}, ${randomColor()})`}
bgPos="center"
bgSize="cover"
bgRepeat="no-repeat"
minHeight="15vh"
position="relative"
flexDirection={["column", "row"]}
p={[2, 6]}
alignItems="flex-end"
justifyContent="space-between"
>
<Heading
color="gray.900"
display="inline"
mx={[2, 4]}
my="2"
fontSize={["md", "3xl"]}
borderRadius="lg"
>
{launchPad.site_name_long}
</Heading>
<Stack isInline spacing="3">
<Badge variantColor="purple" fontSize={["sm", "md"]}>
{launchPad.successful_launches}/{launchPad.attempted_launches}{" "}
successful
</Badge>
{launchPad.stats === "active" ? (
<Badge variantColor="green" fontSize={["sm", "md"]}>
Active
</Badge>
) : (
<Badge variantColor="red" fontSize={["sm", "md"]}>
Retired
</Badge>
)}
</Stack>
</Flex>
);
}
Example #7
| Source File: launch.js From space-rockets-challenge with MIT License | 5 votes |
|
function Header({ launch }) {
return (
<Flex
bgImage={`url(${launch.links.flickr_images[0]})`}
bgPos="center"
bgSize="cover"
bgRepeat="no-repeat"
minHeight="30vh"
position="relative"
p={[2, 6]}
alignItems="flex-end"
justifyContent="space-between"
>
<Image
position="absolute"
top="5"
right="5"
src={launch.links.mission_patch_small}
height={["85px", "150px"]}
objectFit="contain"
objectPosition="bottom"
/>
<Heading
color="white"
display="inline"
backgroundColor="#718096b8"
fontSize={["lg", "5xl"]}
px="4"
py="2"
borderRadius="lg"
>
{launch.mission_name}
</Heading>
<Stack isInline spacing="3">
<Badge variantColor="purple" fontSize={["xs", "md"]}>
#{launch.flight_number}
</Badge>
{launch.launch_success ? (
<Badge variantColor="green" fontSize={["xs", "md"]}>
Successful
</Badge>
) : (
<Badge variantColor="red" fontSize={["xs", "md"]}>
Failed
</Badge>
)}
</Stack>
</Flex>
);
}
Example #8
| Source File: Login.js From allay-fe with MIT License | 4 votes |
|
Login = ({ login, isLoading, history }) => {
const { handleSubmit, errors, register, formState } = useForm()
const [show, setShow] = React.useState(false)
const handleClick = () => setShow(!show)
function validateEmail(value) {
let error
if (!value) {
error = 'email is required'
} else if (value.length < 5) {
error = 'email needed'
}
return error || true
}
function validatePassword(value) {
let error
if (!value) {
error = 'Password is required'
} else if (value.length < 8) {
error = 'Password must be at least 8 characters'
}
return error || true
}
const submitForm = (creds) => {
// action function here
login(creds).then(() => history.push('/dashboard'))
ReactGA.event({
category: 'User',
action: `Button Login`,
})
}
const gaSignup = () => {
ReactGA.event({
category: 'User',
action: `Link Don't have an account`,
})
}
if (isLoading) {
return (
<Flex justify="center" align="center" w="100%" h="100vh">
<Flex>
<CustomSpinner />
</Flex>
</Flex>
)
}
return (
<Flex className="LoginSplash" w="100%" minH="100vh" justify="center">
<Flex maxW="1440px" w="100%">
<Stack
wrap="wrap"
w="60%"
ml="6.5%"
mb="15%"
justify="center"
align="center"
>
<Text
as="h1"
w="100%"
fontFamily="Poppins"
fontSize="80px"
fontWeight="bold"
>
Allay
</Text>
<Text w="100%" fontFamily="Poppins" fontSize="52px" fontWeight="bold">
We're stronger together.
</Text>
</Stack>
<Flex
w="40%"
mb="10%"
mr="8%"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="473px"
h="480px"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex
as="h2"
fontSize="36px"
fontFamily="Poppins"
justify="center"
mx="1"
my="2%"
>
Welcome back!
</Flex>
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isInvalid={errors.email}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Email
</FormLabel>
<SignupLoginInput
mb="30px"
type="text"
name="email"
label="email"
placeholder="lambda1"
autoCapitalize="none"
ref={register({ validate: validateEmail })}
/>
<FormErrorMessage>
{errors.email && errors.email.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={errors.password}>
<Flex flexDir="column">
<FormLabel
color="#131C4D"
fontSize="18px"
fontFamily="Muli"
>
Password
</FormLabel>
<InputGroup>
<SignupLoginInput
mb="30px"
type={show ? 'text' : 'password'}
name="password"
label="Password"
placeholder="********"
autoCapitalize="none"
ref={register({ validate: validatePassword })}
/>
<InputRightElement width="4.5rem" py="32px">
<Button
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
<FormErrorMessage>
{errors.password && errors.password.message}
</FormErrorMessage>
</Flex>
</FormControl>
<Flex width="100%" justify="center">
<Button
width="85%"
mb="30px"
border="none"
rounded="50px"
h="58px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="loginSubmit"
>
Login
</Button>
</Flex>
</Flex>
<Flex m="15px" justify="center" fontWeight="light">
<Text fontSize="16px" color="#17171B" fontFamily="Muli">
Don't have an account?{' '}
<Link
to="/signup"
onClick={gaSignup}
data-cy="signupLink"
style={{
textDecoration: 'none',
fontWeight: 'bold',
color: '#344CD0',
fontSize: '16px',
}}
>
Sign up here!
</Link>
</Text>
</Flex>
</Flex>
</form>
</Flex>
</Flex>
</Flex>
)
}
Example #9
| Source File: index.js From here-covid-19-tracker with MIT License | 4 votes |
|
Listing = ({ rows }) => {
const currentDataType = useDataTypeStore(state => state.currentDataType)
const tabIndex = currentDataType
const currentDate = useDataDate(state => state.currentDate)
const updateMapFocus = useMapFocus(state => state.updateMapFocus)
const updateTab = useTabStore(state => state.updateTab)
const handleClick = (coordinates, properties) => {
updateTab(1)
updateMapFocus([ coordinates[1], coordinates[0] ], properties)
}
const grouped = groupBy(rows.map(d =>
d.properties.countryregion === "Mainland China" || d.properties.countryregion === "Hong Kong" || d.properties.countryregion === "Macau" || d.properties.countryregion === "Taiwan" ? { ...d, properties: { ...d.properties, countryregion: "China" } } : d),
// d),
o => o.properties.countryregion
)
const groups = Object.keys(grouped).map(d => {
return {
key: d,
sum: grouped[d].reduce((acc, cur) => acc + parseInt(cur.properties[currentDate] || 0), 0),
sum2: grouped[d].reduce((acc, cur) => acc + parseInt(cur.properties["deaths_" + currentDate] || 0), 0),
sum3: grouped[d].reduce((acc, cur) => acc + parseInt(cur.properties["recoveries_" + currentDate] || 0), 0),
items: grouped[d].filter(d => d.properties[currentDate]).sort((a, b) => b.properties[currentDate] - a.properties[currentDate]),
}
}).filter(d => d.sum)
.sort((a, b) => {
return tabIndex === 0
? b.sum - a.sum
: tabIndex === 1
? b.sum2 - a.sum2
: b.sum3 - a.sum3
})
return (
<div>
<DataTypeSwitch rows={rows} />
<Accordion defaultIndex={[0]} allowMultiple mt="0">
{
groups.map((group, i) => {
return (
<AccordionItem key={group.key} borderColor={!i ? "transparent" : "gray.200"}>
<AccordionHeader>
<Flex justifyContent="space-between" alignItems="center" flex="1 1 auto" py="0.5rem">
<Heading pl="1.25rem" color="gray.500" fontSize="1rem" textTransform="uppercase">
{group.key}
</Heading>
<Box pr="1.25rem" color="gray.500" fontWeight={700}>
{ tabIndex === 0 ? formatThousand(group.sum) : null }
{ tabIndex === 1 ? formatThousand(group.sum2) : null }
{ tabIndex === 2 ? formatThousand(group.sum3) : null }
</Box>
</Flex>
<AccordionIcon mr="1.375rem" />
</AccordionHeader>
<AccordionPanel pt="0">
{
group.items.map(({ properties, geometry }, i) => {
const {
provincestate,
countryregion,
...restProps
} = properties
return (
<PseudoBox
tabIndex={0}
key={provincestate + i}
bg="transparent"
borderRadius="lg"
py="0.75rem"
px="1.25rem"
border="0.0625rem solid"
borderColor="gray.200"
mt="0.5rem"
mb="0.75rem"
onClick={() => handleClick(geometry.coordinates, properties)}
cursor="pointer"
_hover={{
bg: "gray.100",
}}
_focus={{
bg: "gray.100",
}}
_active={{
bg: "gray.200",
}}
>
<Stack isInline alignItems="top" justifyContent="space-between">
<Stack spacing="0.125rem">
<Text lineHeight={1.25} color="gray.500" fontSize="xs" fontWeight={600} textTransform="uppercase">
{countryregion}
</Text>
<Text fontSize="lg" lineHeight={1.25} fontWeight={700}>
{provincestate || countryregion}
</Text>
</Stack>
<Stack isInline alignItems="center" spacing="1.5rem">
<Stack spacing="0.125rem" textAlign="right">
<Text lineHeight={1.25} color="gray.500" fontSize="xs" fontWeight={600} textTransform="uppercase">
{ tabIndex === 0 ? "Confirmed" : null }
{ tabIndex === 1 ? "Deaths" : null }
{ tabIndex === 2 ? "Recoveries" : null }
</Text>
<Text fontSize="lg" fontWeight={700} color="gray.500">
{ tabIndex === 0 ? formatThousand(restProps[currentDate] || 0) : null }
{ tabIndex === 1 ? formatThousand(restProps["deaths_" + currentDate] || 0) : null }
{ tabIndex === 2 ? formatThousand(restProps["recoveries_" + currentDate] || 0) : null }
</Text>
</Stack>
<Icon name="pin" size="1.5rem" color="gray.600"/>
</Stack>
</Stack>
</PseudoBox>
)
})
}
</AccordionPanel>
</AccordionItem>
)
})
}
</Accordion>
</div>
)
}
Example #10
| Source File: index.js From here-covid-19-tracker with MIT License | 4 votes |
|
Map = ({ points }) => {
const currentDataType = useDataTypeStore(state => state.currentDataType)
const updateCenter = useStore(state => state.updateCenter)
const mapFocus = useMapFocus(state => state.mapFocus)
const mapZoom = useMapFocus(state => state.mapZoom)
const updateMapFocus = useMapFocus(state => state.updateMapFocus)
const currentDate = useDataDate(state => state.currentDate)
const [loadedMap, setLoadedMap] = useState(false)
const mapRef = useRef()
const Leaflet = useRef()
const sceneRef = useRef()
const leafletMap = useRef()
useEffect(() => {
if (typeof window === undefined || !points.length) return
const L = require("leaflet")
const Tangram = require("tangram")
Leaflet.current = L
if (leafletMap.current) {
leafletMap.current.remove()
leafletMap.current = null
sceneRef.current = null
}
const popup = L.popup({ autoPan: false })
const map = L.map(mapRef.current, {
zoomControl: false,
minZoom: 3,
maxZoom: 8,
scrollWheelZoom: true,
})
const layer = Tangram.leafletLayer({
scene,
attribution: "Loading map",
webGLContextOptions: {
antialias: false,
},
events: {
click: selection => {
if (!selection.feature || (!selection.feature && !selection.feature.properties)) {
return
}
const { lat, long } = selection.feature.properties
updateMapFocus([lat, long], selection.feature.properties)
},
hover: selection => {
if (!selection.feature || (!selection.feature && !selection.feature.properties)) {
mapRef.current.style.cursor = "default"
map.closePopup()
return
}
mapRef.current.style.cursor = "pointer"
const coords = selection.leaflet_event.latlng
const sceneDate = sceneRef.current.config.global.currentDate
const sceneDataType = sceneRef.current.config.global.currentDataType
const { prefix } = sceneRef.current.config.global
const num = formatThousand(selection.feature.properties[prefix + sceneDate])
const isChina = ["Mainland China", "Macau", "Hong Kong", "Taiwan"].includes(selection.feature.properties.countryregion)
const label = sceneDataType === 0
? "Confirmed cases" : sceneDataType === 1 ? "Deaths" : "Recoveries"
const value = num
? `
<div>
<div class="tt-address">
<p class="tt-zip-code-value">
${selection.feature.properties.provincestate || selection.feature.properties.countryregion}
</p>
${
selection.feature.properties.provincestate ? `
<p class="tt-zip-code-title">
${isChina ? "China" : selection.feature.properties.countryregion}
</p>` : ""
}
</div>
<p class="tt-median-rent-title">${label}</p>
<p class="tt-median-rent-value">
<span>${num}</span>
</p>
</div>
`
: ""
popup
.setLatLng([coords.lat, coords.lng])
.setContent(`${value}`)
.openOn(map)
}
},
})
map.on("move", () => {
const { lat, lng } = map.getCenter()
updateCenter([-lng, -lat])
})
layer.addTo(map)
sceneRef.current = layer.scene
map.setView([30, 110], 4)
leafletMap.current = map
const geojsonData = {
type: "FeatureCollection",
features: points,
}
const ext = extent(points, d => {
const headers = d.properties.headers.split(";;")
const lastDate = headers[headers.length - 1]
return parseInt(d.properties[lastDate])
})
layer.scene.subscribe({
load: () => {
layer.scene.config.global.max = ext[1]
layer.scene.updateConfig()
layer.scene.setDataSource("dynamic_data", {
type: "GeoJSON",
data: geojsonData,
})
setLoadedMap(true)
},
})
}, [points])
const cf = sceneRef.current && sceneRef.current.config
useEffect(() => {
if (!mapFocus) return
leafletMap.current.flyTo(mapFocus, mapZoom || 5, { easeLinearity: 0.01, duration: 1.5 })
}, [mapFocus, mapZoom])
useEffect(() => {
if (!currentDate || !sceneRef.current || !sceneRef.current.config) return
if (currentDate === sceneRef.current.config.global.currentDate) return
sceneRef.current.config.global.currentDate = currentDate
sceneRef.current.updateConfig()
}, [currentDate, cf])
useEffect(() => {
if (!sceneRef.current || !sceneRef.current.config) return
sceneRef.current.config.global.currentDataType = currentDataType || 0
sceneRef.current.config.global.prefix = currentDataType === 0
? ""
: currentDataType === 1
? "deaths_"
: "recoveries_"
sceneRef.current.updateConfig()
}, [currentDataType, cf])
const handleZoomIn = () => {
leafletMap.current.zoomIn()
}
const handleZoomOut = () => {
leafletMap.current.zoomOut()
}
return (
<>
<Box
ref={mapRef}
top="0"
left={[0, null, "25rem", "30rem"]}
right="0"
bottom="0"
style={{ position: "fixed", transition: "opacity 500ms", opacity: loadedMap ? 1 : 0 }}
/>
{
!loadedMap ? (
<Box
position="fixed"
top="50%"
left={["50%", null, "calc((100% + 25rem) / 2)", "calc((100% + 30rem) / 2)"]}
zIndex={9999}
transform="translateX(-50%)"
>
<Icon
name="spinner"
size="2.5rem"
color="gray.500"
animation={`${rotate} 1s linear infinite`}
mx="auto"
display="block"
/>
<Text textAlign="center" color="gray.500" mx="auto" fontSize="sm" mt="0.75rem">
{ "Loading map" }
</Text>
</Box>
) : null
}
<Box
position="fixed"
bottom={["6rem", "8rem", "5rem"]}
left={["auto", null, "26.5rem", "32.5rem"]}
right={["2.75rem", "3.75rem", "auto"]}
zIndex={2}
pointerEvents={["none", null, "all"]}
>
<Stack spacing="0.5rem" alignItems="center" mb={["6.5rem", null, "1.25rem"]}>
<Text color="gray.600" width="2.5rem" textAlign="center" fontWeight={700} fontSize="xs" lineHeight="shorter">
{ "more cases" }
</Text>
<Box width="2.5rem" height="2.5rem" border="0.125rem solid" borderColor="gray.500" borderRadius="100%" />
<Box width="1.25rem" height="1.25rem" border="0.125rem solid" borderColor="gray.500" borderRadius="100%" />
<Box width="0.625rem" height="0.625rem" border="0.125rem solid" borderColor="gray.500" borderRadius="100%" />
<Text color="gray.600" width="2.5rem" textAlign="center" fontWeight={700} fontSize="xs" lineHeight="shorter">
{ "fewer cases" }
</Text>
</Stack>
<Stack display={["none", null, "block"]} spacing="1.25rem">
<Flex justifyContent="center">
<Flex alignItems="center" direction="column" shadow="lg" borderRadius="md">
<IconButton
onClick={handleZoomIn}
icon="add" bg="white"
borderRadius="0.25rem 0.25rem 0 0"
border="0.0625rem solid"
borderColor="transparent"
_hover={{ borderColor: "transparent" }}
_focus={{ borderColor: "rgba(236,97,14, 1)", boxShadow: `0 0 0 0.0625rem rgba(236,97,14, 1), 0 0 0 0.25rem rgba(236,97,14, 0.25)` }}
_placeholder={{ color: "gray.500" }}
/>
<Box height="1px" width="100%" bg="gray.100" />
<IconButton
onClick={handleZoomOut}
icon="minus"
bg="white"
borderRadius="0 0 0.25rem 0.25rem"
border="0.0625rem solid"
borderColor="transparent"
_hover={{ borderColor: "transparent" }}
_focus={{ borderColor: "rgba(236,97,14, 1)", boxShadow: `0 0 0 0.0625rem rgba(236,97,14, 1), 0 0 0 0.25rem rgba(236,97,14, 0.25)` }}
_placeholder={{ color: "gray.500" }}
/>
</Flex>
</Flex>
</Stack>
</Box>
</>
)
}
