|
|
@ -29,6 +29,8 @@ type TopicDetailLinkProps = { |
|
|
|
export function TopicDetailLink(props: TopicDetailLinkProps) { |
|
|
|
export function TopicDetailLink(props: TopicDetailLinkProps) { |
|
|
|
const { url, onClick, type, title, isPaid = false } = props; |
|
|
|
const { url, onClick, type, title, isPaid = false } = props; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const linkType = type === 'opensource' ? 'OpenSource' : type; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<a |
|
|
|
<a |
|
|
|
href={url} |
|
|
|
href={url} |
|
|
@ -38,18 +40,11 @@ export function TopicDetailLink(props: TopicDetailLinkProps) { |
|
|
|
> |
|
|
|
> |
|
|
|
<span |
|
|
|
<span |
|
|
|
className={cn( |
|
|
|
className={cn( |
|
|
|
'mr-2 inline-block rounded px-1.5 py-0.5 text-xs uppercase no-underline', |
|
|
|
'mr-2 inline-block rounded px-1.5 py-0.5 text-xs capitalize no-underline', |
|
|
|
(isPaid ? paidLinkTypes[type] : linkTypes[type]) || 'bg-gray-200', |
|
|
|
(isPaid ? paidLinkTypes[type] : linkTypes[type]) || 'bg-gray-200', |
|
|
|
)} |
|
|
|
)} |
|
|
|
> |
|
|
|
> |
|
|
|
{type === 'opensource' ? ( |
|
|
|
{linkType} |
|
|
|
<> |
|
|
|
|
|
|
|
{url.includes('github') && 'GitHub'} |
|
|
|
|
|
|
|
{url.includes('gitlab') && 'GitLab'} |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
type |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</span> |
|
|
|
</span> |
|
|
|
{title} |
|
|
|
{title} |
|
|
|
</a> |
|
|
|
</a> |
|
|
|