@chakra-ui/core#SimpleGrid JavaScript Examples
The following examples show how to use
@chakra-ui/core#SimpleGrid.
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: launch-pad.js From space-rockets-challenge with MIT License | 6 votes |
|
function LocationAndVehicles({ launchPad }) {
return (
<SimpleGrid columns={[1, 1, 2]} borderWidth="1px" p="4" borderRadius="md">
<Stat>
<StatLabel display="flex">
<Box as={MapPin} width="1em" />{" "}
<Box ml="2" as="span">
Location
</Box>
</StatLabel>
<StatNumber fontSize="xl">{launchPad.location.name}</StatNumber>
<StatHelpText>{launchPad.location.region}</StatHelpText>
</Stat>
<Stat>
<StatLabel display="flex">
<Box as={Navigation} width="1em" />{" "}
<Box ml="2" as="span">
Vehicles
</Box>
</StatLabel>
<StatNumber fontSize="xl">
{launchPad.vehicles_launched.join(", ")}
</StatNumber>
</Stat>
</SimpleGrid>
);
}
Example #2
| 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 #3
| Source File: launch-pads.js From space-rockets-challenge with MIT License | 6 votes |
|
export default function LaunchPads() {
const { data, error, isValidating, size, setSize } = useSpaceXPaginated(
"/launchpads",
{
limit: PAGE_SIZE,
}
);
return (
<div>
<Breadcrumbs
items={[{ label: "Home", to: "/" }, { label: "Launch Pads" }]}
/>
<SimpleGrid m={[2, null, 6]} minChildWidth="350px" spacing="4">
{error && <Error />}
{data &&
data
.flat()
.map((launchPad) => (
<LaunchPadItem key={launchPad.site_id} launchPad={launchPad} />
))}
</SimpleGrid>
<LoadMoreButton
loadMore={() => setSize(size + 1)}
data={data}
pageSize={PAGE_SIZE}
isLoadingMore={isValidating}
/>
</div>
);
}
Example #4
| Source File: launch.js From space-rockets-challenge with MIT License | 6 votes |
|
function TimeAndLocation({ launch }) {
return (
<SimpleGrid columns={[1, 1, 2]} borderWidth="1px" p="4" borderRadius="md">
<Stat>
<StatLabel display="flex">
<Box as={Watch} width="1em" />{" "}
<Box ml="2" as="span">
Launch Date
</Box>
</StatLabel>
<StatNumber fontSize={["md", "xl"]}>
{formatDateTime(launch.launch_date_local)}
</StatNumber>
<StatHelpText>{timeAgo(launch.launch_date_utc)}</StatHelpText>
</Stat>
<Stat>
<StatLabel display="flex">
<Box as={MapPin} width="1em" />{" "}
<Box ml="2" as="span">
Launch Site
</Box>
</StatLabel>
<StatNumber fontSize={["md", "xl"]}>
<Link
as={RouterLink}
to={`/launch-pads/${launch.launch_site.site_id}`}
>
{launch.launch_site.site_name_long}
</Link>
</StatNumber>
<StatHelpText>{launch.launch_site.site_name}</StatHelpText>
</Stat>
</SimpleGrid>
);
}
Example #5
| Source File: launch.js From space-rockets-challenge with MIT License | 6 votes |
|
function Gallery({ images }) {
return (
<SimpleGrid my="6" minChildWidth="350px" spacing="4">
{images.map((image) => (
<a href={image} key={image}>
<Image src={image.replace("_o.jpg", "_z.jpg")} />
</a>
))}
</SimpleGrid>
);
}
Example #6
| Source File: launches.js From space-rockets-challenge with MIT License | 6 votes |
|
export default function Launches() {
const { data, error, isValidating, setSize, size } = useSpaceXPaginated(
"/launches/past",
{
limit: PAGE_SIZE,
order: "desc",
sort: "launch_date_utc",
}
);
console.log(data, error);
return (
<div>
<Breadcrumbs
items={[{ label: "Home", to: "/" }, { label: "Launches" }]}
/>
<SimpleGrid m={[2, null, 6]} minChildWidth="350px" spacing="4">
{error && <Error />}
{data &&
data
.flat()
.map((launch) => (
<LaunchItem launch={launch} key={launch.flight_number} />
))}
</SimpleGrid>
<LoadMoreButton
loadMore={() => setSize(size + 1)}
data={data}
pageSize={PAGE_SIZE}
isLoadingMore={isValidating}
/>
</div>
);
}
Example #7
| Source File: launch.js From space-rockets-challenge with MIT License | 5 votes |
|
function RocketInfo({ launch }) {
const cores = launch.rocket.first_stage.cores;
return (
<SimpleGrid
columns={[1, 1, 2]}
borderWidth="1px"
mt="4"
p="4"
borderRadius="md"
>
<Stat>
<StatLabel display="flex">
<Box as={Navigation} width="1em" />{" "}
<Box ml="2" as="span">
Rocket
</Box>
</StatLabel>
<StatNumber fontSize={["md", "xl"]}>
{launch.rocket.rocket_name}
</StatNumber>
<StatHelpText>{launch.rocket.rocket_type}</StatHelpText>
</Stat>
<StatGroup>
<Stat>
<StatLabel display="flex">
<Box as={Layers} width="1em" />{" "}
<Box ml="2" as="span">
First Stage
</Box>
</StatLabel>
<StatNumber fontSize={["md", "xl"]}>
{cores.map((core) => core.core_serial).join(", ")}
</StatNumber>
<StatHelpText>
{cores.every((core) => core.land_success)
? cores.length === 1
? "Recovered"
: "All recovered"
: "Lost"}
</StatHelpText>
</Stat>
<Stat>
<StatLabel display="flex">
<Box as={Layers} width="1em" />{" "}
<Box ml="2" as="span">
Second Stage
</Box>
</StatLabel>
<StatNumber fontSize={["md", "xl"]}>
Block {launch.rocket.second_stage.block}
</StatNumber>
<StatHelpText>
Payload:{" "}
{launch.rocket.second_stage.payloads
.map((payload) => payload.payload_type)
.join(", ")}
</StatHelpText>
</Stat>
</StatGroup>
</SimpleGrid>
);
}
Example #8
| Source File: ProfilePage.js From allay-fe with MIT License | 4 votes |
|
ProfilePage = (props) => {
const id = props.match.params.id
const userId = window.localStorage.getItem('userId')
//
const dispatch = useDispatch()
const isLoading = useSelector((state) => state.user.isLoading)
const isUpdated = useSelector((state) => state.user.isUpdated)
const userData = useSelector((state) => state.user.userData)
//
const _midSectionStyles = {
width: '40%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0% 6% 0 3%',
height: '40px',
}
const _emp = {
padding: '0 0 0 22%',
opacity: 0.5,
}
// box that shows on profile update
let changes_div = {
position: 'absolute',
width: '1048px',
marginTop: '25px',
borderRadius: '20px 20px 0 0',
height: '50px',
backgroundColor: '#77E0B5',
textAlign: 'center',
color: '#fff',
fontSize: '16px',
fontFamily: 'Muli',
fontWeight: 'bold',
}
//array to get the correct track name
const track = ['arrayStartsWithZero :D', 'android', 'ds', 'web', 'ios', 'ux'][
userData.track_id
]
// formating graduated date
let graduated = userData.graduated
graduated = new Date(graduated).toUTCString()
graduated = graduated.split(' ').slice(2, 4).join(' ')
// formating employed date
let hired = userData.employed_start
hired = new Date(hired).toUTCString()
hired = hired.split(' ').slice(2, 4).join(' ')
//slack link helper
const slackID = userData.slack
const slackLink = `https://lambda-students.slack.com/app_redirect?channel=${slackID}`
useEffect(() => {
dispatch(getUser(id))
}, [dispatch, id])
//send location: null receive undefiend send again empty recieve the same with white space, backend fix but itll do for now
const lazySolution =
userData.location != 'undefined undefined ' &&
userData.location != 'undefined undefined'
? userData.location
: ''
return (
<>
{/* //Top Section */}
<Flex
maxW="1440px"
w="100%"
px="40px"
py="28px"
m="0 auto"
justify="space-between"
align="center"
borderBottom="1px solid #EAF0FE"
>
<Flex>
<Link
style={{
textDecoration: 'none',
color: '#344CD0',
fontFamily: 'Poppins',
fontWeight: '600',
fontSize: '32px',
}}
to="/dashboard"
>
<h1> Allay </h1>
</Link>
</Flex>
{Number(userId) === Number(userData.id) ? (
<Flex>
<Image
size="58px"
style={{ opacity: '0.6', borderRadius: '50%' }}
src={userData.profile_image}
fallbackSrc={require('../../../icons/user.svg')}
/>
</Flex>
) : null}
</Flex>
{!isLoading ? (
<>
<Flex Flex w="100%" pt="3%" justify="center">
<SimpleGrid width="1048px" columns={1}>
<Box style={{ textAlign: 'end', paddingRight: '1%' }}>
{Number(id) === Number(userId) && (
<Link
style={{
textDecoration: 'none',
color: 'black',
}}
to={`/profile/${id}/edit`}
>
<i
style={{ opacity: 0.3, paddingRight: '10px' }}
className="far fa-edit"
data-cy="editProfile"
></i>
Edit profile
</Link>
)}
</Box>
<div
id="changesDiv"
style={isUpdated ? changes_div : { display: 'none' }}
>
Changes successfully saved
</div>
<Box
style={{
borderRadius: '20px 20px 0 0',
display: 'inline-flex',
}}
bg="#F7F9FF"
height="220px"
>
<Flex w="20%" style={{ padding: '55px 0 0 90px' }}>
<Avatar
size="2xl"
name={userData.first_name}
src={userData.profile_image}
/>
</Flex>
<Flex w="80%" pl="6%">
<SimpleGrid width="100%" row={2} pr="70px">
<Flex
height="113px"
style={{
display: 'flex',
}}
>
<Box
height="27px"
style={{
alignSelf: 'flex-end',
marginLeft: '42px',
}}
>
<h3
id="profileNames"
style={{
fontSize: '27px',
fontFamily: 'Poppins',
color: ' #131C4D',
width: '210px',
}}
>
{userData.first_name} {userData.last_name}
</h3>
</Box>
<Box
width="47%"
height="53px"
style={{
display: 'flex',
alignSelf: 'flex-end',
alignItems: 'baseline',
justifyContent: 'space-between',
}}
>
<span
style={{
borderRadius: '20px',
width: '75px',
height: '36px',
backgroundColor: '#259BF8',
color: '#17171b',
fontSize: '16px',
textTransform: 'uppercase',
textAlign: 'center',
marginLeft: '15%',
paddingTop: '6px',
}}
>
{track}
</span>
<h6
style={{
fontFamily: 'Muli',
fontWeight: 300,
paddingRight: '10px',
}}
>
{userData.graduated ? 'Alumni' : 'Student'}
</h6>
</Box>
<Box
width="120px"
style={{
alignSelf: 'flex-end',
textAlign: 'end',
}}
height="60px"
>
<h6
style={{
fontFamily: 'Muli',
fontWeight: 300,
paddingTop: '6px',
}}
>
<i
style={{ opacity: 0.2, paddingRight: '5px' }}
className="fas fa-map-marker-alt"
></i>
{lazySolution}
</h6>
</Box>
</Flex>
<Box>
<SimpleGrid width="100%" columns={2}>
<Flex
width="55%"
justify="space-between"
pl="42px"
style={{ fontWeight: 'bold' }}
>
<a
style={{
textDecoration: 'none',
color: '#344CD0',
}}
target="blank"
href={userData.portfolio}
>
Portfolio
</a>
<a
style={{
textDecoration: 'none',
color: '#344CD0',
}}
target="blank"
href={userData.resume}
>
Resume
</a>
</Flex>
<Flex
width="62%"
justify="space-around"
justifySelf="flex-end"
alignItems="center"
>
{userData.linked_in ? (
<a target="blank" href={userData.linked_in}>
<Image
size="20px"
style={{ borderRadius: '60%' }}
src={require('../../../icons/linkedIn.png')}
/>
</a>
) : (
<Image
size="20px"
opacity=".3"
style={{ borderRadius: '60%' }}
src={require('../../../icons/linkedIn.png')}
/>
)}
{userData.slack ? (
<a target="blank" href={slackLink}>
<Image
size="20px"
src={require('../../../icons/slack.svg')}
/>
</a>
) : (
<Image
opacity="0.3"
size="20px"
src={require('../../../icons/slack.svg')}
/>
)}
{userData.github ? (
<a
style={{ height: '20px' }}
target="blank"
href={userData.github}
>
<i
style={{ fontSize: 'larger' }}
className="fab fa-github"
/>
</a>
) : (
<i
style={{ fontSize: 'larger', opacity: '0.3' }}
className="fab fa-github"
></i>
)}
{userData.dribble ? (
<a target="blank" href={userData.dribble}>
<Image
size="20px"
style={{ borderRadius: '60%' }}
src={require('../../../icons/dribble.png')}
/>
</a>
) : (
<Image
size="20px"
opacity="0.3"
style={{ borderRadius: '60%' }}
src={require('../../../icons/dribble.png')}
/>
)}
</Flex>
</SimpleGrid>
</Box>
</SimpleGrid>
</Flex>
</Box>
<Box
bg="#F7F9FF"
pl="70px"
height="107px"
style={{ fontSize: '16px' }}
>
<h4
style={{
padding: ' 2% 0% 1% 3%',
fontSize: '14px',
color: ' #131C4D',
}}
>
Lambda Information
</h4>
<Flex>
<Box style={_midSectionStyles}>
<span style={{ opacity: '.5' }}>Cohort:</span>
{userData.cohort}
</Box>
<Box
style={{
width: '35.5%',
display: ' flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0% 0% 1% 11%',
height: '40px',
}}
>
<span style={{ opacity: '.5' }}>Graduated:</span>
{userData.graduated ? graduated : 'N/A'}
</Box>
</Flex>
</Box>
</SimpleGrid>
</Flex>
<Flex
Flex
w="100%"
justify="center"
mb="3%"
style={{ fontSize: '16px' }}
>
<SimpleGrid width="1048px" columns={2}>
<Box
bg="#F7F9FF"
height="260px"
pl="70px"
style={{ borderRadius: '0 0 0 20px' }}
>
<h4
style={{
padding: ' 6% 2% 5% 6%',
fontSize: '14px',
color: ' #131C4D',
}}
>
Background
</h4>
<SimpleGrid
columns={2}
spacing={5}
style={{ paddingLeft: '6%' }}
>
<Box height="20px" style={{ opacity: 0.5 }}>
Degree:
</Box>
<Box height="20px">{userData.highest_ed || 'N/A'}</Box>
<Box height="20px" style={{ opacity: 0.5 }}>
Field of Study:
</Box>
<Box height="20px">{userData.field_of_study || 'N/A'}</Box>
<Box height="20px" style={{ opacity: 0.5 }}>
Prior web experience:
</Box>
<Box height="20px">
{userData.prior_experience ? 'Yes' : 'None'}
</Box>
<Box height="20px" style={{ opacity: 0.5 }}>
Lambda TL/SL position:
</Box>
<Box height="20px">
{userData.tlsl_experience ? 'Yes' : 'None'}
</Box>
</SimpleGrid>
</Box>
<Box
bg="#F7F9FF"
height="260px"
style={{ borderRadius: '0 0 20px 0' }}
>
<h4
style={{
padding: ' 6% 0% 4% 8%',
fontSize: '14px',
color: ' #131C4D',
}}
>
Current employment
</h4>
<SimpleGrid
columns={2}
spacing={5}
style={{ padding: '0 20% 0 0%' }}
>
<Box height="20px" style={_emp}>
Company:
</Box>
<Box height="20px">{userData.employed_company || 'N/A'}</Box>
<Box height="20px" style={_emp}>
Job tittle:
</Box>
<Box height="20px">{userData.employed_title || 'N/A'}</Box>
<Box height="20px" style={_emp}>
Start date:
</Box>
<Box height="20px">
{userData.employed_start ? hired : 'N/A'}
</Box>
<Box height="20px" style={_emp}>
Remote
</Box>
<Box height="20px">
{userData.employed_remote ? 'Yes' : 'No'}
</Box>
</SimpleGrid>
</Box>
</SimpleGrid>
</Flex>
<Flex justify="center">
<Box width="1048px">
Reviews written by {userData.first_name} {userData.last_name}
</Box>
</Flex>
<ProfilePageReview userReviews={userData.reviews} />
</>
) : (
<Flex justify="center" pt="15%">
<GridLoader size={50} color={'#259bf8'} />
</Flex>
)}
</>
)
}
