react-helmet#Helmet TypeScript Examples

The following examples show how to use react-helmet#Helmet. 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: useHeadTags.tsx    From atlas with GNU General Public License v3.0 6 votes vote down vote up
useHeadTags = (title?: string | null, metaTagsMapping: MetaTags = {}) => {
  return useMemo(() => {
    const pageTitle = title ? `${title} - Joystream` : 'Joystream'
    const metaTags = Object.entries(metaTagsMapping).map(([name, content]) => (
      <meta name={name} content={content.toString()} key={name} />
    ))
    return (
      <Helmet>
        <title>{pageTitle}</title>
        {metaTags}
      </Helmet>
    )
  }, [title, metaTagsMapping])
}
Example #2
Source File: Layout.tsx    From MLH-Fellow-Map with MIT License 6 votes vote down vote up
Layout = ({
  children,
  pageName,
}: {
  children?: ReactElement[] | ReactElement;
  pageName?: string;
}) => {
  let className = '';

  if (pageName) {
    className = `${className} page-${pageName}`;
  }

  return (
    <>
      <Helmet bodyAttributes={{ class: className }}>
        <title>MLH Fellows</title>
      </Helmet>
      <div className="wrapper">
        <main>{children}</main>
      </div>
    </>
  );
}
Example #3
Source File: RoutedTabs.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
export function RoutedTabs(props: { routes: SubRoute[] }) {
  const { routes } = props;
  const navigate = useNavigate();
  const { index, route, element } = useSelectedSubRoute(routes);
  const headerTabs = useMemo(
    () =>
      routes.map(t => ({
        id: t.path,
        label: t.title,
        tabProps: t.tabProps,
      })),
    [routes],
  );

  const onTabChange = (tabIndex: number) =>
    // Remove trailing /*
    // And remove leading / for relative navigation
    // Note! route resolves relative to the position in the React tree,
    // not relative to current location
    navigate(routes[tabIndex].path.replace(/\/\*$/, '').replace(/^\//, ''));

  return (
    <>
      <HeaderTabs
        tabs={headerTabs}
        selectedIndex={index}
        onChange={onTabChange}
      />
      <Content>
        <Helmet title={route.title} />
        {element}
      </Content>
    </>
  );
}
Example #4
Source File: AdminResourceCompatible.tsx    From ke with MIT License 6 votes vote down vote up
AdminResourceCompatible: FC<AdminResourceCompatibleProps> = ({
  navTitle,
  path,
  children,
  onMount,
  onUnmount,
}) => {
  const handleMount = useCallback(() => {
    onMount?.(navTitle)
  }, [navTitle, onMount])

  return (
    <Switch>
      <Route exact strict path={path}>
        <Helmet>
          <title>{navTitle}</title>
        </Helmet>
        <ErrorBoundary>
          {children}
          <MountObeserver onMount={handleMount} onUnmount={onUnmount} />
        </ErrorBoundary>
      </Route>
    </Switch>
  )
}
Example #5
Source File: App.tsx    From covidex with MIT License 6 votes vote down vote up
App = () => {
  return (
    <ThemeProvider theme={Theme}>
      {/* Dynamically load metadata for HTML header */}
      <Helmet>
        <meta charSet="utf-8" />
        <title>{Configuration[METADATA]['title']}</title>
        <meta name="description" content={Configuration[METADATA]['description']} />
        <link rel="icon" href={`/${Configuration[METADATA]['favicon']}`} />
      </Helmet>
      <Router>
        <AppContainer>
          <Navbar />
          <Switch>
            <Route exact path={HOME_ROUTE}>
              <HomePage />
            </Route>
            <Route path={`${RELATED_ROUTE}/:articleId`}>
              <RelatedPage />
            </Route>
            <Route>
              <NotFoundPage />
            </Route>
          </Switch>
          <Footer />
        </AppContainer>
      </Router>
    </ThemeProvider>
  );
}
Example #6
Source File: ios-viewport-fix.tsx    From react-celo with MIT License 6 votes vote down vote up
export default function IOSViewportFix() {
  const { pendingActionCount, connectionCallback } = useCeloInternal();
  const isOpen = pendingActionCount > 0 || Boolean(connectionCallback);

  const tags = useMemo(
    () =>
      isMobile &&
      isOpen && (
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1"
        />
      ),
    [isOpen]
  );
  return <Helmet>{tags}</Helmet>;
}
Example #7
Source File: index.tsx    From che-dashboard-next with Eclipse Public License 2.0 6 votes vote down vote up
public render(): React.ReactElement {
    const { pageName, brandingStore: { data: { title } } } = this.props;

    return (
      <Helmet>
        <title>{pageName ? `${title} | ${pageName}` : title}</title>
      </Helmet>
    );
  }
Example #8
Source File: Meta.tsx    From nosgestesclimat-site with MIT License 6 votes vote down vote up
export default function Meta({
	title,
	description,
	image,
	url,
	children,
}: PropType) {
	const { pathname } = useLocation()
	return (
		<Helmet>
			<title>{title} - Nos Gestes Climat</title>
			<meta name="description" content={description} />
			<meta property="og:type" content="website" />
			<meta property="og:title" content={title} />
			<meta property="og:description" content={description} />
			<meta property="twitter:card" content="summary_large_image" />
			{/* Attention : og:image does not accept SVG; It must be an absolute URL (https://xxx.png/jpg);  */}
			{image && <meta property="og:image" content={image} />}
			{url && <meta property="og:url" content={url} />}
			{children}
		</Helmet>
	)
}
Example #9
Source File: NavBar.tsx    From datajoint-labbook with MIT License 6 votes vote down vote up
render() {
    return (
      <nav className='top-nav'>
        <Helmet>
          <title>DataJoint LabBook{this.props.hostname ? " | " + this.props.hostname : ""}</title>
        </Helmet>
        <div className='nav-logo'>
          <NavLink to='/'><img src={logo} alt='Logo' /></NavLink>
        </div>
        
        <ul className='right-nav'>
          {this.props.isLoggedIn ?
            (
              <li className='right-nav-li hostname'>
                <label>Currently connected</label>
                <h5>{this.props.hostname}</h5>
              </li>
            ) : ''
          }
          {this.props.isLoggedIn ?
            (
              <li className='right-nav-li'>
                <a href="/login">Log Out</a>
              </li>
            ) : <li className='right-nav-li'><a href="/login">Log In</a></li>
          }
        </ul>
      </nav>
    );
  }
Example #10
Source File: Login.tsx    From dwitter-frontend with Apache License 2.0 6 votes vote down vote up
Login: React.FC<RouteComponentProps> = (props) => {
  if (localStorage.getItem('user')) {
    return <Redirect to={'/'} />;
  }

  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <Helmet>
        <title>Log in</title>
      </Helmet>
      <div style={{ maxWidth: pageMaxWidth, flex: 1, padding: 16 }}>
        <div
          style={{
            justifyContent: 'center',
            display: 'flex',
            flexDirection: 'row',
          }}
          className="card p-3"
        >
          <LoginForm
            onLogin={() => {
              props.history.push('/');
            }}
          />
        </div>
      </div>
    </div>
  );
}
Example #11
Source File: CmsSite.tsx    From foundation-lib-spa-core with Apache License 2.0 6 votes vote down vote up
EpiserverWebsite : React.FunctionComponent<CmsSiteProps> = (props) => {
    const SiteLayout = getLayout(props.context);
    const ssr = props.context.serviceContainer.getService<IServerContextAccessor>(DefaultServices.ServerContext);
    const location = (props.context.isServerSideRendering() ? ssr.Path : window.location.pathname) || undefined;
    return <ReduxProvider store={ props.context.getStore() }>
        <EpiserverContext.Provider value={ props.context }>
            <Helmet/>
            <CmsCommunicator />
            <EpiRouter location={ location } context={ props.staticContext }>
                <SiteLayout context={ props.context } >
                    <RoutedContent config={ props.context.config().routes || [] } keyPrefix="CmsSite-RoutedContent" />
                    { props.children }  
                </SiteLayout>
            </EpiRouter>
        </EpiserverContext.Provider>
    </ReduxProvider>
}
Example #12
Source File: index.tsx    From fower with MIT License 6 votes vote down vote up
function Layout(props: Props): JSX.Element {
  const { children, noFooter, wrapperClassName } = props
  return (
    <LayoutProviders>
      <LayoutHead {...props} />

      <Helmet>
        <script>
          {`
        var _hmt = _hmt || []
        ;(function () {
          var hm = document.createElement('script')
          hm.src = "https://hm.baidu.com/hm.js?ad5205df993dc46e352a6c13c9dbb254";
          var s = document.getElementsByTagName('script')[0]
          s.parentNode.insertBefore(hm, s)
        })()
      `}
        </script>
      </Helmet>

      <AnnouncementBar />
      <Navbar />
      <Box
        w-1360--md
        className={clsx('main-wrapper', wrapperClassName)}
        style={{
          // maxWidth: '1360px',
          // width: '1360px',
          margin: '0 auto',
        }}
      >
        {children}
      </Box>

      {!noFooter && <Footer />}
    </LayoutProviders>
  )
}
Example #13
Source File: index.tsx    From selfolio with MIT License 6 votes vote down vote up
ReactDOM.render(
  <React.StrictMode>
    <Helmet>
      <meta name="description" content={description} />
      <title>{title}</title>
    </Helmet>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);
Example #14
Source File: Layout.tsx    From jobsgowhere with MIT License 6 votes vote down vote up
Layout: React.FC<LayoutProps> = function (props) {
  const { children } = props;
  const auth0Context = React.useContext(Auth0Context);
  const location = useLocation<{ pathname: string }>().pathname;
  const isActive = location.match(/\/(talents|jobs)\/[a-f0-9-]{36}/);
  const { setIsDetailView } = useMobileViewContext();
  setIsDetailView(Boolean(isActive));
  const profileContext = useProfile();
  if (!profileContext?.profile) {
    auth0Context?.state?.context?.client?.isAuthenticated().then((res) => {
      if (res) profileContext?.refresh();
    });
  }
  return (
    <Container>
      <Helmet
        defaultTitle={process.env.REACT_APP_WEBSITE_NAME}
        titleTemplate={`%s | ${process.env.REACT_APP_WEBSITE_NAME}`}
      />
      <Header />
      {children}
      <Footer />
      <ToastContainer />
      <MessageDialogContainer />
    </Container>
  );
}
Example #15
Source File: Seo.tsx    From lesesalen with MIT License 6 votes vote down vote up
Seo: React.FC<Props> = ({ description, lang = "no", title }) => {
  const siteMetadata = useSiteMetadata();

  const metaDescription = description ?? siteMetadata.description;
  const image = `${siteMetadata.siteUrl}/icons/icon-96x96.png`;

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${siteMetadata.title}`}
      meta={[
        { name: "name", content: title || siteMetadata.title },
        { name: `description`, content: metaDescription },
        { name: "image", content: image },

        { name: `twitter:card`, content: `summary` },
        { name: "twitter:site", content: `Lesesalen` },
        { name: `twitter:title`, content: title },
        { name: `twitter:description`, content: metaDescription },
        { name: `twitter:creator`, content: siteMetadata.author.name },
        { name: "twitter:image", content: image },

        { property: "og:type", content: "website" },
        { property: "og:title", content: title },
        { property: "og:url", content: siteMetadata.siteUrl },
        { property: "og:image", content: image },
        { property: "og:description", content: metaDescription },
        { property: "og:site_name", content: `Lesesalen` },
      ]}
    />
  );
}
Example #16
Source File: index.tsx    From django-react-typescript with MIT License 6 votes vote down vote up
Header: React.FC<IProps> = ({ title }) => {
  const { history } = useRouter();
  const { width } = useViewport();
  const { TABLET } = BREAKPOINTS;

  return (
    <>
      <Helmet>
        <meta charSet="utf-8" />
        <title>{title}</title>
        <link rel="canonical" href={history.location.pathname} />
        <meta name="viewport" content={"width=device-width, initial-scale=1"} />
        <meta name="description" content={TAGLINE} />
        <meta name="og:title" property="og:title" content={title} />
        <meta property="og:url" content={WEBSITE_URL} />
        <meta property="og:type" content="article" />
        <meta property="og:description" content={TAGLINE} />
        <meta property="og:image" content={WEBSITE_URL + "/static/logo.png"} />
        <meta property="og:site_name" content={WEBSITE_NAME} />
        <meta property="og:type" content="website" />
        <meta property="og:updated_time" content={`${+new Date()}`} />
        <meta name="twitter:title" content={title} />
        <meta name="twitter:description" content={TAGLINE} />
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:site" content={WEBSITE_URL} />
        <meta name="twitter:image" content={WEBSITE_URL + "/static/logo.png"} />
      </Helmet>
      <Nav pinned={width < TABLET} />
    </>
  );
}
Example #17
Source File: App.tsx    From tailchat with GNU General Public License v3.0 6 votes vote down vote up
AppHeader: React.FC = React.memo(() => {
  const { language } = useLanguage();

  return (
    <Helmet>
      <meta httpEquiv="Content-Language" content={language} />
    </Helmet>
  );
})
Example #18
Source File: 404.tsx    From mtcute with GNU Lesser General Public License v3.0 6 votes vote down vote up
NotFoundPage = ({ location }: any) => {
    const classes = usePageStyles()
    const path: string = location.pathname

    let historyReference = undefined
    let m
    if ((m = path.match(/^(?:\/tl|\/)((?:class|union|method)\/.+?)$/))) {
        historyReference = (
            <Typography variant="body1" className={classes.paragraph}>
                This type might no longer exist, but you could check{' '}
                <MuiLink component={Link} to={`/history/${m[1]}`}>
                    History section
                </MuiLink>
            </Typography>
        )
    }

    return (
        <Page>
            <Helmet>
                <title>404 Not found</title>
                <meta name="robots" content="noindex" />
            </Helmet>
            <div className={classes.heading1}>
                <Typography variant="h3" id="tl-reference">
                    404
                </Typography>
            </div>
            <Typography variant="body1" className={classes.paragraph}>
                This page does not exist
            </Typography>
            {historyReference}
        </Page>
    )
}
Example #19
Source File: SEO.tsx    From nextclade with MIT License 6 votes vote down vote up
export function SEO() {
  const locale = useRecoilValue(localeAtom)
  const htmlAttributes = useMemo(() => ({ lang: locale.full }), [locale])
  return (
    <>
      <Helmet htmlAttributes={htmlAttributes} />
      <Head>
        <title>{PROJECT_NAME}</title>

        <meta name="description" content={PROJECT_DESCRIPTION} />
        <meta name="application-name" content={PROJECT_NAME} />

        <meta itemProp="description" content={PROJECT_DESCRIPTION} />
        <meta itemProp="image" content={URL_SOCIAL_IMAGE} />
        <meta itemProp="name" content={PROJECT_NAME} />
        <meta property="og:description" content={PROJECT_DESCRIPTION} />
        <meta property="og:image" content={URL_SOCIAL_IMAGE} />
        <meta property="og:image:secure_url" content={URL_SOCIAL_IMAGE} />
        <meta property="og:image:type" content="image/png" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="600" />
        <meta property="og:locale" content={locale.full} />
        <meta property="og:title" content={PROJECT_NAME} />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={DOMAIN} />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:description" content={PROJECT_DESCRIPTION} />
        <meta name="twitter:image" content={URL_SOCIAL_IMAGE} />
        <meta name="twitter:image:alt" content={PROJECT_DESCRIPTION} />
        <meta name="twitter:title" content={PROJECT_NAME} />
        <meta name="twitter:url" content={DOMAIN} />
        <meta name="twitter:site" content={TWITTER_USERNAME_FRIENDLY} />
      </Head>
    </>
  )
}
Example #20
Source File: App.meta.tsx    From tezos-academy with MIT License 6 votes vote down vote up
AppMeta = () => (
  <Helmet>
    <title>Learn to write Tezos Smart Contracts the fun way | TezosAcademy</title>
    <meta name="title" content="Learn to write Tezos Smart Contracts the fun way | TezosAcademy" />
    <meta
      name="description"
      content="TezosAcademy is a fun interactive tutorial about learning to writte Tezos smart contract in LIGO"
    />

    <meta property="og:title" content="Learn to write Tezos Smart Contracts the fun way | TezosAcademy" />
    <meta
      property="og:description"
      content="TezosAcademy is a fun interactive tutorial about learning to writte Tezos smart contract in LIGO"
    />
    <meta property="og:url" content="//tezosacademy.io" />
    <meta property="og:site_name" content="TezosAcademy" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="//tezosacademy.io/ogimage.png" />
  </Helmet>
)
Example #21
Source File: Layout.tsx    From OpenSourcerySite with GNU General Public License v3.0 6 votes vote down vote up
Layout: FC<LayoutProps> = ({
    children,
    pageTitle,
    data: {
        title,
        description,
        meta = {}
    }
}) =>
    <>
        <Helmet defer={false}>
            <title>
                {title + (pageTitle ? "-" + pageTitle : "")}
            </title>
            <link
                rel="stylesheet"
                href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
                integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
                crossOrigin="anonymous"
            />
            <meta name="description" content={description} />
            {
                Object.keys(meta).map(name =>
                    meta[name] instanceof Array
                        ? (meta[name] as string[]).map(content =>
                            <meta name={name} content={content} key={content} />
                        )
                        : <meta name={name} content={meta[name] as string} />
                )
            }
        </Helmet>
        <Nav />
        {children}
        <Footer />
    </>
Example #22
Source File: Home.tsx    From Riakuto-StartingReact-ja3.1 with Apache License 2.0 6 votes vote down vote up
Home: VFC = () => (
  <>
    <Helmet>
      <title>作品紹介 | SLAM DUNK</title>
    </Helmet>
    <header>
      <h1>『SLAM DUNK』作品紹介</h1>
    </header>
    <Container className="summary">
      <p>
        神奈川県立湘北高校に入学した赤い髪の不良少年である桜木花道は、中学時代に50人の女性から振られ続けたうえに、最後に振られた女性が「バスケ部の小田君」に好意を持っていたため、バスケットボールが大嫌いになっていた。
      </p>
      <p>
        しかし、廊下で自身に声をかけてきた赤木晴子に自身の長身と筋肉、身体能力の高さを見出された花道は、彼女にバスケット部への入部を薦められる。花道は晴子に一目惚れし、バスケットボールは全くの初心者であるにもかかわらず、彼女目当てに入部。その後、地道な練習や試合を通じて徐々にバスケットの面白さに目覚め、その才能の芽を急速に開花させる。湘北バスケ部には、監督である安西光義のもと、晴子の兄でもある主将の赤木剛憲と副主将の木暮公延らに加え、スーパールーキーといわれる流川楓らが加入。さらに、前年度のインターハイ県予選ベスト4である陵南高校との練習試合後には、暴力事件を起こして入院をしていた宮城リョータや、バスケ部から離れていた三井寿も復帰する。
      </p>
      <p>
        夏のインターハイ制覇を目指す湘北は緒戦で前年度のインターハイ県予選ベスト8である三浦台高校を破ると、その後も神奈川県予選を順調に勝ち進み、決勝リーグへの進出を懸けてインターハイ常連校の翔陽高校と対戦し勝利する。続く決勝リーグの初戦で前年度までに過去16年連続インターハイ出場を果たしている強豪校の海南大附属高校と激戦を繰り広げるも、惜敗。しかし、2戦目で前年度のインターハイ県予選ベスト4である武里高校に勝利すると、3戦目では宿敵の陵南を破り準優勝。優勝した海南大附属とともにインターハイ出場を果たす。
      </p>
      <p>
        広島県で行われるインターハイのトーナメント1回戦で、湘北は大阪府代表校の豊玉高校と対戦し、勝利。2回戦では、前年度までのインターハイで3連覇を果たした秋田県代表校の山王工業高校と対戦する。一時は20点以上の差をつけられるが、驚異的な粘りで反撃する。花道は負傷した背中の痛みに耐えながらプレーを続け、試合終了間際のジャンプシュートによる決勝点で湘北を逆転勝利に導く。しかし、全てを出し切った湘北は、続く3回戦で愛知県代表校の愛和学院高校との対戦で、ウソのようにボロ負けした。
        インターハイ後、3年生は赤木と木暮が引退し、三井のみ残留。新キャプテンにリョータが就任し、晴子を新たにマネージャーとして迎えるなど、チームは冬の選抜に向けて、新体制となる。流川は全日本ジュニアの代表に選ばれ、花道はリハビリを続けながら再びコートに立てる時を待つ。
      </p>
    </Container>
    <SchoolList />
  </>
)
Example #23
Source File: index.tsx    From nanolooker with MIT License 6 votes vote down vote up
BlockPage: React.FC = () => {
  const { t } = useTranslation();
  const { block = "" } = useParams<PageParams>();
  const { setBlocks } = React.useContext(BlocksInfoContext);

  const isValid = isValidBlockHash(block);

  React.useEffect(() => {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    setBlocks([block]);

    return () => setBlocks([]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [block]);

  return (
    <>
      <Helmet>
        <title>
          {t("common.block")} {block}
        </title>
      </Helmet>
      <Title level={3}>{t("common.block")}</Title>
      {isValid ? <BlockDetails /> : null}
      {!isValid || !block ? (
        <Card bordered={false}>
          <Title level={3}>{t("pages.block.missingBlock")}</Title>
          <Text>{t("pages.block.missingBlockInfo")}</Text>
        </Card>
      ) : null}
    </>
  );
}
Example #24
Source File: GlobalStyles.tsx    From spacesvr with MIT License 6 votes vote down vote up
export default function GlobalStyles() {
  return (
    <>
      <Global styles={globalStyles} />
      <Helmet>
        <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
      </Helmet>
    </>
  );
}
Example #25
Source File: layout.tsx    From website with MIT License 6 votes vote down vote up
render() {
		const { title, narrowLayout } = this.props;
		return (
			<React.Fragment>

				<StaticQuery
					query={query}
					render={(data) => (
						<Helmet titleTemplate={data.site.siteMetadata.titleTemplate} defaultTitle={data.site.siteMetadata.defaultTitle}>
							{title && <title>{title}</title>}
							<meta property='og:type' content='website' />
							<meta property='og:title' content={`${title ? `${title} - ` : ''}${data.site.siteMetadata.defaultTitle}`} />
							<meta property='og:site_name' content='DataCore' />
							<meta property='og:image' content={`${data.site.siteMetadata.baseUrl}/media/logo.png`} />
							<meta property='og:description' content={data.site.siteMetadata.defaultDescription} />
							<link id='defaultThemeCSS' rel='stylesheet' type='text/css' href={withPrefix('styles/semantic.slate.css')} />
							<link rel='stylesheet' type='text/css' href={withPrefix('styles/easymde.min.css')} />
							<script src={withPrefix('styles/theming.js')} type='text/javascript' />
							<script src={withPrefix('polyfills.js')} type='text/javascript' />
						</Helmet>
					)}
				/>
				<TopMenu narrowLayout={narrowLayout}>
					{this.props.children}
				</TopMenu>
			</React.Fragment>
		);
	}
Example #26
Source File: NoMatchPage.tsx    From UsTaxes with GNU Affero General Public License v3.0 6 votes vote down vote up
export default function NoMatchPage(): ReactElement {
  return (
    <form tabIndex={-1}>
      <Helmet>
        <title>404 Page not found | UsTaxes.org</title>
      </Helmet>
      <h2>Page not found</h2>
      <p>
        We can&apos;t find the page you&apos;re looking for! Don&apos;t worry,
        your progress has been saved
      </p>
      <SingleButtons text={'Go Back Home'} url={'/'} />
    </form>
  )
}
Example #27
Source File: Utils.tsx    From clarity with Apache License 2.0 5 votes vote down vote up
Title = (props: { title: string }) => (
  <Helmet>
    <title>CasperLabs Clarity - {props.title}</title>
  </Helmet>
)
Example #28
Source File: ClientPanel.tsx    From TutorBase with MIT License 5 votes vote down vote up
Panel = () => {
    const isMobile = useMediaQuery('(max-width: 1200px)')

    let dispatch = useDispatch();
    let sidebarToggled = useSelector(selectSidebarToggled);
    let clientFlowData = useSelector(selectClientFlowData);
    let steps = ["Subject", "Class", "Tutor", "Time", "Notes"];
    let params : string = useLocation().pathname;
    params = params.split('/')[2];

    let body = <FormParent />;
    if (params === 'meetings') {
        body = <Meetings mode="Client" />;
    } else if (params === 'history') {
        body = <ClientHistory />;
    } else if (params === 'settings') {
        body = <ClientSettings />
    }

    const renderSteps = () => {
       let flow = [];

       if(!isMobile)
        flow.push(<FlowText>Schedule a tutoring session {"→"} &nbsp;</FlowText>);

       steps.forEach((step, index) => {
           if(clientFlowData.currentStep === index)
               if(isMobile)
                   flow.push(<FlowText><b style={{color: 'black'}}> {index + 1} </b></FlowText>)
               else
                   flow.push(<FlowText><b style={{color: 'black'}}> {step} </b></FlowText>)
           else
               if(isMobile)
                   flow.push(<FlowText>{index + 1}</FlowText>)
               else
                   flow.push(<FlowText> {step} </FlowText>)

           if(index != 4)
               flow.push(<FlowText> &nbsp; {"→"} &nbsp;</FlowText>)
       })

        return flow;
    }

    return (
        <div id="panel-wrapper" style={{width:'100vw'}}>
            <Helmet>
                <meta charSet="utf-8" />
                <title>TutorBase - Dashboard</title>
            </Helmet>

            <Navbar className={classNames("navbar-expand-lg", "navbar-light", "bg-light", "border-bottom", "shadow")}>
                <Button className="btn-red" id="menu-toggle" onClick={() => {
                    dispatch(actions.toggleSidebar());
                }} style={{marginLeft: '0.5em'}}>
                    ☰
                </Button>

                
            </Navbar>

            <div className="container-fluid" style={{maxWidth:'100vw'}}>
            {params === "schedule" && (
                    <Container >
                        {renderSteps().map((component, index) => (
                            <React.Fragment key={index}>
                                { component }
                            </React.Fragment>
                        ))}
                    </Container>
                )}
                {body}</div>
        </div>
    );
}
Example #29
Source File: MainLayout.tsx    From personal-archive with MIT License 5 votes vote down vote up
MainLayout: FC<Props> = ({ side, title, children}) => {
  const [showSearchDrawer, setShowSearchDrawer] = useState(false)
  const [showNav, setShowNav] = useState(false)  // only works in mobile
  const history = useHistory()

  useEffect(() => {
    // 페이지 이동시 초기화
    history.listen(() => setShowNav(false))
  }, [history])

  useSubscribe(ShowSearchDrawer, (isOpened: boolean) => setShowSearchDrawer(isOpened))

  const customTokens = getTokens({})

  return (
    <ThemeProvider theme={{orbit: customTokens}}>
      <Parent>
        <Helmet>
          <title>{getTitle(title)}</title>
        </Helmet>
        <Header>
          <Logo>PA</Logo>
          <Menu onClick={() => history.push(`/tags/all`)}>
            <FaRegNewspaper size="21px" />
          </Menu>
          <Menu onClick={() => history.push(`/notes`)}>
            <FaRegStickyNote size="21px" />
          </Menu>
          <Menu onClick={() => setShowSearchDrawer(true)}>
            <FaSearch size="21px" />
          </Menu>
          <Menu onClick={() => history.push(`/settings`)}>
            <FaRegSun size="21px" />
          </Menu>
          <DarkModeSwitch />
        </Header>
        <Middle>
          <Mobile>
            <When condition={side != null}>
              <Menu onClick={() => setShowNav(true)}>
                <MenuHamburger/>
              </Menu>
            </When>
          </Mobile>
        </Middle>
        <Body>
          <Desktop>
            <When condition={side != null}>
              <Nav>
                {side}
              </Nav>
            </When>
          </Desktop>
          <Main>
            {children}
            <SearchDrawer
              show={showSearchDrawer}
              onClose={() => setShowSearchDrawer(false)}
            />
          </Main>
        </Body>
        <Drawer
          shown={showNav}
          onClose={() => setShowNav(false)}
        >
          <Stack>
            {side}
          </Stack>
        </Drawer>
      </Parent>
    </ThemeProvider>
  )
}