64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import { FeaturedTrack } from "components/context/ProductSubLandingContext";
|
|
import { useTranslation } from "components/hooks/useTranslation";
|
|
import { ArrowRightIcon } from '@primer/octicons-react'
|
|
import { useState } from "react";
|
|
|
|
type Props = {
|
|
track: FeaturedTrack,
|
|
}
|
|
|
|
export const LearningTrack = ({ track }: Props) => {
|
|
const guides = track.guides
|
|
const [ visibleGuides, setVisibleGuides ] = useState(guides?.slice(0, 4))
|
|
const showAll = () => {
|
|
setVisibleGuides(guides)
|
|
}
|
|
const { t } = useTranslation('product_sublanding')
|
|
|
|
return (
|
|
<div className="my-3 px-4 col-12 col-md-6 learning-track">
|
|
<div className="Box js-show-more-container d-flex flex-column">
|
|
<div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
|
|
<div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
|
|
<div className="my-xl-0 mr-xl-3">
|
|
<h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">
|
|
{track.title}
|
|
</h5>
|
|
<p className="color-text-inverse truncate-overflow-3 learning-track--description">{track.description}</p>
|
|
</div>
|
|
</div>
|
|
<a
|
|
className="d-inline-block border color-border-inverse color-text-inverse px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0"
|
|
role="button"
|
|
href="{{ track.guides[0].href }}?learn={{ track.trackName }}"
|
|
>
|
|
{t('start')}
|
|
<span className="mr-2">
|
|
<ArrowRightIcon size={20} />
|
|
</span>
|
|
</a>
|
|
</div>
|
|
{visibleGuides?.map((guide) =>
|
|
<div>
|
|
<a className="Box-row d-flex flex-items-center color-text-primary no-underline js-show-more-item" href={`${guide.href}?learn=${track.trackName}`}>
|
|
<div className="circle color-bg-tertiary d-inline-flex mr-4">
|
|
{guides && <span className="m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text">{guides?.indexOf(guide)+1}</span>}
|
|
</div>
|
|
<h5 className="flex-auto pr-2">{guide.title}</h5>
|
|
<div className="color-text-tertiary h6 text-uppercase">{t('guide_types')[guide.page.type]}</div>
|
|
</a>
|
|
{guides && guides?.indexOf(guide) == 3 ? (
|
|
<a
|
|
className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
|
|
onClick={showAll}
|
|
>
|
|
<div className="position-absolute left-0 right-0 py-5 fade-background-bottom" style={{ bottom: '50px' }}></div>
|
|
<span>Show more guides</span>
|
|
</a>
|
|
) : <div />}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |