diff --git a/packages/stats/app/src/routes/index.css b/packages/stats/app/src/routes/index.css index b43ed53ce2..739b255343 100644 --- a/packages/stats/app/src/routes/index.css +++ b/packages/stats/app/src/routes/index.css @@ -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: diff --git a/packages/stats/app/src/routes/index.tsx b/packages/stats/app/src/routes/index.tsx index 85f1360f06..a30986dd96 100644 --- a/packages/stats/app/src/routes/index.tsx +++ b/packages/stats/app/src/routes/index.tsx @@ -1262,30 +1262,56 @@ function MarketShareList(props: { onActiveAuthorChange: (author: string) => void }) { const i18n = useI18n() + const language = useLanguage() return (
    - {(item, index) => ( -
  1. props.onActiveAuthorChange(item.author)} - onFocus={() => props.onActiveAuthorChange(item.author)} - onKeyDown={(event) => { - if (event.key !== "Enter" && event.key !== " ") return - event.preventDefault() - props.onActiveAuthorChange(item.author) - }} - > - {String(index() + 1).padStart(2, "0")} - - {item.author} - {formatTrillions(item.tokens)} - {item.share.toFixed(1)}% -
  2. - )} + {(item, index) => { + const label = () => + `${item.author} ${formatTrillions(item.tokens)} ${item.share.toFixed(1)} ${i18n.t("chart.percent")}` + const content = () => ( + <> + {String(index() + 1).padStart(2, "0")} + + {item.author} + {formatTrillions(item.tokens)} + {item.share.toFixed(1)}% + + ) + const href = () => + item.author === "Other" ? undefined : language.route(`${import.meta.env.BASE_URL}${modelSlug(item.author)}`) + return ( +
  3. props.onActiveAuthorChange(item.author)} + > + props.onActiveAuthorChange(item.author)} + onFocus={() => props.onActiveAuthorChange(item.author)} + > + {content()} + + } + > + {(href) => ( + props.onActiveAuthorChange(item.author)} + onFocus={() => props.onActiveAuthorChange(item.author)} + > + {content()} + + )} + +
  4. + ) + }}
)