Skip to content

Commit 1e86260

Browse files
ericyangpanericyangpan
committed
refactor(catalog): standardize product card headings
1 parent f344238 commit 1e86260

6 files changed

Lines changed: 52 additions & 56 deletions

File tree

‎src/app/[locale]/clis/page.client.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22

33
import { useTranslations } from 'next-intl'
44
import { useMemo, useState } from 'react'
5-
import { DeprecatedBadge } from '@/components/controls/DeprecatedBadge'
65
import FilterSortBar from '@/components/controls/FilterSortBar'
7-
import { VerifiedBadge } from '@/components/controls/VerifiedBadge'
86
import Footer from '@/components/Footer'
97
import Header from '@/components/Header'
108
import StackTabs from '@/components/navigation/StackTabs'
119
import PageHeader from '@/components/PageHeader'
10+
import { ProductCardTitle } from '@/components/product/ProductCardTitle'
1211
import type { Locale } from '@/i18n/config'
1312
import { Link } from '@/i18n/navigation'
1413
import { clisData } from '@/lib/generated'
@@ -137,18 +136,13 @@ export default function CLIsPageClient({ locale }: Props) {
137136
<Link
138137
key={cli.name}
139138
href={`/clis/${cli.id}`}
140-
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group flex flex-col"
139+
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 flex flex-col"
141140
>
142-
<div className="flex justify-between items-start mb-[var(--spacing-sm)]">
143-
<div className="flex items-center gap-[var(--spacing-xs)]">
144-
<h3 className="text-lg font-semibold tracking-tight">{cli.name}</h3>
145-
{cli.verified && <VerifiedBadge size="sm" />}
146-
{cli.deprecated && <DeprecatedBadge />}
147-
</div>
148-
<span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
149-
→
150-
</span>
151-
</div>
141+
<ProductCardTitle
142+
name={cli.name}
143+
verified={cli.verified}
144+
deprecated={cli.deprecated}
145+
/>
152146
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] mb-[var(--spacing-md)] font-light min-h-[4rem]">
153147
{cli.description}
154148
</p>

‎src/app/[locale]/desktops/page.client.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
import { useTranslations } from 'next-intl'
44
import { useMemo, useState } from 'react'
55
import FilterSortBar from '@/components/controls/FilterSortBar'
6-
import { VerifiedBadge } from '@/components/controls/VerifiedBadge'
76
import Footer from '@/components/Footer'
87
import Header from '@/components/Header'
98
import StackTabs from '@/components/navigation/StackTabs'
109
import PageHeader from '@/components/PageHeader'
10+
import { ProductCardTitle } from '@/components/product/ProductCardTitle'
1111
import type { Locale } from '@/i18n/config'
1212
import { Link } from '@/i18n/navigation'
1313
import { desktopsData } from '@/lib/generated'
@@ -85,17 +85,13 @@ export default function DesktopsPageClient({ locale }: Props) {
8585
<Link
8686
key={desktop.id}
8787
href={`/desktops/${desktop.id}`}
88-
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group flex flex-col"
88+
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 flex flex-col"
8989
>
90-
<div className="flex justify-between items-start mb-[var(--spacing-sm)]">
91-
<div className="flex items-center gap-[var(--spacing-xs)]">
92-
<h3 className="text-lg font-semibold tracking-tight">{desktop.name}</h3>
93-
{desktop.verified && <VerifiedBadge size="sm" />}
94-
</div>
95-
<span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
96-
→
97-
</span>
98-
</div>
90+
<ProductCardTitle
91+
name={desktop.name}
92+
verified={desktop.verified}
93+
deprecated={desktop.deprecated}
94+
/>
9995
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] mb-[var(--spacing-md)] font-light min-h-[4rem]">
10096
{desktop.description}
10197
</p>

‎src/app/[locale]/extensions/page.client.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
import { useTranslations } from 'next-intl'
44
import { useMemo, useState } from 'react'
55
import FilterSortBar from '@/components/controls/FilterSortBar'
6-
import { VerifiedBadge } from '@/components/controls/VerifiedBadge'
76
import Footer from '@/components/Footer'
87
import Header from '@/components/Header'
98
import StackTabs from '@/components/navigation/StackTabs'
109
import PageHeader from '@/components/PageHeader'
10+
import { ProductCardTitle } from '@/components/product/ProductCardTitle'
1111
import type { Locale } from '@/i18n/config'
1212
import { Link } from '@/i18n/navigation'
1313
import { extensionsData } from '@/lib/generated'
@@ -141,17 +141,13 @@ export default function ExtensionsPageClient({ locale }: Props) {
141141
<Link
142142
key={extension.name}
143143
href={`/extensions/${extension.id}`}
144-
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group flex flex-col"
144+
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 flex flex-col"
145145
>
146-
<div className="flex justify-between items-start mb-[var(--spacing-sm)]">
147-
<div className="flex items-center gap-[var(--spacing-xs)]">
148-
<h3 className="text-lg font-semibold tracking-tight">{extension.name}</h3>
149-
{extension.verified && <VerifiedBadge size="sm" />}
150-
</div>
151-
<span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
152-
→
153-
</span>
154-
</div>
146+
<ProductCardTitle
147+
name={extension.name}
148+
verified={extension.verified}
149+
deprecated={extension.deprecated}
150+
/>
155151
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] mb-[var(--spacing-md)] font-light min-h-[4rem]">
156152
{extension.description}
157153
</p>

