1
0
mirror of synced 2026-01-29 03:03:52 -05:00
Files
docs/components/sublanding/ArticleCard.tsx
Mike Surowiec b084dbc23d React: Enable all remaining pages (#20012)
* enable all remaining pages

* update tests for survey, filter card dropdowns

* fix search test

* fix: mobile search layout

* update sidebar test

* fix: learning track page is optional

* fix broken links
2021-06-21 19:52:58 +00:00

34 lines
1.1 KiB
TypeScript

import { ArticleGuide } from 'components/context/ProductSubLandingContext'
type Props = {
card: ArticleGuide
typeLabel: string
}
export const ArticleCard = ({ card, typeLabel }: Props) => {
return (
<div data-testid="article-card" className="d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8">
<a className="no-underline d-flex flex-column py-3 border-bottom" href={card.href}>
<h4 className="h4 color-text-primary mb-1">{card.title}</h4>
<div className="h6 text-uppercase" data-testid="article-card-type">{typeLabel}</div>
<p className="color-text-secondary my-3">{card.intro}</p>
{card.topics.length > 0 && (
<div>
{card.topics.map((topic) => {
return (
<span
data-testid="article-card-topic"
key={topic}
className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1"
>
{topic}
</span>
)
})}
</div>
)}
</a>
</div>
)
}