fix(stats): link market share labs

This commit is contained in:
Adam 2026-07-03 10:34:13 -05:00
parent 33ed95f09c
commit 1f47bbfce2
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
2 changed files with 63 additions and 24 deletions

View file

@ -2129,27 +2129,40 @@
}
[data-page="stats"] [data-component="market-share-list"] li {
min-width: 0;
}
[data-page="stats"] [data-component="market-share-list"] li > a,
[data-page="stats"] [data-component="market-share-list"] li > button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
height: 28px;
box-sizing: border-box;
padding: 0 8px;
background: var(--stats-layer);
border: 1px solid var(--stats-line);
background: var(--stats-layer);
color: inherit;
font: inherit;
font-size: 11px;
line-height: 1;
cursor: pointer;
outline: none;
text-decoration: none;
transition:
border-color 120ms ease,
box-shadow 120ms ease,
background 120ms ease;
}
[data-page="stats"] [data-component="market-share-list"] li[data-active="true"],
[data-page="stats"] [data-component="market-share-list"] li:focus-visible {
[data-page="stats"] [data-component="market-share-list"] li > button {
appearance: none;
}
[data-page="stats"] [data-component="market-share-list"] li[data-active="true"] > :is(a, button),
[data-page="stats"] [data-component="market-share-list"] li > :is(a, button):focus-visible {
border-color: var(--stats-text);
background: var(--stats-layer);
box-shadow:

View file

@ -1262,30 +1262,56 @@ function MarketShareList(props: {
onActiveAuthorChange: (author: string) => void
}) {
const i18n = useI18n()
const language = useLanguage()
return (
<ol data-component="market-share-list">
<For each={props.data}>
{(item, index) => (
<li
role="button"
tabIndex={0}
aria-label={`${item.author} ${formatTrillions(item.tokens)} ${item.share.toFixed(1)} ${i18n.t("chart.percent")}`}
data-active={props.activeAuthor === item.author ? "true" : undefined}
onPointerEnter={() => props.onActiveAuthorChange(item.author)}
onFocus={() => props.onActiveAuthorChange(item.author)}
onKeyDown={(event) => {
if (event.key !== "Enter" && event.key !== " ") return
event.preventDefault()
props.onActiveAuthorChange(item.author)
}}
>
<span>{String(index() + 1).padStart(2, "0")}</span>
<i style={{ background: getRankColor(item.author, index(), props.authorOrder, marketColors) }} />
<strong>{item.author}</strong>
<em>{formatTrillions(item.tokens)}</em>
<b>{item.share.toFixed(1)}%</b>
</li>
)}
{(item, index) => {
const label = () =>
`${item.author} ${formatTrillions(item.tokens)} ${item.share.toFixed(1)} ${i18n.t("chart.percent")}`
const content = () => (
<>
<span>{String(index() + 1).padStart(2, "0")}</span>
<i style={{ background: getRankColor(item.author, index(), props.authorOrder, marketColors) }} />
<strong>{item.author}</strong>
<em>{formatTrillions(item.tokens)}</em>
<b>{item.share.toFixed(1)}%</b>
</>
)
const href = () =>
item.author === "Other" ? undefined : language.route(`${import.meta.env.BASE_URL}${modelSlug(item.author)}`)
return (
<li
data-active={props.activeAuthor === item.author ? "true" : undefined}
onPointerEnter={() => props.onActiveAuthorChange(item.author)}
>
<Show
when={href()}
fallback={
<button
type="button"
aria-label={label()}
onClick={() => props.onActiveAuthorChange(item.author)}
onFocus={() => props.onActiveAuthorChange(item.author)}
>
{content()}
</button>
}
>
{(href) => (
<a
href={href()}
aria-label={label()}
onClick={() => props.onActiveAuthorChange(item.author)}
onFocus={() => props.onActiveAuthorChange(item.author)}
>
{content()}
</a>
)}
</Show>
</li>
)
}}
</For>
</ol>
)