1
0
mirror of synced 2025-12-20 02:19:14 -05:00
Files
docs/components/GenericError.tsx
Kevin Heis 9f7c20dae8 Upgrade Primer CSS to version 17, removing marketing styles (#20965)
* Package updates

* Fix up things that look broken

* Add to utils

* Lead now just sets font size, just use f3 where needed

* Update package-lock.json

* Update index.tsx

* Delete bump-link.scss

* Update trigger-error.js

* Update components/GenericError.tsx

Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com>

* Update ArticlePage.tsx

* Update ActionBar.tsx

* Changes from meeting

* Found a few more monos

* Fix from a merge conflict

* Missed a few f3s

* Update SubLandingHero.tsx

* Bye gradients

* Match up breadcrumbs

* Update SubLandingHero.tsx

* Update lists.scss

Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com>
2021-08-31 14:49:39 -07:00

120 lines
3.9 KiB
TypeScript

import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { MarkGithubIcon, CommentDiscussionIcon } from '@primer/octicons-react'
import { useVersion } from 'components/hooks/useVersion'
export function GenericError() {
const { isEnterprise } = useVersion()
return (
<div className="min-h-screen d-flex flex-column">
<Head>
<title>GitHub Documentation</title>
<meta name="status" content="500" />
</Head>
<SimpleHeader />
<div className="container-xl p-responsive py-9 width-full flex-1">
<article className="col-md-10 col-lg-7 mx-auto">
<h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
<p className="f2 color-text-secondary">It looks like something went wrong.</p>
<p className="f3">
We track these errors automatically, but if the problem persists please feel free to
contact us.
</p>
<a
id="contact-us"
href={
isEnterprise
? 'https://enterprise.github.com/support'
: 'https://support.github.com/contact'
}
className="btn btn-outline mt-2"
>
<CommentDiscussionIcon size="small" className="octicon mr-1" />
Contact support
</a>
</article>
</div>
<SimpleFooter />
</div>
)
}
export const SimpleHeader = () => {
const router = useRouter()
return (
<div className="border-bottom color-border-secondary no-print">
<header className="container-xl p-responsive py-3 position-relative d-flex width-full">
<div
className="d-flex flex-items-center"
style={{ zIndex: 3 }}
id="github-logo-mobile"
role="banner"
>
<Link href={`/${router.locale}`}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a aria-hidden="true" tabIndex={-1}>
<MarkGithubIcon size={32} className="color-icon-primary" />
</a>
</Link>
<Link href={`/${router.locale}`}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="h4 color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
</Link>
</div>
</header>
</div>
)
}
export const SimpleFooter = () => {
return (
<footer className="py-6 text-small">
<div className="container-xl d-flex px-3 px-md-6 flex-justify-center">
<ul className="d-flex list-style-none flex-wrap flex-justify-center">
<li className="d-flex mr-xl-3 color-text-secondary">
<MarkGithubIcon className="mr-2 mr-xl-3" size={20} />
<span>&copy; {new Date().getFullYear()} GitHub, Inc.</span>
</li>
<li className="ml-3">
<a href="/github/site-policy/github-terms-of-service">Terms</a>
</li>
<li className="ml-3">
<a href="/github/site-policy/github-privacy-statement">Privacy </a>
</li>
<li className="ml-3">
<a href="https://github.com/security">Security</a>
</li>
<li className="ml-3">
<a href="https://www.githubstatus.com/">Status</a>
</li>
<li className="ml-3">
<a href="/">Help</a>
</li>
<li className="ml-3">
<a href="https://support.github.com">Contact GitHub</a>
</li>
<li className="ml-3">
<a href="https://github.com/pricing">Pricing</a>
</li>
<li className="ml-3">
<a href="/developers">Developer API</a>
</li>
<li className="ml-3">
<a href="https://services.github.com/">Training</a>
</li>
<li className="ml-3">
<a href="https://github.com/about">About</a>
</li>
</ul>
</div>
</footer>
)
}