‎src/app/[locale]/ides/page.client.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
import { useTranslations } from 'next-intl'
44
import { useMemo, useState } from 'react'
55
import FilterSortBar from '@/components/controls/FilterSortBar'
6-
import { VerifiedBadge } from '@/components/controls/VerifiedBadge'
76
import Footer from '@/components/Footer'
87
import Header from '@/components/Header'
98
import StackTabs from '@/components/navigation/StackTabs'
109
import PageHeader from '@/components/PageHeader'
10+
import { ProductCardTitle } from '@/components/product/ProductCardTitle'
1111
import type { Locale } from '@/i18n/config'
1212
import { Link } from '@/i18n/navigation'
1313
import { idesData } from '@/lib/generated'
@@ -136,17 +136,13 @@ export default function IDEsPageClient({ locale }: Props) {
136136
<Link
137137
key={ide.name}
138138
href={`/ides/${ide.id}`}
139-
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group flex flex-col"
139+
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 flex flex-col"
140140
>
141-
<div className="flex justify-between items-start mb-[var(--spacing-sm)]">
142-
<div className="flex items-center gap-[var(--spacing-xs)]">
143-
<h3 className="text-lg font-semibold tracking-tight">{ide.name}</h3>
144-
{ide.verified && <VerifiedBadge size="sm" />}
145-
</div>
146-
<span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
147-
→
148-
</span>
149-
</div>
141+
<ProductCardTitle
142+
name={ide.name}
143+
verified={ide.verified}
144+
deprecated={ide.deprecated}
145+
/>
150146
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] mb-[var(--spacing-md)] font-light min-h-[4rem]">
151147
{ide.description}
152148
</p>

‎src/app/[locale]/model-providers/page.client.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -94,16 +94,13 @@ export default function ModelProvidersPageClient({ locale }: Props) {
9494
<Link
9595
key={provider.name}
9696
href={`/model-providers/${provider.id}`}
97-
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
97+
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5"
9898
>
99-
<div className="flex justify-between items-start mb-[var(--spacing-sm)]">
99+
<div className="flex items-start mb-[var(--spacing-sm)]">
100100
<div className="flex items-center gap-[var(--spacing-xs)]">
101101
<h3 className="text-lg font-semibold tracking-tight">{provider.name}</h3>
102102
{provider.verified && <VerifiedBadge size="sm" />}
103103
</div>
104-
<span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
105-
→
106-
</span>
107104
</div>
108105
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] font-light min-h-[4rem]">
109106
{provider.description}
@@ -122,16 +119,13 @@ export default function ModelProvidersPageClient({ locale }: Props) {
122119
<Link
123120
key={provider.name}
124121
href={`/model-providers/${provider.id}`}
125-
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
122+
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5"
126123
>
127-
<div className="flex justify-between items-start mb-[var(--spacing-sm)]">
124+
<div className="flex items-start mb-[var(--spacing-sm)]">
128125
<div className="flex items-center gap-[var(--spacing-xs)]">
129126
<h3 className="text-lg font-semibold tracking-tight">{provider.name}</h3>
130127
{provider.verified && <VerifiedBadge size="sm" />}
131128
</div>
132-
<span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
133-
→
134-
</span>
135129
</div>
136130
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] font-light min-h-[4rem]">
137131
{provider.description}

‎src/components/product/ProductCardTitle.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { DeprecatedBadge } from '@/components/controls/DeprecatedBadge'
2+
import { VerifiedBadge } from '@/components/controls/VerifiedBadge'
3+
4+
type ProductCardTitleProps = {
5+
name: string
6+
verified?: boolean
7+
deprecated?: boolean
8+
}
9+
10+
export function ProductCardTitle({ name, verified, deprecated }: ProductCardTitleProps) {
11+
return (
12+
<div className="mb-[var(--spacing-sm)] flex flex-wrap items-center gap-x-[var(--spacing-xs)] gap-y-[var(--spacing-xs)]">
13+
<div className="inline-flex shrink-0 items-center gap-[var(--spacing-xs)] whitespace-nowrap">
14+
<h3 className="whitespace-nowrap text-lg font-semibold tracking-tight">{name}</h3>
15+
{verified && <VerifiedBadge size="sm" />}
16+
</div>
17+
{deprecated && <DeprecatedBadge className="ml-auto" />}
18+
</div>
19+
)
20+
}

0 commit comments

Comments
 (0)