87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import { ProductT, ProductGroupT, useMainContext } from 'components/context/MainContext'
|
|
|
|
import React from 'react'
|
|
import { useRouter } from 'next/router'
|
|
import { useVersion } from 'components/hooks/useVersion'
|
|
import { Link } from 'components/Link'
|
|
import * as Octicons from '@primer/octicons-react'
|
|
|
|
type ProductSelectionCardProps = {
|
|
name: string
|
|
group: ProductGroupT
|
|
}
|
|
|
|
export const ProductSelectionCard = ({ name, group }: ProductSelectionCardProps) => {
|
|
const router = useRouter()
|
|
const { currentVersion } = useVersion()
|
|
const { isFPT } = useMainContext()
|
|
|
|
function href(product: ProductT) {
|
|
return `${!product.external ? `/${router.locale}` : ''}${
|
|
product.versions?.includes(currentVersion) && !isFPT
|
|
? `/${currentVersion}/${product.id}`
|
|
: product.href
|
|
}`
|
|
}
|
|
|
|
const groupIcon = {
|
|
height: '22px',
|
|
}
|
|
|
|
function showProduct(product: ProductT) {
|
|
return isFPT || product.versions?.includes(currentVersion) || product.external
|
|
}
|
|
|
|
function icon(group: ProductGroupT) {
|
|
if (group.icon) {
|
|
return (
|
|
<div className="pr-3">
|
|
<img src={group.icon} alt={group.name} style={groupIcon}></img>
|
|
</div>
|
|
)
|
|
} else if (group.octicon) {
|
|
const octicon: React.FunctionComponent = (
|
|
Octicons as { [name: string]: React.FunctionComponent }
|
|
)[group.octicon] as React.FunctionComponent
|
|
|
|
return (
|
|
<div className="mr-2">
|
|
{React.createElement(octicon, groupIcon as React.Attributes, null)}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="d-flex flex-column col-12 col-sm-6 col-lg-4 pb-4">
|
|
<div className="flex-auto ws-normal">
|
|
<div className="d-flex flex-items-center">
|
|
{icon(group)}
|
|
|
|
<div>
|
|
<h3>{name}</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2 mb-4 text-normal">
|
|
<ul className="list-style-none">
|
|
{group.children.map((product) => {
|
|
if (!showProduct(product)) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<li key={product.name} className="pt-2">
|
|
<Link href={href(product)} target={product.external ? '_blank' : undefined}>
|
|
{product.name}
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|