@chakra-ui/react#useMediaQuery JavaScript Examples
The following examples show how to use
@chakra-ui/react#useMediaQuery.
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: Faq.js From MeowForm with MIT License | 6 votes |
|
function Faq() {
const textColor = useColorModeValue("gray.700", "gray.100");
const [check] = useMediaQuery("(min-width: 1025px)");
return (
<div className="faq-div">
<div className="faq-main">
<div className="heading">
<Text
align='center'
color={textColor}
fontSize={check ? "5xl" : "3xl"}
fontWeight='extrabold'
mt={check ? "0%" : "4%"}>
Frequently Asked Questions (FAQ)
</Text>
</div>
<div className="faq-data">
{
FAQ_Data.map((data) => (
<div className="singleFaq" key={data.id}>
<div className="faq-question">
<p><span>Q . </span>{data.question}</p>
</div>
<div className="faq-answer">
<p><span>A . </span>{data.answer}</p>
</div>
</div>
))
}
</div>
</div>
</div>
);
}
Example #2
| Source File: Footer.js From MeowForm with MIT License | 5 votes |
|
function Footer(props) {
const [check] = useMediaQuery("(min-width: 1025px)");
return (
<Box backgroundColor='#000'>
<Box padding='5%'>
<Box>
<Text
align='center'
fontSize='3xl'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontWeight='extrabold'>
Meow Forms <Text color='#fff'> ?</Text>
</Text>
<Flex
margin='2%'
color='#fff'
align='center'
ml={check ? "39%" : "12%"}>
<Box ml='4%'>
<a
rel='noreferrer'
href='https://buymeacoffee.com/tewarig'
target='_blank'>
Help me keep Meow Form Free ☕
</a>
</Box>
</Flex>
<Flex
flexDirection='column-reverse'
color='#fff'
align='center'
ml={check ? "0%" : "0%"}>
<a
rel='noreferrer'
href='https://icons8.com/'
target='_blank'>
<Text>Icons by Icons8</Text>
</a>
<Box margin='2%'>
<a
rel='noreferrer'
href='https://twitter.com/oyeTewari'
target='_blank'>
? @oyeTewari
</a>
</Box>
<Box margin='2%'>
All mails are delivered by ? the ?
</Box>
</Flex>
<Flex>
<Box></Box>
</Flex>
<Flex></Flex>
</Box>
</Box>
</Box>
);
}
Example #3
| Source File: offline.js From idena-web with MIT License | 4 votes |
|
export default function Offline() {
const {t} = useTranslation()
const {apiKeyState, apiKey, url} = useSettingsState()
const {saveConnection} = useSettingsDispatch()
const {coinbase, privateKey} = useAuthState()
const router = useRouter()
const {isOpen, onOpen, onClose} = useDisclosure()
const cancelRef = useRef()
const [error, setError] = useState({type: errorType.NONE})
const [state, setState] = useState(options.BUY)
const [step, setStep] = useState(steps.INITIAL)
const [savedApiKey, setSavedApiKey] = useState()
const [submitting, setSubmitting] = useState(false)
const failToast = useFailToast()
const {isPurchasing, savePurchase, setRestrictedKey} = useApikeyPurchasing()
const [isDesktop] = useMediaQuery('(min-width: 481px)')
const size = useBreakpointValue(['lg', 'md'])
const variant = useBreakpointValue(['mobile', 'initial'])
const variantRadio = useBreakpointValue(['mobileDark', 'dark'])
const variantPrimary = useBreakpointValue(['primaryFlat', 'primary'])
const variantSecondary = useBreakpointValue(['secondaryFlat', 'secondary'])
const {data: identity} = useQuery(
['fetch-identity', coinbase],
() => fetchIdentity(coinbase, true),
{
enabled: !!coinbase,
}
)
const getKeyForCandidate = async () => {
setSubmitting(true)
try {
const providers = await getAvailableProviders()
const signature = signMessage(hexToUint8Array(coinbase), privateKey)
const result = await getCandidateKey(
coinbase,
toHexString(signature, true),
providers
)
savePurchase(result.id, result.provider)
} catch (e) {
failToast(
`Failed to get API key for Candidate: ${
e.response ? e.response.data : 'unknown error'
}`
)
} finally {
setSubmitting(false)
}
}
const activateInvite = async () => {
setSubmitting(true)
try {
const from = privateKeyToAddress(privateKey)
const rawTx = await getRawTx(
1,
from,
coinbase,
0,
0,
privateKeyToPublicKey(privateKey),
0,
true
)
const tx = new Transaction().fromHex(rawTx)
tx.sign(privateKey)
const providers = await getAvailableProviders()
const result = await activateKey(coinbase, `0x${tx.toHex()}`, providers)
savePurchase(result.id, result.provider)
sendActivateInvitation(coinbase)
} catch (e) {
failToast(
`Failed to activate invite: ${
e.response ? e.response.data : 'invitation is invalid'
}`
)
} finally {
setSubmitting(false)
}
}
const process = async () => {
switch (state) {
case options.ENTER_KEY:
return router.push('/settings/node')
case options.BUY:
return router.push('/node/rent')
case options.ACTIVATE: {
if (identity?.state === IdentityStatus.Invite) {
return activateInvite()
}
return router.push('/node/activate')
}
case options.CANDIDATE:
return getKeyForCandidate()
case options.RESTRICTED: {
return onOpen()
}
case options.RESTORE: {
return saveConnection(savedApiKey.url, savedApiKey.key, false)
}
default:
}
}
useEffect(() => {
async function checkSaved() {
try {
const signature = signMessage(hexToUint8Array(coinbase), privateKey)
const savedKey = await checkSavedKey(
coinbase,
toHexString(signature, true)
)
setSavedApiKey(savedKey)
} catch (e) {}
}
checkSaved()
}, [apiKey, coinbase, privateKey])
useEffect(() => {
if (
apiKeyState === ApiKeyStates.ONLINE ||
apiKeyState === ApiKeyStates.EXTERNAL
)
router.push('/home')
}, [apiKeyState, router])
useEffect(() => {
async function check() {
try {
const result = await checkKey(apiKey)
const res = await getProvider(result.provider)
if (new URL(url).host !== new URL(res.data.url).host) {
throw new Error()
}
try {
await promiseTimeout(checkProvider(url), 2000)
setError({type: errorType.KEY_EXPIRED})
} catch (e) {
setError({
type: errorType.PROVIDER_UNAVAILABLE,
provider: res.data.ownerName,
})
}
} catch (e) {
setError({type: errorType.NODE_UNAVAILABLE})
}
}
check()
}, [apiKey, url])
useEffect(() => {
if (identity?.state === IdentityStatus.Candidate) {
setState(options.CANDIDATE)
} else if (savedApiKey) {
setState(options.RESTORE)
}
}, [identity, savedApiKey])
const waiting = submitting || isPurchasing
return (
<Layout canRedirect={false}>
<Flex
bg={['gray.500', 'graphite.500']}
alignItems="center"
justifyContent="center"
height="100%"
direction="column"
justify="center"
flex="1"
>
<Flex
flexGrow={1}
align="center"
justify={['flex-start', 'center']}
mt="44px"
mx={[3, 0]}
direction="column"
>
<Flex
direction="column"
align={['center', 'initial']}
maxWidth={['100%', '480px']}
>
<Flex
direction={['column', 'row']}
align={['center', 'flex-start']}
textAlign={['center', 'initial']}
w={['60%', 'auto']}
>
<Avatar address={coinbase} />
<Flex
direction="column"
justify="center"
flex="1"
ml={[0, 5]}
mt={[5, 0]}
>
<Heading
fontSize={['mdx', 'lg']}
fontWeight={[400, 500]}
color={['muted', 'white']}
wordBreak="break-word"
>
{coinbase}
</Heading>
</Flex>
</Flex>
<Flex
direction="column"
mt={6}
bg="gray.500"
borderRadius="lg"
px={[6, 10]}
py={7}
w={['100%', 'auto']}
>
{step === steps.INITIAL && (
<Flex direction="column" alignItems="center" mt={6}>
<Flex>
<Text color="white" fontSize="lg">
{t('Offline')}
</Text>
</Flex>
<Flex mt={4}>
<Text fontSize="mdx" color="muted" textAlign="center">
{t('Please connect to a shared node')}
</Text>
</Flex>
<Flex justifyContent="center" mt={6}>
<PrimaryButton onClick={() => setStep(steps.CONNECT)}>
{t('New connection')}
</PrimaryButton>
</Flex>
</Flex>
)}
{step === steps.CONNECT && (
<>
<Flex justify={['center', ' flex-start']}>
<Text color="white" fontSize="lg">
{t('Connect to Idena node')}
</Text>
</Flex>
<Flex mt={7}>
<Text color="white" fontSize="sm" opacity={0.5}>
{t('Choose an option')}
</Text>
</Flex>
<Flex mt={[2, 4]}>
<RadioGroup w={['100%', 'auto']}>
<Stack direction="column" spacing={[1, 3]}>
{savedApiKey && savedApiKey.url !== apiKey.url && (
<ChooseItemRadio
variant={variantRadio}
px={[4, 0]}
isChecked={state === options.RESTORE}
onChange={() => setState(options.RESTORE)}
alignItems={['center', 'flex-start']}
>
<Flex direction="column" mt={['auto', '-2px']}>
<Text color="white">
{t('Restore connection')}
</Text>
<Text color="muted" fontSize="sm">
{savedApiKey.url}
</Text>
</Flex>
</ChooseItemRadio>
)}
{identity?.state === IdentityStatus.Candidate && (
<ChooseItemRadio
variant={variantRadio}
px={[4, 0]}
isChecked={state === options.CANDIDATE}
onChange={() => setState(options.CANDIDATE)}
>
<Text color="white">{t('Get free access')}</Text>
</ChooseItemRadio>
)}
<ChooseItemRadio
variant={variantRadio}
px={[4, 0]}
isChecked={state === options.BUY}
onChange={() => setState(options.BUY)}
>
<Text color="white">{t('Rent a shared node')}</Text>
</ChooseItemRadio>
<ChooseItemRadio
variant={variantRadio}
px={[4, 0]}
isChecked={state === options.ENTER_KEY}
onChange={() => setState(options.ENTER_KEY)}
>
<Text color="white">
{t('Enter shared node API key')}
</Text>
</ChooseItemRadio>
{[
IdentityStatus.Undefined,
IdentityStatus.Invite,
].includes(identity?.state) && (
<ChooseItemRadio
variant={variantRadio}
px={[4, 0]}
isChecked={state === options.ACTIVATE}
onChange={() => setState(options.ACTIVATE)}
>
<Text color="white">
{t('Activate invitation')}
</Text>
</ChooseItemRadio>
)}
{identity?.state !== IdentityStatus.Candidate && (
<ChooseItemRadio
variant={variantRadio}
px={[4, 0]}
isChecked={state === options.RESTRICTED}
onChange={() => setState(options.RESTRICTED)}
>
<Text
lineHeight={['16px', 'initial']}
color="white"
>
{`${t('Get restricted access')}${
isDesktop
? ` (${t(
'Can not be used for validation'
).toLocaleLowerCase()})`
: ''
}`}
</Text>
<Text
display={['inline-block', 'none']}
color="xwhite.050"
fontSize="sm"
>
{t('Can not be used for validation')}
</Text>
</ChooseItemRadio>
)}
</Stack>
</RadioGroup>
</Flex>
<Flex mt={[4, '30px']} mb={2}>
<PrimaryButton
size={size}
ml="auto"
w={['100%', 'auto']}
onClick={process}
isDisabled={waiting}
isLoading={waiting}
loadingText="Waiting..."
>
{t('Continue')}
</PrimaryButton>
</Flex>
</>
)}
</Flex>
</Flex>
{step === steps.INITIAL &&
error.type === errorType.PROVIDER_UNAVAILABLE && (
<ProviderOfflineAlert url={url} provider={error.provider} />
)}
{step === steps.INITIAL && error.type === errorType.KEY_EXPIRED && (
<KeyExpiredAlert url={url} apiKey={apiKey} />
)}
{step === steps.INITIAL &&
error.type === errorType.NODE_UNAVAILABLE && (
<NodeOfflineAlert url={url} />
)}
</Flex>
<Flex
display={['none', 'flex']}
justify="center"
mb={8}
direction="column"
justifyContent="center"
>
<Text color="white" fontSize="mdx" opacity="0.5" mb={1}>
{t('You can run your own node at your desktop computer.')}
</Text>
<TextLink
href="https://idena.io/download"
target="_blank"
color="white"
textAlign="center"
>
<DownloadIcon boxSize={4} mx={2} />
{t('Download Idena')}
</TextLink>
</Flex>
</Flex>
<AlertDialog
variant={variant}
motionPreset="slideInBottom"
leastDestructiveRef={cancelRef}
onClose={onClose}
isOpen={isOpen}
isCentered
>
<AlertDialogOverlay />
<AlertDialogContent mx={[3, 'auto']}>
<AlertDialogHeader fontSize="lg">
{t('Are you sure?')}
</AlertDialogHeader>
<AlertDialogCloseButton />
<AlertDialogBody fontSize={['mobile', 'md']}>
<Trans i18nKey="confirmRestrictedNodeDialog" t={t}>
Your current API key{' '}
<Text fontWeight="700" as="span">
{{apiKey}}
</Text>{' '}
for the shared node{' '}
<Text fontWeight="700" as="span">
{{url}}
</Text>{' '}
will be lost
</Trans>
</AlertDialogBody>
<AlertDialogFooter>
<Button
variant={variantSecondary}
size={size}
w={['100%', 'auto']}
onClick={() => {
setRestrictedKey()
onClose()
router.push('/home')
}}
>
{t('Yes')}
</Button>
<Divider
display={['block', 'none']}
h={10}
orientation="vertical"
color="gray.100"
/>
<Button
variant={variantPrimary}
w={['100%', 'auto']}
size={size}
ref={cancelRef}
onClick={onClose}
ml={2}
>
{t('Cancel')}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</Layout>
)
}
Example #4
| Source File: components.js From idena-web with MIT License | 4 votes |
|
export function ProfileTagList() {
const {t} = useTranslation()
const [
{age, penalty, totalShortFlipPoints, totalQualifiedFlips},
] = useIdentity()
const epoch = useEpoch()
const score = useTotalValidationScore()
const inviteScore = useInviteScore()
const formatDna = useFormatDna({maximumFractionDigits: 5})
const [isMobile] = useMediaQuery('(max-width: 480px)')
const hasAnyTag =
age > 0 || penalty > 0 || Number.isFinite(score) || inviteScore > 0
return (
<Wrap
spacing={[0, '1']}
direction={['column', 'row']}
w={['full']}
mt={[hasAnyTag ? 4 : 0, 0]}
mb={[hasAnyTag ? 3 : 0, 0]}
>
{age > 0 && (
<WrapItem>
<SimpleProfileTag label={t('Age')} value={age} />
</WrapItem>
)}
{Number.isFinite(score) && (
<WrapItem>
{isMobile ? (
<ProfileTag>
<Flex align="center" justify="space-between">
<ProfileTagLabel>{t('Score')}</ProfileTagLabel>
<TextLink href="/validation-report" display="inline-flex">
{t('Validation report')}
</TextLink>
</Flex>
<ProfileTagValue>{toPercent(score)}</ProfileTagValue>
</ProfileTag>
) : (
<Popover placement="top" arrowShadowColor="transparent">
<PopoverTrigger>
<Box>
<SimpleProfileTag
label={t('Score')}
value={toPercent(score)}
cursor="help"
/>
</Box>
</PopoverTrigger>
<PopoverContent border="none" fontSize="sm" w="max-content">
<PopoverArrow bg="graphite.500" />
<PopoverBody bg="graphite.500" borderRadius="sm" p="2" pt="1">
<Stack>
<Stack spacing="0.5">
<Text color="muted" lineHeight="shorter">
{t('Total score')}
</Text>
<Text color="white" lineHeight="4">
{t(
`{{totalShortFlipPoints}} out of {{totalQualifiedFlips}}`,
{
totalShortFlipPoints,
totalQualifiedFlips,
}
)}
</Text>
</Stack>
<Stack spacing="0.5">
<Text color="muted" lineHeight="shorter">
{t('Epoch #{{epoch}}', {epoch: epoch?.epoch})}
</Text>
<TextLink
href="/validation-report"
color="white"
lineHeight="4"
>
{t('Validation report')}
<ChevronRightIcon />
</TextLink>
</Stack>
</Stack>
</PopoverBody>
</PopoverContent>
</Popover>
)}
</WrapItem>
)}
{penalty > 0 && (
<WrapItem>
<ProfileTag bg={[null, 'red.012']}>
<ProfileTagLabel color="red.500">
{t('Mining penalty')}
</ProfileTagLabel>
<ProfileTagValue color="red.500">
{formatDna(penalty)}
</ProfileTagValue>
</ProfileTag>
</WrapItem>
)}
{inviteScore && (
<WrapItem>
{isMobile ? (
<ProfileTag>
<Flex align="center" justify="space-between">
<ProfileTagLabel>{t('Invitation rewards')}</ProfileTagLabel>
<TextLink href="/contacts" display="inline-flex">
{t('Check invites')}
</TextLink>
</Flex>
<ProfileTagValue>{toPercent(inviteScore)}</ProfileTagValue>
</ProfileTag>
) : (
<ProfileTagPopover>
<ProfileTagPopoverTrigger>
<ProfileTag
cursor="help"
bg={
// eslint-disable-next-line no-nested-ternary
inviteScore < 0.75
? 'red.010'
: inviteScore < 0.99
? 'orange.010'
: 'green.010'
}
color={
// eslint-disable-next-line no-nested-ternary
inviteScore < 0.75
? 'red.500'
: inviteScore < 0.99
? 'orange.500'
: 'green.500'
}
>
<ProfileTagLabel>{t('Invitation rewards')}</ProfileTagLabel>
<ProfileTagValue>{toPercent(inviteScore)}</ProfileTagValue>
</ProfileTag>
</ProfileTagPopoverTrigger>
<ProfileTagPopoverContent>
<Stack spacing="2px" w={40}>
<Text color="xwhite.040" lineHeight="base">
{t(
'You will get {{invitationRewardRatio}} of the invitation rewards if your invite is activated now',
{invitationRewardRatio: toPercent(inviteScore)}
)}
</Text>
<TextLink href="/contacts" color="white" lineHeight="base">
{t('Check invites')}
<ChevronRightIcon />
</TextLink>
</Stack>
</ProfileTagPopoverContent>
</ProfileTagPopover>
)}
</WrapItem>
)}
</Wrap>
)
}
Example #5
| Source File: components.js From idena-web with MIT License | 4 votes |
|
export function ValidationScreen({
state,
send,
validationStart,
shortSessionDuration,
longSessionDuration,
isExceededTooltipOpen,
onValidationFailed,
}) {
const router = useRouter()
const preventSwipeBack = event => {
event.preventDefault()
}
useEffect(() => {
const element = document.querySelector('.block-swipe-nav')
element.addEventListener('touchstart', preventSwipeBack)
return () => element.removeEventListener('touchstart', preventSwipeBack)
}, [])
const {t} = useTranslation()
const [isDesktop] = useMediaQuery('(min-width: 481px)')
const size = useBreakpointValue(['lg', 'md'])
const flipsToLeft = () => {
scroller.scrollTo('flipIcon0', {
duration: 250,
smooth: true,
containerId: 'thumbnails',
horizontal: true,
})
}
const {
isOpen: isReportDialogOpen,
onOpen: onOpenReportDialog,
onClose: onCloseReportDialog,
} = useDisclosure()
const {
isOpen: isReportTipOpen,
onOpen: onOpenReportTip,
onClose: onCloseReportTip,
} = useDisclosure()
const {
currentIndex,
translations,
reports,
longFlips,
isTraining,
} = state.context
const flips = sessionFlips(state)
const currentFlip = flips[currentIndex]
const scrollToCurrentFlip = flipId => {
scroller.scrollTo(`flipIcon${flipId}`, {
duration: 250,
smooth: true,
containerId: 'thumbnails',
horizontal: true,
})
}
const handlers = useSwipeable({
onSwipedLeft: () => {
if (!isDesktop) {
send({type: 'NEXT'})
scrollToCurrentFlip(currentIndex + 1)
}
},
onSwipedRight: () => {
if (!isDesktop) {
send({type: 'PREV'})
scrollToCurrentFlip(currentIndex - 1)
}
},
preventDefaultTouchmoveEvent: true,
trackMouse: true,
})
const flipTimerDetails = {
state,
validationStart,
shortSessionDuration,
longSessionDuration,
}
return (
<ValidationScene
bg={isShortSession(state) ? theme.colors.black : theme.colors.white}
>
<Header order={[1, 1]}>
<Heading
display={['block', 'none']}
color={isShortSession(state) ? 'white' : 'brandGray.500'}
fontSize="base"
zIndex={[2, 'auto']}
>
{isLongSessionKeywords(state)
? t('Check flips quality')
: t('Left or right')}
</Heading>
<Title
color={['muted', isShortSession(state) ? 'white' : 'brandGray.500']}
zIndex={[2, 'auto']}
>
{/* eslint-disable-next-line no-nested-ternary */}
{['shortSession', 'longSession'].some(state.matches) &&
!isLongSessionKeywords(state)
? isDesktop
? t('Select meaningful story: left or right', {nsSeparator: '!'})
: t('Select meaningful story:', {nsSeparator: '!'})
: isDesktop
? t('Check flips quality')
: ''}
</Title>
<Flex align="center">
<Title
color={['muted', isShortSession(state) ? 'white' : 'brandGray.500']}
mr={[0, 6]}
zIndex={[2, 'auto']}
>
{!isDesktop && !isLongSessionKeywords(state) && 'left or right ('}
{currentIndex + 1}{' '}
<Text as="span" color="muted">
{t('out of')} {flips.length}
</Text>
{!isDesktop && !isLongSessionKeywords(state) && ')'}
</Title>
</Flex>
</Header>
<ChakraBox order={[3, 2]} {...handlers}>
<ChakraBox
display={['block', 'none']}
className="block-swipe-nav"
position="absolute"
left={0}
w="32px"
h="100%"
/>
<CurrentStep>
<FlipChallenge>
<ChakraFlex
order={[2, 1]}
w={['100%', 'auto']}
pb={[isLongSessionKeywords(state) ? '96px' : '16px', 0]}
justify="center"
align="center"
position="relative"
>
{currentFlip &&
((currentFlip.fetched && !currentFlip.decoded) ||
currentFlip.failed) && (
<FailedFlipAnnotation>
{t('No data available. Please skip the flip.')}
</FailedFlipAnnotation>
)}
<Flip
{...currentFlip}
variant={AnswerType.Left}
timerDetails={flipTimerDetails}
onChoose={hash =>
send({
type: 'ANSWER',
hash,
option: AnswerType.Left,
})
}
isTrainingValidation={isTraining}
/>
<Flip
{...currentFlip}
variant={AnswerType.Right}
timerDetails={flipTimerDetails}
onChoose={hash =>
send({
type: 'ANSWER',
hash,
option: AnswerType.Right,
})
}
onImageFail={() => send('REFETCH_FLIPS')}
isTrainingValidation={isTraining}
/>
</ChakraFlex>
{isLongSessionKeywords(state) && currentFlip && (
<FlipWords
order={[1, 2]}
key={currentFlip.hash}
currentFlip={currentFlip}
translations={translations}
onReport={onOpenReportDialog}
>
<Stack spacing={[0, 4]}>
<Stack
display={['none', 'flex']}
isInline
spacing={1}
align="center"
>
<Heading fontSize="base" fontWeight={500}>
{t(`Is the flip correct?`)}
</Heading>
<IconButton
icon={<InfoIcon />}
bg="unset"
fontSize={rem(20)}
minW={5}
w={5}
h={5}
_active={{
bg: 'unset',
}}
_hover={{
bg: 'unset',
}}
_focus={{
outline: 'none',
}}
onClick={onOpenReportDialog}
/>
</Stack>
<QualificationActions>
<QualificationButton
size={size}
isSelected={
currentFlip.relevance === RelevanceType.Relevant
}
onClick={() =>
send({
type: 'APPROVE_WORDS',
hash: currentFlip.hash,
})
}
>
{t('Approve')}
</QualificationButton>
<Tooltip
label={t(
'Please remove Report status from some other flips to continue'
)}
isOpen={isExceededTooltipOpen}
placement="top"
zIndex="tooltip"
>
<QualificationButton
mt={[2, 0]}
ml={[0, 2]}
size={size}
isSelected={
currentFlip.relevance === RelevanceType.Irrelevant
}
bg={
currentFlip.relevance === RelevanceType.Irrelevant
? 'red.500'
: 'red.012'
}
color={
currentFlip.relevance === RelevanceType.Irrelevant
? 'white'
: 'red.500'
}
_hover={{
bg:
currentFlip.relevance === RelevanceType.Irrelevant
? 'red.500'
: 'red.020',
}}
_active={{
bg:
currentFlip.relevance === RelevanceType.Irrelevant
? 'red.500'
: 'red.020',
}}
_focus={{
boxShadow: '0 0 0 3px rgb(255 102 102 /0.50)',
outline: 'none',
}}
onClick={() =>
send({
type: 'REPORT_WORDS',
hash: currentFlip.hash,
})
}
>
{t('Report')}{' '}
{t('({{count}} left)', {
count:
availableReportsNumber(longFlips) - reports.size,
})}
</QualificationButton>
</Tooltip>
</QualificationActions>
</Stack>
</FlipWords>
)}
</FlipChallenge>
</CurrentStep>
</ChakraBox>
<ActionBar order={[4, 3]}>
<ActionBarItem />
<ActionBarItem zIndex={2} justify="center">
<ValidationTimer
key={isShortSession(state) ? 'short-timer' : 'long-timer'}
validationStart={validationStart}
duration={
shortSessionDuration -
(isTraining ? 0 : 10) +
(isShortSession(state) ? 0 : longSessionDuration)
}
/>
</ActionBarItem>
<ActionBarItem justify="flex-end">
<ChakraBox
display={['block', 'none']}
position="fixed"
top={0}
h="166px"
w="100%"
bg={isShortSession(state) ? theme.colors.black : theme.colors.white}
/>
<ChakraBox
display={['block', 'none']}
position="fixed"
bottom={0}
h="96px"
w="100%"
bg={isShortSession(state) ? theme.colors.black : theme.colors.white}
/>
{(isShortSession(state) || isLongSessionKeywords(state)) && (
<TooltipLegacy
content={
hasAllRelevanceMarks(state) || isLastFlip(state) || !isDesktop
? null
: t('Go to last flip')
}
>
<PrimaryButton
display={['none', 'inline-flex']}
isDisabled={!canSubmit(state)}
isLoading={isSubmitting(state)}
loadingText={t('Submitting answers...')}
onClick={() => send('SUBMIT')}
>
{t('Submit answers')}
</PrimaryButton>
<CornerButton
display={['block', 'none']}
label={t('Submit')}
isDisabled={!canSubmit(state)}
isLoading={isSubmitting(state)}
isDark={isShortSession(state)}
onClick={() => send('SUBMIT')}
>
<OkIcon
color={canSubmit(state) ? 'brandBlue.500' : 'inherit'}
mb="5px"
boxSize={5}
/>
</CornerButton>
</TooltipLegacy>
)}
{isLongSessionFlips(state) && (
<ChakraBox>
<PrimaryButton
display={['none', 'inline-flex']}
isDisabled={!canSubmit(state)}
onClick={() => {
onOpenReportTip()
send('FINISH_FLIPS')
}}
>
{t('Start checking keywords')}
</PrimaryButton>
<CornerButton
display={['block', 'none']}
label={t('Check')}
isDisabled={!canSubmit(state)}
isDark={isShortSession(state)}
onClick={() => {
onOpenReportTip()
send('FINISH_FLIPS')
}}
>
<ArrowBackIcon
fill={canSubmit(state) ? 'brandBlue.500' : 'gray.200'}
transform="rotate(180deg)"
mb="5px"
boxSize={5}
/>
</CornerButton>
</ChakraBox>
)}
</ActionBarItem>
</ActionBar>
<Thumbnails
id="thumbnails"
order={[2, 4]}
currentIndex={currentIndex}
isLong={isLongSessionFlips(state) || isLongSessionKeywords(state)}
>
{flips.map((flip, idx) => (
<ElementThumbnail
flipId={`flipIcon${idx}`}
key={flip.hash}
{...flip}
isCurrent={currentIndex === idx}
isLong={isLongSessionFlips(state) || isLongSessionKeywords(state)}
onPick={() => send({type: 'PICK', index: idx})}
/>
))}
</Thumbnails>
{!isFirstFlip(state) &&
hasManyFlips(state) &&
isSolving(state) &&
!isSubmitting(state) && (
<NavButton
display={['none', 'block']}
type="prev"
bg={
isShortSession(state) ? theme.colors.white01 : theme.colors.gray
}
color={
isShortSession(state) ? theme.colors.white : theme.colors.text
}
onClick={() => send({type: 'PREV'})}
/>
)}
{!isLastFlip(state) &&
hasManyFlips(state) &&
isSolving(state) &&
!isSubmitting(state) && (
<NavButton
display={['none', 'block']}
type="next"
bg={
isShortSession(state) ? theme.colors.white01 : theme.colors.gray
}
color={
isShortSession(state) ? theme.colors.white : theme.colors.text
}
onClick={() => send({type: 'NEXT'})}
/>
)}
{isSubmitFailed(state) && (
<SubmitFailedDialog
isOpen
isDesktop={isDesktop}
onSubmit={() => send('RETRY_SUBMIT')}
/>
)}
{state.matches('longSession.solve.answer.welcomeQualification') && (
<WelcomeQualificationDialog
isOpen
isDesktop={isDesktop}
onSubmit={() => send('START_LONG_SESSION')}
/>
)}
{state.matches('validationFailed') && (
<ValidationFailedDialog
isOpen
isDesktop={isDesktop}
onSubmit={
onValidationFailed
? () => onValidationFailed()
: () => router.push('/home')
}
/>
)}
<Dialog
isOpen={!isDesktop && isReportTipOpen}
title="Earn rewards for reporting"
variant="primaryMobile"
onClose={onCloseReportTip}
>
<DrawerBody>
<ChakraFlex direction="column">
<Text fontSize="base" color="muted">
{t(
'Report bad flips and get rewarded if these flips are reported by more that 50% of other participants.'
)}
</Text>
<Button
onClick={onCloseReportTip}
fontSize="mobile"
fontWeight={500}
mt={4}
h={10}
variant="primaryFlat"
>
{t('Read more')}
</Button>
</ChakraFlex>
</DrawerBody>
</Dialog>
<BadFlipDialog
isOpen={
isReportDialogOpen ||
state.matches('longSession.solve.answer.finishFlips')
}
title={t('Earn rewards for reporting')}
subtitle={t(
'Report bad flips and get rewarded if these flips are reported by more than 50% of other participants'
)}
onClose={() => {
if (state.matches('longSession.solve.answer.finishFlips')) {
flipsToLeft()
send('START_KEYWORDS_QUALIFICATION')
} else onCloseReportDialog()
}}
/>
<ReviewValidationDialog
flips={filterSolvableFlips(flips)}
reportedFlipsCount={reports.size}
availableReportsCount={availableReportsNumber(longFlips)}
isOpen={state.matches('longSession.solve.answer.review')}
isSubmitting={isSubmitting(state)}
isDesktop={isDesktop}
onSubmit={() => send('SUBMIT')}
onMisingAnswers={() => {
send({
type: 'CHECK_FLIPS',
index: flips.findIndex(({option = 0}) => option < 1),
})
}}
onMisingReports={() => {
send('CHECK_REPORTS')
}}
onCancel={() => {
send('CANCEL')
}}
/>
<ReviewShortSessionDialog
flips={filterSolvableFlips(flips)}
isOpen={state.matches(
'shortSession.solve.answer.submitShortSession.confirm'
)}
isDesktop={isDesktop}
onSubmit={() => send('SUBMIT')}
onClose={() => {
send('CANCEL')
}}
onCancel={() => {
send('CANCEL')
}}
/>
</ValidationScene>
)
}
Example #6
| Source File: FormCard.js From MeowForm with MIT License | 4 votes |
|
function FormCard({formName , responses ,formData ,redirectUrl ,email }) {
const formBackground = useColorModeValue("gray.100","gray.700");
const [check] = useMediaQuery("(min-width: 1025px)")
const { isOpen, onOpen, onClose } = useDisclosure()
const [size, setSize] = React.useState("md")
const [url, setUrl] = React.useState();
const [edit , setEdit] = React.useState(false);
let apiKey = process.env.REACT_APP_APIKEY ;
let apiUrl = process.env.REACT_APP_HOSTURL ;
function isValidURL(string) {
var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
return (res !== null)
};
const sendResponse = async(serverUrl)=> {
let meow = await axios({
method: 'post',
url: serverUrl,
data: {
url: url,
formName: formName
}
});
}
const checkUrl = () => {
if(url === "" || url === undefined){
toast.error(' Url not saved');
setEdit(!edit)
}else if(isValidURL(url)){
let serverUrl = apiUrl + 'url/' + email + '&' + apiKey;
sendResponse(serverUrl);
toast.success('Url is saved, it will some time to reflect');
setEdit(!edit)
}else{
toast.error('The url is not valid :( ');
}
}
return (
<Box id={formName}mt="1%" borderRadius={25} padding="2%" display="flex" flexDirection={check ? "row" : "column"} backgroundColor ="#fff" background={formBackground} >
<Box width="100%" ml="5%" >
<Flex justifyContent="space-between" >
<Text> {formName}</Text>
<Text> {responses} Responses</Text>
<Button colorScheme="orange" onClick={onOpen}> View</Button>
</Flex>
{/* {console.log(formData)} */}
</Box>
<Drawer onClose={onClose} isOpen={isOpen} size={check ? "xl" :"xs"}>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader align="center">
<Text
margin="1%"
fontWeight="extraBold"
fontSize="3xl"
bgGradient="linear(to-l, #ec9f05 ,#ff4e00)"
bgClip="text"
>
{formName}
</Text>
<Text
>
{responses} Responses
</Text>
</DrawerHeader>
<DrawerBody>
<Box>
{formData.length > 0 &&
<>
<FormHeading obj={formData[0]}></FormHeading>
{
formData.map(x=>
<FormData obj={x}></FormData>
)
}
</>
}
{/* <Flex>
<Text margin="5%">Redirect Url </Text>
<Text margin="5%"> { redirectUrl } </Text>
</Flex> */}
{/* { edit && */}
{/* <Flex>
<Input placeholder={redirectUrl} isDisabled={!edit} value={url} onChange={ (e)=>(setUrl(e.target.value))}
/>
{edit === false ?
<Button onClick={()=>{setEdit(!edit)}}>
edit
</Button>
:
<Button onClick={()=>(checkUrl())}> Save</Button>
}
</Flex> */}
{/* } */}
{/* <Text> * you one need Redirect url if you are just using html css , check docs here </Text> */}
</Box>
<Box>
</Box>
</DrawerBody>
</DrawerContent>
</Drawer>
</Box>
);
}
Example #7
| Source File: NavBar.js From MeowForm with MIT License | 4 votes |
|
function Navbar(props) {
const {colorMode , toggleColorMode }= useColorMode();
const isDark = colorMode === 'dark';
const { isOpen, onOpen, onClose } = useDisclosure()
const [size, setSize] = React.useState("md")
const [check] = useMediaQuery("(min-width: 1025px)")
const [meow ,setMeow] = React.useState(false);
const [signIn,setSignIn] = React.useState(false);
const formBackground = useColorModeValue("white.100","gray.900");
const { loginWithRedirect , logout , isAuthenticated , user} = useAuth0();
let flag = false;
var setFlag = () =>{
setMeow(!meow);
onClose();
}
return (
<>
<Box position="fixed" width="100%" backgroundColor="#fff" background={formBackground} zIndex="1000" >
<VStack p={5} >
<Flex w="100%">
<Link to="/">
<Text ml="8" bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
fontSize={check ?"3xl":"xl"}
fontWeight="extrabold"
z-index={5}
>
MeowForm
</Text>
</Link>
<Spacer>
</Spacer>
<Tooltip label="Menu">
<IconButton onClick={onOpen} ml={2} mr={1} icon={<FaList />} isRound="true"></IconButton>
</Tooltip>
{check &&
<Tooltip label="Star! on github" >
<a href='https://github.com/tewarig/' target='_blank'><IconButton ml={2} mr={1} icon={<FaGithub />} isRound="true"></IconButton></a>
</Tooltip>
}
{ check &&
<Tooltip label={isDark ? "Light mode":"Dark Mode"} >
<IconButton ml={2} mr={1} icon={ isDark ? <FaSun /> : <FaMoon /> } isRound="true" onClick={toggleColorMode}>
</IconButton>
</Tooltip>
}
<Tooltip label="Manage Profile">
<Box ml={5} mr={1}>
</Box>
</Tooltip>
{ user &&
<Menu>
{({ isOpen }) => (
<>
<MenuButton isActive={isOpen} >
<Avatar name={user.name} src={user.picture} />
</MenuButton>
<MenuList>
<MenuItem>Hi , {user.name}</MenuItem>
<Link to="/dashboard">
<MenuItem> Dashboard </MenuItem>
</Link>
<MenuItem onClick={() => logout()}>Logout</MenuItem>
</MenuList>
</>
)}
</Menu>
}
{ !isAuthenticated &&
<Tooltip label="Sign in / SignUp ">
<Menu>
{({ isOpen }) => (
<>
<MenuButton isActive={isOpen} >
<Avatar />
</MenuButton>
<MenuList>
<MenuItem onClick={()=>(loginWithRedirect()) }>Sign In/Sign Up </MenuItem>
</MenuList>
</>
)}
</Menu>
{/* <IconButton icon={<FaUser />} isRound="true" onClick={()=>(loginWithRedirect())}>
</IconButton> */}
</Tooltip>
}
</Flex>
</VStack>
<Divider bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" height={1} />
<Drawer onClose={meow ? setFlag : onClose } isOpen={isOpen} size={"xs"}>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader align="center">
<Text bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
fontSize={useDisclosure ? "5xl" : "3xl"}
fontWeight="extrabold"
>
MeowForm
</Text>
</DrawerHeader>
<DrawerBody>
<Box>
{!check &&
<Button ml="1%" mt="5%" width="100%" onClick={toggleColorMode} >
{isDark ? <FaSun color="yellow"/> : <FaMoon color="#59e5f7"/> }
<Text fontSize="xl" ml="4%">
{isDark ? "Light Mode" : "Dark Mode"}
</Text>
</Button>
}
<MenuItems onClose={onClose}></MenuItems>
<Text>
</Text>
</Box>
</DrawerBody>
</DrawerContent>
</Drawer>
</Box>
<Box height="15vh">
</Box>
</>
);
}
Example #8
| Source File: Dashboard.js From MeowForm with MIT License | 4 votes |
|
Dashboard = () => {
const { isLoading, user } = useAuth0();
const [check] = useMediaQuery("(min-width: 1025px)");
const { isOpen, onOpen, onClose } = useDisclosure();
const [formName, setFormName] = React.useState();
let userEmail = user.email;
let apiKey = process.env.REACT_APP_APIKEY;
let apiUrl = process.env.REACT_APP_HOSTURL;
const [data, setData] = React.useState();
const getData = async () => {
let temp = await axios.get(apiUrl + "user/" + userEmail + "&" + apiKey);
setData(temp.data[0]);
console.log(data);
};
useEffect(() => {
getData();
if (data === undefined) {
setTimeout(() => getData(), 2500);
}
}, []);
let responses = 0;
if (data) {
for (let i = 0; i < data.forms.length; i++) {
responses += data.forms[i].formData.length;
}
}
const postApiData = async () => {
let temp = await axios.post(apiUrl + "addForm/" + apiKey, {
email: user.email,
formName: formName,
url: "",
});
getData();
};
const addNewForm = () => {
if (formName === "") {
toast.error("Form is empty?");
} else {
// console.log(data.forms[0].formName);
let isCopy = false;
for (let i = 0; i < data.forms.length; i++) {
if (data.forms[i].formName === formName) {
isCopy = true;
}
}
if (isCopy) {
toast.error("form with such name already exits ");
} else {
postApiData();
setTimeout(() => getData(), 2000);
onClose();
setTimeout(
() => toast.success("Form Have beeen added ?"),
2000
);
}
}
};
return (
<Box backgroundColor='whiteAlpha.100'>
<Box
padding='6'
boxShadow='2xl'
align='center'
margin='2%'
borderRadius={check ? "full" : "0 "}>
<Flex align='center' flexDirection={check ? "row" : "column"}>
<Flex>
<Image src={user.picture} borderRadius='full' />
<Text
mt='10%'
ml='20px'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize={check ? "3xl" : "xl"}>
{user.name}
</Text>
</Flex>
<Flex align='center' ml={check ? "40%" : "10%"}>
<Box>
<Text
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize='3xl'>
{data ? (
responses
) : (
<SkeletonText></SkeletonText>
)}
</Text>
<Text>Responses</Text>
</Box>
<Box ml='50%'>
<Text
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize='3xl'>
{data ? (
data.forms.length
) : (
<SkeletonText></SkeletonText>
)}
</Text>
<Text>Forms</Text>
</Box>
</Flex>
</Flex>
</Box>
<Box
padding='6'
boxShadow='xl'
margin='2%'
borderRadius={check ? "25px" : "0 "}>
<Flex justifyContent='space-between'>
<Text
margin='5%'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize='3xl'>
Forms
</Text>
<Button margin='5%' colorScheme='orange' onClick={onOpen}>
New form
</Button>
</Flex>
<Divider margin='2%' colorScheme='blackAlpha'></Divider>
{data ? (
data.forms.map((x) => (
<FormCard
formName={x.formName}
responses={x.formData.length}
formData={x.formData}
redirectUrl={x.redirectUrl}
email={userEmail}></FormCard>
))
) : (
<>
<SkeletonText mt='3' noOfLines={1}></SkeletonText>
<SkeletonText mt='3' noOfLines={1}></SkeletonText>
</>
)}
{data && data.forms.length === 0 ? (
<>
<Image
src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629867315/kitekat-3_dlccdn.png'
width='25%'
height='25%'
ml='38%'
/>
<Text align='center'>
You haven't created a form Yet{" "}
</Text>
</>
) : (
<> </>
)}
</Box>
<Drawer
onClose={onClose}
isOpen={isOpen}
size={check ? "xs" : "xs"}>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader align='center'>
<Text
margin='1%'
fontWeight='extraBold'
fontSize='3xl'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'>
Add Form
</Text>
<Image src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629884425/kitekat-17_ipr2uy.png' />
<Text></Text>
</DrawerHeader>
<DrawerBody>
<Box>
<Flex>
<Input
onChange={(e) =>
setFormName(e.target.value)
}
placeholder='Form Name'
/>
<Button
ml='0.5%'
colorScheme='orange'
onClick={addNewForm}>
{" "}
>{" "}
</Button>
</Flex>
</Box>
<Box></Box>
</DrawerBody>
</DrawerContent>
</Drawer>
<Toaster />
</Box>
);
}
Example #9
| Source File: Home.js From MeowForm with MIT License | 4 votes |
|
function Home(props) {
const textColor = useColorModeValue("gray.700", "gray.100");
const [check] = useMediaQuery("(min-width: 1025px)");
return (
<>
<div>
<Box ml='5%'>
<Bounce top>
<Text
align='center'
color={textColor}
fontSize={check ? "5xl" : "3xl"}
fontWeight='extrabold'
mt={check ? "0%" : "4%"}>
Functional Forms Solution for
</Text>
<Text
align='center'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize={check ? "7xl" : "4xl"}
fontWeight='extrabold'
mt={check ? "0%" : "4%"}>
<Typewriter
options={{
strings: [
"React ",
"Flutter ",
"Html ",
"React Native",
"Vue",
"Angular",
],
autoStart: true,
loop: true,
}}
/>
</Text>
</Bounce>
<Flip top>
<Box
bgColor='#333'
ml={check ? "20%" : "5%"}
mt={check ? "8%" : "12%"}
width={check ? "60%" : "90%"}
borderRadius='25'>
<Text color='#fff' padding='5%'>
<Typewriter
options={{
strings: [
`<form action="https://server.meowform.xyz/YourEmail&FormName method="post"`,
],
autoStart: true,
loop: true,
}}
/>
</Text>
</Box>
<Flex flexDirection='row' ml={check ? "40%" : "23%"}>
<Box margin='1%'>
<a
rel='noreferrer'
href='https://docs.meowform.xyz/docs/intro'
target='_blank'>
<Button margin='1%'> View docs</Button>
</a>
</Box>
<Box margin='1%'>
<Link to='/dashboard'>
<Button colorScheme='orange'>
{" "}
Try it
</Button>
</Link>
</Box>
</Flex>
</Flip>
<Image
lazyLoad={true}
position={check ? "absolute" : "static"}
src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629015408/kitekat_ezvxgy.png'
width={check ? "24%" : "40%"}
height={check ? "8%" : "80%"}
mt={check ? "-20%" : "5%"}
ml={check ? "-15%" : "28%"}
transform={check ? "rotate(60deg)" : ""}
opacity={check ? "0.9" : "1"}></Image>
</Box>
<Box></Box>
<Box mt='10%'>.</Box>
</div>
<div ml='25%' mt='10%'>
.
</div>
<Box ml='10%' mt='5%'>
<Flex flexDirection={check ? "row" : "column-reverse"}>
<Image
src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629017773/kitekat-19_1_nsknib.png'
width='40%'
height='30%'
ml={check ? "0%" : "25%"}
/>
<Fade right>
<Text
align='center'
color={textColor}
fontSize={check ? "5xl" : "3xl"}
fontWeight='extrabold'
mt={check ? "7%" : "4%"}
ml={check ? "" : "-5%"}>
Make backend-less forms with MeowForm and get
<Text
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'>
Unlimited Responses{" "}
</Text>{" "}
in your inbox .
</Text>
</Fade>
</Flex>
<Flex flexDirection={check ? "row" : "column"} mt='5%'>
<Fade left>
<Text
align='center'
color={textColor}
fontSize={check ? "5xl" : "3xl"}
fontWeight='extrabold'
mt={check ? "7%" : "4%"}
ml={check ? "" : "-5%"}>
Choose your fontend , Use our API to handle things
for
<Text
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'>
{" "}
Free{" "}
</Text>
</Text>
</Fade>
<Image
src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629029065/kitekat-8_ein5pc.png'
width='40%'
height='30%'
ml={check ? "0%" : "25%"}
/>
</Flex>
<Flex flexDirection={check ? "row-reverse" : "column"} mt='5%'>
<Fade right>
<Text
align='center'
color={textColor}
fontSize={check ? "5xl" : "3xl"}
fontWeight='extrabold'
mt={check ? "7%" : "4%"}
ml={check ? "" : "-5%"}>
Missed a response ? don't worry view all responses
in out dashboard
<Text
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'>
{" "}
</Text>
</Text>
</Fade>
<Image
src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1630156150/kitekat-2_kzxgrr.png'
width='40%'
height='30%'
ml={check ? "0%" : "25%"}
/>
</Flex>
</Box>
<Box margin='10%'></Box>
<Box
margin={check ? "5%" : "1%"}
padding={check ? "5%" : "1%"}
alignContent='center'
align='center'>
<Flip top>
<iframe
title='demo video'
width={check ? "640" : "300"}
height={check ? "360" : "200"}
align='center'
src='https://www.loom.com/embed/c8cdc167f9b0405ca37e0b8a6f7ffe13'
frameborder='0'
webkitallowfullscreen
mozallowfullscreen
allowfullscreen='true'></iframe>
</Flip>
<h1 margin='15%'> Meow Form in action</h1>
</Box>
<div className="Reviews">
{/* <Reviews /> */}
</div>
<div className="faq">
<Faq />
</div>
</>
);
}
