56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import type { FeaturedLink } from 'components/context/ProductLandingContext'
|
|
|
|
type Props = {
|
|
guide: FeaturedLink
|
|
}
|
|
export const GuideCard = ({ guide }: Props) => {
|
|
const authors = guide.authors && guide.authors.length > 0 ? guide.authors : ['GitHub']
|
|
const authorString = `@${authors.join(', @')}`
|
|
|
|
return (
|
|
<div className="col-lg-4 col-12 mb-4">
|
|
<a
|
|
className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-text-primary p-5"
|
|
href={guide.href}
|
|
>
|
|
<h2 dangerouslySetInnerHTML={{ __html: guide.title }} />
|
|
<p
|
|
className="mt-2 mb-4 color-text-tertiary"
|
|
dangerouslySetInnerHTML={{ __html: guide.intro || '' }}
|
|
/>
|
|
|
|
<footer className="d-flex">
|
|
<div className="mr-1">
|
|
{authors.length === 1 ? (
|
|
<img
|
|
className="avatar avatar-2 circle mr-1"
|
|
src={`https://github.com/${authors[0]}.png`}
|
|
alt={`@${authors[0]}`}
|
|
/>
|
|
) : (
|
|
<div className="AvatarStack AvatarStack--three-plus">
|
|
<div
|
|
className="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
|
|
aria-label={authorString}
|
|
>
|
|
{authors.map((author) => {
|
|
return (
|
|
<img
|
|
className="avatar circle"
|
|
alt={`@${author}`}
|
|
src={`https://github.com/${author}.png`}
|
|
/>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>{authorString}</div>
|
|
</footer>
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|