1
0
mirror of synced 2025-12-21 10:57:10 -05:00
Files
docs/components/landing/SponsorsExamples.tsx
Mike Surowiec bc1ee6c60d Custom Link component (#19682)
* use our own Link component instead of next/link directly

* only show link href warnings outside of production environments
2021-06-03 08:21:33 -07:00

33 lines
1.0 KiB
TypeScript

import { ArrowRightIcon } from '@primer/octicons-react'
import { Link } from 'components/Link'
import { useProductLandingContext } from 'components/context/ProductLandingContext'
import { useTranslation } from 'components/hooks/useTranslation'
import { UserCard } from 'components/landing/UserCard'
export const SponsorsExamples = () => {
const { productUserExamples } = useProductLandingContext()
const { t } = useTranslation('product_landing')
if (!productUserExamples) {
return null
}
return (
<div>
<div className="d-flex flex-wrap gutter">
{productUserExamples.slice(0, 6).map((user) => {
return (
<div key={user.username} className="col-12 col-xl-4 col-lg-6 mb-4">
<UserCard href={`https://github.com/sponsors/${user.username}`} user={user} />
</div>
)
})}
</div>
<Link href={`https://github.com/sponsors/community`} className="btn btn-outline float-right">
{t('explore_people_and_projects')} <ArrowRightIcon />
</Link>
</div>
)
}