@emotion/core#ClassNames JavaScript Examples

The following examples show how to use @emotion/core#ClassNames. 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: Layout.js    From mailmask with GNU Affero General Public License v3.0 5 votes vote down vote up 
PageLayout = ({ children }) => {
  const theme = useTheme()
  const [ floatingHeader, setFloatingHeader ] = useState(false)

  const onHeaderFloat = useCallback(() => {
    setFloatingHeader(true)
  }, [])

  const onHeaderUnfloat = useCallback(() => {
    setFloatingHeader(false)
  }, [])

  return (
    <Layout>
      <ModalProvider>
        <ClassNames>
          {({ css }) => (
            <CookieConsent
              disableStyles={true}
              containerClasses={css`
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100vw;
                z-index: 1000001;
                padding: 0 0.5rem;
                background-color: ${theme.consentBar.bgColor};
                color: ${theme.consentBar.textColor};
                text-align: center;
              `}
              contentClasses={css`
                display: inline-block;
                ${theme.font('body')};
                font-size: 0.8rem;
                margin: 0.5rem;

                ${childAnchors(theme.consentBar.anchor)};
              `}
              buttonClasses={css`
                display: inline-block;
                font-size: 0.8rem;
                padding: 0.4em 0.8em;
                border-radius: 5px;
                margin: 0.5rem 0;

                ${buttonStyles({
                ...theme.button,
              })}
              `}
              buttonText='Ok'
              acceptOnScroll={true}
            >
              By using this website you agree to our <PrivacyLink>privacy policy</PrivacyLink>.
            </CookieConsent>
          )}
        </ClassNames>
        <Headroom onPin={onHeaderFloat} onUnfix={onHeaderUnfloat}>
          <HeaderWrapper floating={floatingHeader}>
            <MaxContentWidth width={maxContentWidth}>
              <StyledHeader floating={floatingHeader} />
            </MaxContentWidth>
          </HeaderWrapper>
        </Headroom>
        {children}
        <MaxContentWidth width={maxContentWidth}>
          <Footer />
        </MaxContentWidth>
      </ModalProvider>
    </Layout>
  )
}
Example #2
Source File: SplashImage.js    From mailmask with GNU Affero General Public License v3.0 5 votes vote down vote up 
SplashSvg = ({ className }) => {
  const [ active, setActive ] = useState(1)

  useEffect(() => {
    let show = 1

    const timer = setInterval(() => {
      show = (show < 3 ? show + 1 : 1)
      setActive(show)
    }, 6000)

    return () => {
      clearInterval(timer)
    }
  }, [])

  const content = useMemo(() => {
    return <Container className={className} key={active}><SvgImage src={`splash${active}`} /></Container>
  }, [ active, className ])

  return (
    <ClassNames>
      {({ css }) => (
        <StyledTinyCrossFade
          className={className}
          classNames={{
            beforeEnter: css`
              opacity: 0;
            `,
            entering: css`
              opacity: 1;
              transition: opacity 0.5s;
            `,
            beforeLeave: css`
              opacity: 1;
            `,
            leaving: css`
              opacity: 0;
              transition: opacity 0.5s;
            `,
          }}
          disableInitialAnimation={true}
        >
          {content}
        </StyledTinyCrossFade>
      )}
    </ClassNames>
  )
}