EnterpriseAI/ClosedCode
1
0
Fork 0
Code Issues Pull Requests Actions 30 Packages Projects Releases Wiki Activity

feat(stats): unify comparison cards

Browse Source
This commit is contained in:
Adam
2026-07-10 06:49:56 -05:00
parent 7dbfd0b934
commit f4faacbe87
4 changed files with 109 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stats/app/src/routes/compare/[firstLab]/[firstModel]/[secondLab]/[secondModel].tsx
+7 -46
View File
@@ -12,6 +12,7 @@ import { createAsync, query, useParams, useSearchParams } from "@solidjs/router"
import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js"
import { getRequestEvent } from "solid-js/web"
import {
ComparisonCardsSection,
comparisonHref,
modelRefFromCatalog,
uniqueComparisonPairs,
@@ -382,7 +383,12 @@ export default function ModelComparePair() {
</Show>
</div>
</div>
<ComparisonRelatedSection pairs={relatedPairs()} />
<ComparisonCardsSection
pairs={relatedPairs()}
title="Related comparisons"
description="Other model pairs to check."
variant="featured"
/>
</div>
<Footer
themePreference={themePreference()}
@@ -865,51 +871,6 @@ function ComparisonUsageBars(props: { data: ModelUsagePoint[]; column: number; l
)
}
function ComparisonRelatedSection(props: { pairs: ComparisonPair[] }) {
return (
<Show when={props.pairs.length > 0}>
<section id="model-comparison" data-section="compare-home-related">
<p data-slot="section-title">
<strong>Related comparisons.</strong> <span>Other model pairs to check.</span>
</p>
<div data-component="compare-home-card-grid">
<For each={props.pairs.slice(0, 4)}>{(pair) => <ComparisonRelatedCard pair={pair} />}</For>
</div>
</section>
</Show>
)
}
function ComparisonRelatedCard(props: { pair: ComparisonPair }) {
return (
<a
data-component="compare-home-card"
href={comparisonHref(props.pair.first, props.pair.second)}
aria-label={`${props.pair.first.name} vs ${props.pair.second.name}`}
>
<span data-slot="compare-home-card-head">
<span>
<strong>{props.pair.detail}</strong>
<em>
{props.pair.first.name} vs {props.pair.second.name}
</em>
</span>
<b aria-hidden="true" />
</span>
<span data-slot="compare-home-card-divider" aria-hidden="true" />
<span data-slot="compare-home-card-models">
<span>{props.pair.first.name}</span>
<i aria-hidden="true">·</i>
<span>{props.pair.second.name}</span>
</span>
<span data-slot="compare-home-card-avatars" aria-hidden="true">
<LabLogo lab={props.pair.first.lab} label={props.pair.first.labName ?? props.pair.first.lab} size="small" />
<LabLogo lab={props.pair.second.lab} label={props.pair.second.labName ?? props.pair.second.lab} size="small" />
</span>
</a>
)
}
function ModelAvatar(props: { model: ModelCatalogEntry; size: "large" | "small" | "tiny" }) {
return <LabLogo lab={props.model.lab} label={props.model.name} size={props.size} />
}
packages/stats/app/src/routes/compare/index.tsx
+16 -51
View File
@@ -8,7 +8,13 @@ import { LocaleLinks } from "../../component/locale-links"
import { useI18n } from "../../context/i18n"
import { useLanguage } from "../../context/language"
import { localizedUrl } from "../../lib/language"
import { comparisonHref, modelRefFromCatalog, type ComparisonModelRef } from "../compare-cards"
import {
ComparisonCardsSection,
comparisonHref,
modelRefFromCatalog,
type ComparisonModelRef,
type ComparisonPair,
} from "../compare-cards"
import { formatCatalogLabName, getModelCatalog, type ModelCatalogEntry } from "../model-catalog"
import { setStatsPageCacheHeaders } from "../stats-cache"
import {
@@ -56,13 +62,6 @@ const categoryTemplates = [
},
] as const
type CompareCategory = {
title: string
description: string
first: ComparisonModelRef
second: ComparisonModelRef
avatars: ComparisonModelRef[]
}
type CompareSlot = "first" | "second"
export default function ModelCompareIndex() {
@@ -162,16 +161,12 @@ export default function ModelCompareIndex() {
<CompareHomeSelector models={featuredModels()} />
</Show>
</section>
<Show when={categories().length > 0}>
<section id="model-comparison" data-section="compare-home-related">
<p data-slot="section-title">
<strong>Related comparisons.</strong> <span>Other model pairs to check.</span>
</p>
<div data-component="compare-home-card-grid">
<For each={categories()}>{(category) => <CompareHomeCard category={category} />}</For>
</div>
</section>
</Show>
<ComparisonCardsSection
pairs={categories()}
title="Related comparisons"
description="Other model pairs to check."
variant="featured"
/>
</div>
<Footer
themePreference={themePreference()}
@@ -443,35 +438,6 @@ function HeroModelStack() {
)
}
function CompareHomeCard(props: { category: CompareCategory }) {
return (
<a
data-component="compare-home-card"
href={comparisonHref(props.category.first, props.category.second)}
aria-label={`${props.category.title}: ${props.category.first.name} vs ${props.category.second.name}`}
>
<span data-slot="compare-home-card-head">
<span>
<strong>{props.category.title}</strong>
<em>{props.category.description}</em>
</span>
<b aria-hidden="true" />
</span>
<span data-slot="compare-home-card-divider" aria-hidden="true" />
<span data-slot="compare-home-card-models">
<span>{props.category.first.name}</span>
<i aria-hidden="true">·</i>
<span>{props.category.second.name}</span>
</span>
<span data-slot="compare-home-card-avatars" aria-hidden="true">
<For each={props.category.avatars}>
{(model) => <LabLogo lab={model.lab} label={model.name} size="small" />}
</For>
</span>
</a>
)
}
function ModelAvatar(props: { model: ModelCatalogEntry; size: "large" | "small" | "tiny" }) {
return <LabLogo lab={props.model.lab} label={props.model.name} size={props.size} />
}
@@ -486,8 +452,8 @@ function LabLogo(props: { lab: string; label: string; size: "large" | "small" |
)
}
function buildComparisonCategories(models: ModelCatalogEntry[]): CompareCategory[] {
return categoryTemplates.reduce<{ keys: Set<string>; categories: CompareCategory[] }>(
function buildComparisonCategories(models: ModelCatalogEntry[]): ComparisonPair[] {
return categoryTemplates.reduce<{ keys: Set<string>; categories: ComparisonPair[] }>(
(result, template, index) => {
const candidates = categoryCandidates(template.kind, models)
const pair = categoryPair(candidates, models, index, result.keys)
@@ -496,11 +462,10 @@ function buildComparisonCategories(models: ModelCatalogEntry[]): CompareCategory
const first = modelRefFromCatalog(pair.first)
const second = modelRefFromCatalog(pair.second)
result.categories.push({
title: template.title,
detail: template.title,
description: template.description,
first,
second,
avatars: [first, second],
})
return result
},