a511c95c7f
* turn article.scss into a module + componentized * Update Survey to use only component styles, add cancel button * Update GenericError + 404 page to use only standard classes * update LearningTrack to not use markdown-body * remove / consolidate stylesheets * cleanup Graphiql explorer page and scss * Componentize Breadcrumb styles * Componentize DeprecationBanner styles * scope h2 a link style to markdown-body * cleanup nav, organize page-header and page-footer components * remove unused scroll-button.scss * organize LanguagePicker and ProductPicker * add declarations file * remove featured-links.scss, update tests * update list utility and toc test * fix bad merge resolution * update breadcrumbs test
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import type { LearningTrack } from 'components/context/ArticleContext'
|
|
import { useTranslation } from 'components/hooks/useTranslation'
|
|
|
|
type Props = {
|
|
track: LearningTrack
|
|
}
|
|
export function LearningTrackNav({ track }: Props) {
|
|
const { t } = useTranslation('learning_track_nav')
|
|
const { prevGuide, nextGuide, trackName } = track
|
|
return (
|
|
<div className="py-3 px-4 rounded color-bg-primary border-gradient--purple-pink d-flex flex-justify-between learning-track-nav">
|
|
<span className="d-flex flex-column">
|
|
{prevGuide && (
|
|
<>
|
|
<span className="f6 color-text-secondary">{t('prevGuide')}</span>
|
|
<a
|
|
href={`${prevGuide.href}?learn=${trackName}`}
|
|
className="text-bold color-text-secondary"
|
|
>
|
|
{prevGuide.title}
|
|
</a>
|
|
</>
|
|
)}
|
|
</span>
|
|
|
|
<span className="d-flex flex-column flex-items-end">
|
|
{nextGuide && (
|
|
<>
|
|
<span className="f6 color-text-secondary">{t('nextGuide')}</span>
|
|
<a
|
|
href={`${nextGuide.href}?learn=${trackName}`}
|
|
className="text-bold color-text-secondary text-right f4"
|
|
>
|
|
{nextGuide.title}
|
|
</a>
|
|
</>
|
|
)}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|