@chakra-ui/core#PseudoBox JavaScript Examples
The following examples show how to use
@chakra-ui/core#PseudoBox.
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: ReviewCard.js From allay-fe with MIT License | 4 votes |
|
ReviewCard = ({ review, history, deleteReview, isAdmin }) => {
const singleReview = review
//deletes the review in question
const submitDelete = (user_id, review_id) => {
if (review.user_id && review.review_id) {
deleteReview(review.user_id, review.review_id).then(() => {
// window.location.reload();
history.push('/dashboard')
})
} else {
deleteReview(user_id, review_id).then(() => {
// window.location.reload();
history.push('/dashboard')
})
}
ReactGA.event({
category: 'Review Delete',
action: `Submit delete`,
})
}
// useEffect(() => {}, [submitDelete])
// basic usage for the SingleReview modal
const { isOpen, onOpen, onClose } = useDisclosure()
const loginId = localStorage.getItem('userId')
// specifically for the cancel review delete button functionality
const [isOpen2, setIsOpen2] = useState()
const onClose2 = () => setIsOpen2(false)
const cancelRef = useRef()
//routes to single review
const navToEditRoute = () =>
review.review_type === 'Company'
? history.push({
pathname: `/dashboard/review/${review.review_id}`,
state: singleReview,
})
: history.push(`/dashboard/interview/${review.review_id}`)
//routes to user's profile page
const navToProfile = (e) => {
e.preventDefault()
history.push(`/profile/${review.user_id}`)
}
// adjust logo for api call
// const adjustedName = review.company_name.replace(' ', '+')
// adjust date of posting
let tempDate = new Date(review.created_at).toUTCString()
const tempDay = tempDate.split(' ').slice(1, 2)
const tempMonth = tempDate.split(' ').slice(2, 3)
const tempYear = tempDate.split(' ').slice(3, 4)
const adjustedDate = `${tempMonth} ${tempDay}, ${tempYear}`
//track name font color picker
const trackFontColor = (trackName) => {
switch (trackName) {
case 'DS':
return '#35694F'
break
case 'WEB':
return '#474EA7'
break
case 'iOS' || 'IOS':
return '#8E3D19'
break
case 'Android':
return '#4B3569'
break
case 'UX':
return '#9F3A5A'
break
default:
return
}
}
//track name background color picker
const trackColorPicker = (trackName) => {
switch (trackName) {
case 'DS':
return '#D3F2CD'
break
case 'WEB':
return '#DBEBFD'
break
case 'iOS' || 'IOS':
return '#F4E6BE'
break
case 'Android':
return '#E9D9FF'
break
case 'UX':
return '#F9E3DE'
break
default:
return
}
}
//remove white space from company name for logo usage
let stripped = review.company_name.replace(/ /g, '')
let com = '.com'
const logo = stripped.concat(com)
const created = moment(review.created_at).fromNow()
return (
<>
{/* ------------------------------------------------------------------------------------------------ */}
{/* ---------------------------------------Modal Cards (for edit)----------------------------------- */}
{/* ------------------------------------------------------------------------------------------------ */}
<Modal
preserveScrollBarGap
isOpen={isOpen}
onClose={onClose}
size="950px"
>
<ModalOverlay />
<ModalContent w="100%" wrap="nowrap">
<ModalCloseButton
data-cy="reviewCloseButton"
background="none"
border="none"
/>
{/* LEFT SIDE MODAL */}
<Flex
direction="column"
justify="space-between"
align="flex-start"
position="relative"
w="261px"
height="100%"
top="0"
left="0"
pb="50px"
pt="35px"
pl="40px"
bg="#F2F6FE"
borderRadius="0px 40px 40px 0px"
>
{/* USER AVATAR AND NAME */}
<Flex
justify="space-evenly"
align="center"
mb="30px"
onClick={navToProfile}
style={{ cursor: 'pointer' }}
>
{review.user_profile_image === 'h' ? (
<Image
size="40px"
mr="7px"
style={{ opacity: '0.6' }}
src={require('../../icons/user.svg')}
/>
) : (
<Image
size="40px"
mr="7px"
style={{ opacity: '0.6', borderRadius: '50%' }}
src={review.user_profile_image}
/>
)}
<Text color="#131C4D" fontSize="14px" fontFamily="Muli">
By {review.user_first_name} {review.user_last_name}
</Text>
</Flex>
{/* COMPANY LOGO AND REVIEW STARS */}
<Flex
direction="column"
justify="center"
align="flex-start"
mb="20px"
>
<Image
w="148px"
h="70px"
src={`https://logo.clearbit.com/${
review.logo !== 'unknown' ? review.logo : logo
}`}
fallbackSrc={`http://samscct.com/wp-content/uploads/2014/09/no-logo.png`}
/>
<Flex mt="13px">
{Array(5)
.fill('')
.map((_, i) => (
<Icon
name="star"
key={i}
color={i < review.overall_rating ? '#F9DC76' : '#DADADD'}
ml="4px"
/>
))}
</Flex>
</Flex>
{/* COMPANY LOCATION AND NAME */}
<Flex
direction="column"
justify="center"
align="flex-start"
mb="40px"
>
<Flex mb="5px">
<Box as={GoLocation} size="21px" color="#BBBDC6" mr="7px" />
<Text color="#BBBDC6" fontSize="14px" fontFamily="Muli">
{review.city}, {review.state_name}
</Text>
</Flex>
<Flex>
<Box as={FaRegBuilding} size="21px" color="#BBBDC6" mr="7px" />
<Text color="#BBBDC6" fontSize="14px" fontFamily="Muli">
{review.company_name}
</Text>
</Flex>
</Flex>
{/* JOB/INTERVIEW INFORMATION */}
<Flex direction="column" justify="space-between" align="flex-start">
<Flex
direction="column"
justify="flex-start"
align="flex-start"
mb="20px"
>
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
{review.job_title}
</Text>
<Text
color="#9194A8"
fontSize="14px"
fontFamily="Muli"
fontWeight="bold"
>
Job title
</Text>
</Flex>
<Flex
direction="column"
justify="flex-start"
align="flex-start"
mb="20px"
>
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>{`${review.salary}.00`}</Text>
<Text
color="#9194A8"
fontSize="14px"
fontFamily="Muli"
fontWeight="bold"
>
Salary
</Text>
</Flex>
<Flex
direction="column"
justify="flex-start"
align="flex-start"
mb="20px"
>
{review.review_type === 'Company' ? (
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
{review.work_status}
</Text>
) : review.difficulty_rating === 1 ? (
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
Very easy
</Text>
) : review.difficulty_rating === 2 ? (
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
Easy
</Text>
) : review.difficulty_rating === 3 ? (
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
Somewhat easy
</Text>
) : review.difficulty_rating === 4 ? (
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
Somewhat hard
</Text>
) : review.difficulty_rating === 5 ? (
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
Hard
</Text>
) : (
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
N/A
</Text>
)}
<Text
color="#9194A8"
fontSize="14px"
fontFamily="Muli"
fontWeight="bold"
>
{review.review_type === 'Company'
? 'Status'
: 'Interview difficulty'}
</Text>
</Flex>
<Flex
direction="column"
justify="flex-start"
align="flex-start"
mb="20px"
>
{review.review_type === 'Company' ? (
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
{review.start_date} -{' '}
{review.end_date ? review.end_date : 'Present'}
</Text>
) : (
<Text
color="#131C4C"
fontSize="18px"
fontFamily="Muli"
fontWeight="bold"
>
{review.offer_status}
</Text>
)}
<Text
color="#9194A8"
fontSize="14px"
fontFamily="Muli"
fontWeight="bold"
>
{review.review_type === 'Company' ? 'Dates' : 'Job offer?'}
</Text>
</Flex>
</Flex>
<Flex>
{Number(loginId) === Number(review.user_id) ? (
<Image
src={require('../../icons/edit.png')}
onClick={navToEditRoute}
cursor="pointer"
size="1.5em"
mr="12px"
data-cy="editModalReview"
/>
) : null}
{Number(loginId) === Number(review.user_id) ? (
<Image
data-cy="deleteModalReview"
src={require('../../icons/trash.png')}
onClick={() => setIsOpen2(true)}
cursor="pointer"
size="1.5em"
/>
) : null}
<AlertDialog
isOpen={isOpen2}
leastDestructiveRef={cancelRef}
onClose={onClose2}
>
<AlertDialogOverlay />
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
Delete review
</AlertDialogHeader>
<AlertDialogBody>
Are you sure? You can't undo this action afterwards.
</AlertDialogBody>
<AlertDialogFooter>
<Flex
align="center"
justify="center"
height="56px"
width="30%"
color="#344CD0"
fontSize="16px"
fontWeight="bold"
ref={cancelRef}
onClick={onClose2}
>
Cancel
</Flex>
<Button
data-cy="confirmDeleteModalReview"
h="56px"
rounded="10px"
border="none"
color="white"
variantColor="red"
ml={3}
onClick={submitDelete}
>
Delete
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</Flex>
</Flex>
{/* RIGHT SIDE MODAL */}
<Flex
direction="column"
justify="flex-start"
align="flex-start"
position="absolute"
w="575px"
h="100%"
ml="291px"
mb="50px"
mt="35px"
>
{/* TYPE OF REVIEW, TRACK, DATE POSTED */}
<Flex justify="space-between" w="100%" mb="70px">
<Flex justify="space-between">
<Box as={MdRateReview} size="24px" color="#BBBDC6" mr="4px" />
<Text
mr="40px"
color="#131C4D"
fontFamily="Muli"
fontSize="14px"
>
{review.review_type === 'Company'
? 'Company Review'
: 'Interview Review'}
</Text>
<Badge
backgroundColor={
review.track_name === 'WEB'
? '#DBEBFD'
: review.track_name === 'iOS'
? '#F4E6BE'
: review.track_name === 'UX'
? '#F9E3DE'
: review.track_name === 'DS'
? '#D3F2CD'
: review.track_name === 'Android'
? '#E9D9FF'
: '#DBEBFD'
}
color={
review.track_name === 'WEB'
? '#474EA7'
: review.track_name === 'iOS'
? '#8E3D19'
: review.track_name === 'UX'
? '#9F3A5A '
: review.track_name === 'DS'
? '#35694F'
: review.track_name === 'Android'
? '#4B3569'
: '#474EA7'
}
fontSize="16px "
fontWeight="light"
fontFamily="Muli"
rounded="full"
px="15px"
pt="2px"
overflow="hidden"
>
{review.track_name}
</Badge>
</Flex>
<Text color="#9194A8" fontSize="14px" fontFamily="Muli">
{adjustedDate}
</Text>
</Flex>
{/* INTERVIEW TYPES */}
{review.review_type === 'Interview' ? (
<Flex color="#9194A8" fontSize="14px" fontFamily="Muli">
Interviews
</Flex>
) : null}
{review.review_type === 'Interview' ? (
<Flex
justify="flex-start"
wrap="wrap"
whiteSpace="nowrap"
width="100%"
mb="50px"
>
{review.phone_interview ? (
<Flex
as="p"
color="#131C4D"
fontSize="16px"
fontFamily="Muli"
bg="#EAF0FE"
px="1%"
mt="1.5%"
mr="3%"
rounded="3px"
>
Phone screening
</Flex>
) : null}
{review.resume_review ? (
<Flex
as="p"
color="#131C4D"
fontSize="16px"
fontFamily="Muli"
bg="#EAF0FE"
px="1%"
mt="1.5%"
mr="3%"
rounded="3px"
>
Resume review
</Flex>
) : null}
{review.take_home_assignments ? (
<Flex
as="p"
color="#131C4D"
fontSize="16px"
fontFamily="Muli"
bg="#EAF0FE"
px="1%"
mt="1.5%"
mr="3%"
rounded="3px"
>
Take home assignments
</Flex>
) : null}
{review.online_coding_assignments ? (
<Flex
as="p"
color="#131C4D"
fontSize="16px"
fontFamily="Muli"
bg="#EAF0FE"
px="1%"
mt="1.5%"
mr="3%"
rounded="3px"
>
Online coding assignments
</Flex>
) : null}
{review.portfolio_review ? (
<Flex
as="p"
color="#131C4D"
fontSize="16px"
fontFamily="Muli"
bg="#EAF0FE"
px="1%"
mt="1.5%"
mr="3%"
rounded="3px"
>
Portfolio review
</Flex>
) : null}
{review.screen_share ? (
<Flex
as="p"
color="#131C4D"
fontSize="16px"
fontFamily="Muli"
bg="#EAF0FE"
px="1%"
mt="1.5%"
mr="3%"
rounded="3px"
>
Screen share
</Flex>
) : null}
{review.open_source_contribution ? (
<Flex
as="p"
color="#131C4D"
fontSize="16px"
fontFamily="Muli"
bg="#EAF0FE"
px="1%"
mt="1.5%"
mr="3%"
rounded="3px"
>
Open source contribution
</Flex>
) : null}
{review.side_projects ? (
<Flex
as="p"
color="#131C4D"
fontSize="16px"
fontFamily="Muli"
bg="#EAF0FE"
px="1%"
mt="1.5%"
mr="3%"
rounded="3px"
>
Side projects
</Flex>
) : null}
</Flex>
) : null}
{/* DESCRIPTION */}
<Flex direction="column">
<Text color="#9194A8" fontSize="14px" fontFamily="Muli" mb="7px">
Description
</Text>
<Text
color="#131C4D"
fontSize="16px"
fontFamily="Muli"
lineHeight="23px"
>
{review.comment}
</Text>
</Flex>
</Flex>
{/* ADMIN BUTTONS */}
<ModalFooter
w="689px"
ml="261px"
mb="20px"
position="absolute"
bottom="0"
>
<BlockButton user_id={review.user_id} isAdmin={isAdmin} />
<ContentButton
isAdmin={isAdmin}
submitDelete={submitDelete}
user_id={review.user_id}
review_id={review.review_id}
/>
</ModalFooter>
</ModalContent>
</Modal>
{/* ------------------------------------------------------------------------------------------------ */}
{/* ---------------------------------------DashBoard Cards------------------------------------------ */}
{/* ------------------------------------------------------------------------------------------------ */}
{/* Review container */}
<PseudoBox
mb="3%"
mx="2.5%"
px="1%"
py="1%"
border="1px solid #E9F0FF"
width="408px"
height="309px"
borderRadius="12px"
display="flex"
flexDir="column"
_hover={{ bg: '#E9F0FF' }}
onClick={onOpen}
data-cy="modalCard"
>
{/* Review content container */}
<Flex flexDir="column">
{/* headline container */}
<Flex maxW="530px">
<Flex
height="115px"
justify="space-between"
maxW="391px"
p="2% 5%"
wrap="wrap"
>
<Flex maxW="300px">
{review.review_type === 'Company' ? (
<Image
width="106px"
height="40px"
src={`https://logo.clearbit.com/${
review.logo !== 'unknown' ? review.logo : logo
}`}
fallbackSrc={`http://samscct.com/wp-content/uploads/2014/09/no-logo.png`}
/>
) : (
<Text style={{ fontSize: '22px', fontWeight: 'bold' }}>
{' '}
{review.job_title}
</Text>
)}
</Flex>
<i
style={{ alignSelf: 'center', fontSize: '22px', opacity: '.2' }}
className="far fa-heart"
></i>
<Flex justify="space-between" width="391px" pt="2%">
<Flex align="center">
{Array(5)
.fill('')
.map((_, i) => (
<Icon
name="star"
key={i}
color={i < review.overall_rating ? '#F9DC76' : '#fff'}
ml="8%"
/>
))}
</Flex>
<Flex>
<Text
style={{
color: '#BBBDC6',
fontSize: '14px',
fontWeight: 'bold',
}}
>
{created}
</Text>
{/* )} */}
</Flex>
</Flex>
<Flex width="391px" height="45px" pt="15px">
<Box as={MdRateReview} size="24px" color="#BBBDC6" mr="4px" />
<span style={{ paddingLeft: '5px' }}>
{review.review_type} review
</span>
</Flex>
</Flex>
</Flex>
</Flex>
{/* summary container */}
<Flex width="100%" height="100px">
<Flex m="10px 20px" w="348px" h="55px" overflow="hidden">
<p style={{ fontSize: '14px', color: 'gray' }}>{review.comment}</p>
</Flex>
</Flex>
<Flex
margin="0px 12px 0px 20px"
align="center"
pt="5px"
height="40px"
justify="space-between"
>
<Flex alignItems="center">
<Avatar size="md" src={review.user_profile_image} />
<Text pl="5px" fontSize="14px">
{review.user_first_name} {review.user_last_name}
</Text>
</Flex>
<Badge
backgroundColor={trackColorPicker(review.track_name)}
color={trackFontColor(review.track_name)}
fontSize="1em"
fontWeight="light"
rounded="full"
textAlign="center"
pt="5px"
overflow="hidden"
ml="10px"
width="58px"
height="36px"
>
<span>{review.track_name}</span>
</Badge>
</Flex>
</PseudoBox>
</>
)
}
Example #2
| 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 #3
| Source File: ClientSearch.js From opensource.builders with MIT License | 4 votes |
|
render() {
const {
searchResults,
searchQuery,
category,
language,
license,
} = this.state
const queryResults =
searchQuery === `` && license === `` && language === `` && category === ``
? this.props.comps
: searchResults
const compLoad =
searchQuery === `` && license === `` && language === `` && category === ``
? this.props.mainInfo.slice(0, this.props.loadCount)
: this.props.mainInfo
const categories = [
"E-commerce",
"Developer Tools",
"Social Media",
"Communication",
"Analytics",
"Password Managers",
"Form Builder",
"Cloud",
"Deployment",
"Product Management",
"Automation",
"CRM",
]
const licenses = [
"GPL V3",
"BSD-3",
"GPL",
"MIT",
"OSL-3.0",
"APACHE 2.0",
"AGPL V3",
"CUSTOM",
]
const languages = [
"GO",
"JS",
"PYTHON",
"PHP",
"ELIXIR",
"RUBY",
"C",
"C#",
"C++",
"SHELL",
"TS",
"PERL",
]
return (
<Box>
<Box
bg="white"
boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
>
<Box px={{ md: "2rem" }}>
<Box
display="flex"
flexWrap="wrap"
justifyContent="space-between"
alignItems="center"
px="1rem"
>
<Box py={5}>
<Heading as="h2" size="lg">
Open-source alternatives
</Heading>
<Text fontSize="md" fontWeight={400} color="#939fae" mt={1}>
Find open-source alternatives for your favorite apps
</Text>
</Box>
</Box>
</Box>
</Box>
<Box ml="auto" mr="auto" maxWidth="80rem" px={2} py={4}>
<Box>
<InputGroup size="lg" mx={1} mb={6}>
<InputLeftElement
children={<Icon name="search" color="gray.300" />}
/>
<Input
pr="4.5rem"
placeholder="Search for anything"
value={searchQuery}
onChange={(e) => {
this.searchData(e.target.value)
}}
boxShadow="sm"
/>
</InputGroup>
<Box
display="flex"
alignItems="flex-start"
flexDirection={{ base: "column", md: "row" }}
>
<Box
p={3}
maxWidth={{ base: "100%", md: "18rem" }}
// bg="#122a4f"
bg="white"
boxShadow="md"
borderRadius={4}
mx={1}
mb={6}
>
<Box>
<Box display="flex" flexDirection="column">
<Box mb={5}>
<Box color="gray.600" mx={2} mb={1} fontWeight={500}>
Categories
</Box>
<Box display="flex" flexWrap="wrap">
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
fontSize="sm"
letterSpacing="wide"
bg={category === "" ? "#122a4f" : "#2b4a7b"}
textTransform="uppercase"
_hover={category !== "" && { bg: "#1a3765" }}
onClick={() => this.categoryFilter("")}
cursor="pointer"
>
All
</PseudoBox>
{categories.map((c) => (
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
letterSpacing="wide"
fontSize="sm"
bg={category === c ? "#122a4f" : "#2b4a7b"}
textTransform="uppercase"
_hover={category !== c && { bg: "#1a3765" }}
onClick={() => this.categoryFilter(c)}
cursor="pointer"
>
{c}
</PseudoBox>
))}
</Box>
</Box>
<Box mb={5}>
<Box color="gray.600" mx={2} mb={1} fontWeight={500}>
License
</Box>
<Box display="flex" flexWrap="wrap">
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
letterSpacing="wide"
fontSize="sm"
bg={license === "" ? "#122a4f" : "#00bf70"}
textTransform="uppercase"
_hover={license !== "" && { bg: "#029c5d" }}
onClick={() => this.licenseFilter("")}
cursor="pointer"
>
All
</PseudoBox>
{licenses.map((c) => (
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
fontSize="sm"
letterSpacing="wide"
bg={license === c ? "#122a4f" : "#00bf70"}
textTransform="uppercase"
_hover={license !== c && { bg: "#029c5d" }}
onClick={() => this.licenseFilter(c)}
cursor="pointer"
>
{c}
</PseudoBox>
))}
</Box>
</Box>
<Box>
<Box color="gray.600" mx={2} mb={1} fontWeight={500}>
Language
</Box>
<Box display="flex" flexWrap="wrap">
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontSize="sm"
fontWeight={600}
letterSpacing="wide"
bg={language === "" ? "#122a4f" : "orange.500"}
textTransform="uppercase"
_hover={language !== "" && { bg: "#af5417" }}
onClick={() => this.languageFilter("")}
cursor="pointer"
>
All
</PseudoBox>
{languages.map((c) => (
<PseudoBox
px={3}
py={1}
m={1}
borderRadius={4}
color={"white"}
fontWeight={600}
letterSpacing="wide"
fontSize="sm"
bg={language === c ? "#122a4f" : "orange.500"}
textTransform="uppercase"
_hover={language !== c && { bg: "#af5417" }}
onClick={() => this.languageFilter(c)}
cursor="pointer"
>
{c}
</PseudoBox>
))}
</Box>
</Box>
</Box>
</Box>
</Box>
<Box display="flex" flexWrap="wrap" width="100%">
{compLoad.map((comp) => {
const match = queryResults.filter(
(alt) => alt.mainID === comp.id
)
if (match.length > 0) {
return (
<CompGroup
comp={comp}
commercial={comp.commercial}
alts={match}
/>
)
}
})}
</Box>
</Box>
</Box>
</Box>
</Box>
)
}
Example #4
| Source File: header.js From opensource.builders with MIT License | 4 votes |
|
export default function Header({ children, location }) {
const { colorMode, toggleColorMode } = useColorMode()
const { isOpen, onOpen, onClose } = useDisclosure()
const btnRef = React.useRef()
const navItem = ({ name, to, my, onClick }) => (
<Link to={to} onClick={onClick}>
<PseudoBox
fontSize=".875rem"
color="white"
fontWeight="500"
bg={location.pathname === to && "#304571"}
_hover={{ color: "gray.50", bg: location.pathname != to && "#1a294c" }}
px={2}
py={1}
mx={2}
borderRadius={3}
my={my}
>
{name}
</PseudoBox>
</Link>
)
return (
<Box
bg="gray.800"
boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
>
<Box px={{ md: "2rem" }}>
<Box
as="nav"
position="relative"
display="flex"
flexWrap="wrap"
justifyContent="space-between"
alignItems="center"
p=".75rem"
>
<Box flex={3}>
<Link to="/">
<Box display="flex" my={3} pr={2}>
<Box minWidth="46px" maxWidth="0px">
<Logo />
</Box>
<Box>
<Text
color="gray.200"
pl=".6rem"
fontWeight={800}
fontSize="sm"
lineHeight=".8rem"
letterSpacing="widest"
>
OPENSOURCE
</Text>
<Text
color="white"
pl={2}
fontWeight={500}
fontSize="4xl"
lineHeight="2.3rem"
letterSpacing=".5px"
>
Builders
</Text>
</Box>
</Box>
</Link>
</Box>
<>
<Popover>
{({ isOpen, onClose }) => (
<>
<PopoverTrigger>
<Button
ml="auto"
px={1}
bg="transparent"
color="#9fa6b2"
display={{
base: "flex",
sm: "none",
}}
_hover={{ bg: "#374151", color: "#fff" }}
ref={btnRef}
onClick={onOpen}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 6H20M4 12H20M4 18H20"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent zIndex={4} width="200px" py={2} bg="gray.800">
<PopoverBody>
{process.env.NODE_ENV === "development" &&
navItem({
to: "/edit",
name: "Edit",
my: 2,
onClick: onClose,
})}
{navItem({
to: "/",
name: "Alternatives",
my: 2,
onClick: onClose,
})}
{navItem({
to: "/requests",
name: "Requests",
my: 2,
onClick: onClose,
})}
{navItem({
to: "/about",
name: "About",
my: 2,
onClick: onClose,
})}
<PseudoBox
display="flex"
alignItems="center"
borderRadius={4}
mx={2}
px={2}
py={1}
as="a"
href="https://github.com/junaid33/opensource.builders"
target="_blank"
_hover={{ color: "gray.50", bg: "#1a294c" }}
>
<svg
stroke="#ffffff"
fill="#ffffff"
strokeWidth="0"
version="1.1"
viewBox="0 0 32 32"
height="1.2em"
width="1.2em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 5.343c-6.196 0-11.219 5.023-11.219 11.219 0 4.957 3.214 9.162 7.673 10.645 0.561 0.103 0.766-0.244 0.766-0.54 0-0.267-0.010-1.152-0.016-2.088-3.12 0.678-3.779-1.323-3.779-1.323-0.511-1.296-1.246-1.641-1.246-1.641-1.020-0.696 0.077-0.682 0.077-0.682 1.126 0.078 1.72 1.156 1.72 1.156 1.001 1.715 2.627 1.219 3.265 0.931 0.102-0.723 0.392-1.219 0.712-1.498-2.49-0.283-5.11-1.246-5.11-5.545 0-1.226 0.438-2.225 1.154-3.011-0.114-0.285-0.501-1.426 0.111-2.97 0 0 0.941-0.301 3.085 1.15 0.894-0.25 1.854-0.373 2.807-0.377 0.953 0.004 1.913 0.129 2.809 0.379 2.14-1.453 3.083-1.15 3.083-1.15 0.613 1.545 0.227 2.685 0.112 2.969 0.719 0.785 1.153 1.785 1.153 3.011 0 4.31-2.624 5.259-5.123 5.537 0.404 0.348 0.761 1.030 0.761 2.076 0 1.5-0.015 2.709-0.015 3.079 0 0.299 0.204 0.648 0.772 0.538 4.455-1.486 7.666-5.69 7.666-10.645 0-6.195-5.023-11.219-11.219-11.219z"></path>
</svg>
</PseudoBox>
</PopoverBody>
</PopoverContent>
</>
)}
</Popover>
</>
<Box display={{ base: "none", sm: "flex" }}>
{process.env.NODE_ENV === "development" &&
navItem({ to: "/edit", name: "Edit" })}
{navItem({ to: "/", name: "Alternatives" })}
{navItem({ to: "/requests", name: "Requests" })}
{navItem({ to: "/about", name: "About" })}
<PseudoBox
display="flex"
alignItems="center"
borderRadius={4}
px={2}
as="a"
href="https://github.com/junaid33/opensource.builders"
target="_blank"
_hover={{ color: "gray.50", bg: "#1a294c" }}
>
<svg
stroke="#ffffff"
fill="#ffffff"
strokeWidth="0"
version="1.1"
viewBox="0 0 32 32"
height="1.2em"
width="1.2em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 5.343c-6.196 0-11.219 5.023-11.219 11.219 0 4.957 3.214 9.162 7.673 10.645 0.561 0.103 0.766-0.244 0.766-0.54 0-0.267-0.010-1.152-0.016-2.088-3.12 0.678-3.779-1.323-3.779-1.323-0.511-1.296-1.246-1.641-1.246-1.641-1.020-0.696 0.077-0.682 0.077-0.682 1.126 0.078 1.72 1.156 1.72 1.156 1.001 1.715 2.627 1.219 3.265 0.931 0.102-0.723 0.392-1.219 0.712-1.498-2.49-0.283-5.11-1.246-5.11-5.545 0-1.226 0.438-2.225 1.154-3.011-0.114-0.285-0.501-1.426 0.111-2.97 0 0 0.941-0.301 3.085 1.15 0.894-0.25 1.854-0.373 2.807-0.377 0.953 0.004 1.913 0.129 2.809 0.379 2.14-1.453 3.083-1.15 3.083-1.15 0.613 1.545 0.227 2.685 0.112 2.969 0.719 0.785 1.153 1.785 1.153 3.011 0 4.31-2.624 5.259-5.123 5.537 0.404 0.348 0.761 1.030 0.761 2.076 0 1.5-0.015 2.709-0.015 3.079 0 0.299 0.204 0.648 0.772 0.538 4.455-1.486 7.666-5.69 7.666-10.645 0-6.195-5.023-11.219-11.219-11.219z"></path>
</svg>
</PseudoBox>
</Box>
</Box>
</Box>
</Box>
)
}
