zihluwang
9d095eba1b
- Add `placement: top|bottom` to the section frontmatter - Override `DocContent` to render hoisted bands under the page title - Derive the zebra stripe from list position so split bands stay continuous - Opt marketing bands out of doc typography with `rp-not-doc` - Point the legal and privacy contact address at legal@onixbyte.com - Condense the products pages' body copy into their section frontmatter
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { arr, str, type TechStackGroup, type TechStackItem } from "./types"
|
|
|
|
/**
|
|
* Technology matrix: named groups of technologies, each with an optional
|
|
* emoji/icon and link.
|
|
*/
|
|
export function TechStack({ groups }: { groups?: TechStackGroup[] }) {
|
|
const visible = (arr<TechStackGroup>(groups) ?? [])
|
|
.map((group) => ({ group, items: arr<TechStackItem>(group?.items) ?? [] }))
|
|
.filter(({ items }) => items.length > 0)
|
|
|
|
if (visible.length === 0) return null
|
|
|
|
return (
|
|
<div className="flex flex-col gap-10">
|
|
{visible.map(({ group, items }, groupIndex) => (
|
|
<div key={str(group.name) ?? `group-${groupIndex}`}>
|
|
<h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-(--rp-c-text-3)">
|
|
{str(group.name) ?? ""}
|
|
</h3>
|
|
<ul className="m-0 grid list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 md:grid-cols-4">
|
|
{items.map((item, itemIndex) => {
|
|
const name = str(item?.name)
|
|
if (!name) return null
|
|
const url = str(item?.url)
|
|
const icon = str(item?.icon)
|
|
const body = (
|
|
<span className="flex items-center gap-2">
|
|
{icon && <span aria-hidden="true">{icon}</span>}
|
|
<span>{name}</span>
|
|
</span>
|
|
)
|
|
return (
|
|
<li key={`${name}-${itemIndex}`} className="m-0">
|
|
{url ? (
|
|
<a
|
|
className="rp-link flex items-center rounded-md border border-(--rp-c-divider-light) px-3 py-2 no-underline transition-colors hover:bg-(--rp-c-bg-mute)"
|
|
href={url}>
|
|
{body}
|
|
</a>
|
|
) : (
|
|
<span className="flex items-center rounded-md border border-(--rp-c-divider-light) px-3 py-2">
|
|
{body}
|
|
</span>
|
|
)}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|