Refactor React Header component (#19755)
This commit is contained in:
Mike Surowiec
@@ -2,11 +2,18 @@ import { useRouter } from 'next/router'
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { MarkGithubIcon, GitPullRequestIcon, PeopleIcon, CommentDiscussionIcon, ThumbsdownIcon, ThumbsupIcon } from '@primer/octicons-react'
|
||||
import {
|
||||
MarkGithubIcon,
|
||||
GitPullRequestIcon,
|
||||
PeopleIcon,
|
||||
CommentDiscussionIcon,
|
||||
ThumbsdownIcon,
|
||||
ThumbsupIcon,
|
||||
} from '@primer/octicons-react'
|
||||
import { useVersion } from 'components/hooks/useVersion'
|
||||
import { AllProductsLink } from 'components/product/AllProductsLink'
|
||||
|
||||
export default function Custom404 (props : any) {
|
||||
export default function Custom404(props: any) {
|
||||
const router = useRouter()
|
||||
const { currentVersion, isEnterprise } = useVersion()
|
||||
|
||||
@@ -47,9 +54,7 @@ export default function Custom404 (props : any) {
|
||||
<div className="container-xl p-responsive py-6">
|
||||
<article className="markdown-body col-md-10 col-lg-7 mx-auto">
|
||||
<h1>Ooops</h1>
|
||||
<div className="lead-mktg mb-5">
|
||||
It looks like this page doesn't exist.
|
||||
</div>
|
||||
<div className="lead-mktg mb-5">It looks like this page doesn't exist.</div>
|
||||
<div className="col-lg-12 mt-6">
|
||||
<h3 className="mb-3">Need help?</h3>
|
||||
</div>
|
||||
@@ -58,29 +63,36 @@ export default function Custom404 (props : any) {
|
||||
<section className="mt-lg-9 py-7 px-3 px-md-6 no-print color-bg-tertiary">
|
||||
<div className="container-xl gutter-lg-spacious clearfix">
|
||||
<div className="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
|
||||
<div className="f5 contribution">
|
||||
<h2 className="f4">Help us make these docs great!</h2>
|
||||
<p className="color-text-secondary f6">All GitHub docs are open source. See something that's wrong or unclear? Submit a pull request.</p>
|
||||
<a className="btn btn-outline" href={contribution_href}>
|
||||
<GitPullRequestIcon size="small" className="octicon mr-1" />
|
||||
<div className="f5 contribution">
|
||||
<h2 className="f4">Help us make these docs great!</h2>
|
||||
<p className="color-text-secondary f6">
|
||||
All GitHub docs are open source. See something that's wrong or unclear? Submit a
|
||||
pull request.
|
||||
</p>
|
||||
<a className="btn btn-outline" href={contribution_href}>
|
||||
<GitPullRequestIcon size="small" className="octicon mr-1" />
|
||||
Make a contribution
|
||||
</a>
|
||||
<p className="color-text-secondary f6 mt-2">
|
||||
Or,{' '}
|
||||
<a
|
||||
href="https://github.com/github/docs/blob/main/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
learn how to contribute.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<p className="color-text-secondary f6 mt-2">
|
||||
Or,{' '}
|
||||
<a
|
||||
href="https://github.com/github/docs/blob/main/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
learn how to contribute.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-12 col-xl-4 float-left">
|
||||
<div>
|
||||
<h3 className="mb-2 f4">Still need help?</h3>
|
||||
<a id="ask-community" href="https://github.community" className="btn btn-outline mr-4 mt-2">
|
||||
<a
|
||||
id="ask-community"
|
||||
href="https://github.community"
|
||||
className="btn btn-outline mr-4 mt-2"
|
||||
>
|
||||
<PeopleIcon size="small" className="octicon mr-1" />
|
||||
Ask the GitHub community
|
||||
</a>
|
||||
@@ -94,7 +106,7 @@ export default function Custom404 (props : any) {
|
||||
className="btn btn-outline mt-2"
|
||||
>
|
||||
<CommentDiscussionIcon size="small" className="octicon mr-1" />
|
||||
Contact support
|
||||
Contact support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,15 +2,20 @@ import { useRouter } from 'next/router'
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { MarkGithubIcon, GitPullRequestIcon, PeopleIcon, CommentDiscussionIcon } from '@primer/octicons-react'
|
||||
import {
|
||||
MarkGithubIcon,
|
||||
GitPullRequestIcon,
|
||||
PeopleIcon,
|
||||
CommentDiscussionIcon,
|
||||
} from '@primer/octicons-react'
|
||||
import { useVersion } from 'components/hooks/useVersion'
|
||||
|
||||
export default function Custom500(props : any) {
|
||||
export default function Custom500(props: any) {
|
||||
const router = useRouter()
|
||||
const { isEnterprise } = useVersion()
|
||||
const contribution_href = router.locale
|
||||
? `https://github.com/github/docs/edit/main/content/`
|
||||
: 'https://github.com/github/docs'
|
||||
? `https://github.com/github/docs/edit/main/content/`
|
||||
: 'https://github.com/github/docs'
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -20,11 +25,11 @@ export default function Custom500(props : any) {
|
||||
<div className="border-bottom color-border-secondary no-print">
|
||||
<header className="container-xl px-3 px-md-6 pt-3 pb-2 position-relative d-flex flex-justify-between width-full">
|
||||
<div
|
||||
className="d-flex flex-items-center d-lg-none"
|
||||
style={{ zIndex: 3 }}
|
||||
id="github-logo-mobile"
|
||||
role="banner"
|
||||
>
|
||||
className="d-flex flex-items-center d-lg-none"
|
||||
style={{ zIndex: 3 }}
|
||||
id="github-logo-mobile"
|
||||
role="banner"
|
||||
>
|
||||
<Link href={`/${router.locale}`}>
|
||||
<a aria-hidden="true" tabIndex={-1}>
|
||||
<MarkGithubIcon size={32} className="color-icon-primary" />
|
||||
@@ -32,17 +37,14 @@ export default function Custom500(props : any) {
|
||||
</Link>
|
||||
|
||||
<Link href={`/${router.locale}`}>
|
||||
<a className="h4-mktg color-text-primary no-underline no-wrap pl-2">
|
||||
GitHub Docs
|
||||
</a>
|
||||
<a className="h4-mktg color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="width-full">
|
||||
<div className="d-inline-block width-full d-md-flex" style={{ zIndex: 1 }}>
|
||||
<div className="float-right d-md-none position-relative" style={{ zIndex: 3 }}>
|
||||
<div className="d-md-inline-block">
|
||||
</div>
|
||||
<div className="d-md-inline-block"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,38 +54,45 @@ export default function Custom500(props : any) {
|
||||
<article className="markdown-body col-md-10 col-lg-7 mx-auto">
|
||||
<h1>Ooops!</h1>
|
||||
<div className="lead-mktg mb-5">
|
||||
It looks like something went wrong.
|
||||
We track these errors automatically, but if the problem persists please feel free to contact us.
|
||||
It looks like something went wrong. We track these errors automatically, but if the
|
||||
problem persists please feel free to contact us.
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
<section className="mt-lg-9 py-7 px-3 px-md-6 no-print color-bg-tertiary">
|
||||
<div className="container-xl gutter-lg-spacious clearfix">
|
||||
<div className="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
|
||||
<div className="f5 contribution">
|
||||
<h2 className="f4">Help us make these docs great!</h2>
|
||||
<p className="color-text-secondary f6">All GitHub docs are open source. See something that's wrong or unclear? Submit a pull request.</p>
|
||||
<a className="btn btn-outline" href={contribution_href}>
|
||||
<GitPullRequestIcon size="small" className="octicon mr-1" />
|
||||
<div className="f5 contribution">
|
||||
<h2 className="f4">Help us make these docs great!</h2>
|
||||
<p className="color-text-secondary f6">
|
||||
All GitHub docs are open source. See something that's wrong or unclear? Submit a
|
||||
pull request.
|
||||
</p>
|
||||
<a className="btn btn-outline" href={contribution_href}>
|
||||
<GitPullRequestIcon size="small" className="octicon mr-1" />
|
||||
Make a contribution
|
||||
</a>
|
||||
<p className="color-text-secondary f6 mt-2">
|
||||
Or,{' '}
|
||||
<a
|
||||
href="https://github.com/github/docs/blob/main/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
learn how to contribute.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<p className="color-text-secondary f6 mt-2">
|
||||
Or,{' '}
|
||||
<a
|
||||
href="https://github.com/github/docs/blob/main/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
learn how to contribute.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-12 col-xl-4 float-left">
|
||||
<div>
|
||||
<h3 className="mb-2 f4">Still need help?</h3>
|
||||
<a id="ask-community" href="https://github.community" className="btn btn-outline mr-4 mt-2">
|
||||
<a
|
||||
id="ask-community"
|
||||
href="https://github.community"
|
||||
className="btn btn-outline mr-4 mt-2"
|
||||
>
|
||||
<PeopleIcon size="small" className="octicon mr-1" />
|
||||
Ask the GitHub community
|
||||
</a>
|
||||
@@ -97,7 +106,7 @@ export default function Custom500(props : any) {
|
||||
className="btn btn-outline mt-2"
|
||||
>
|
||||
<CommentDiscussionIcon size="small" className="octicon mr-1" />
|
||||
Contact support
|
||||
Contact support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -65,9 +65,7 @@ function LandingPage(props: LandingPageProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
{SearchResults}
|
||||
</div>
|
||||
<div className="mt-3">{SearchResults}</div>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user