Skip to content

Commit 14473ec

Browse files
tannerlinsleytannerlinsley
committed
reusable components
1 parent f3d6194 commit 14473ec

14 files changed

Lines changed: 125 additions & 438 deletions

‎src/components/LibraryHero.tsx‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,50 @@
11
import * as React from 'react'
22
import { twMerge } from 'tailwind-merge'
33
import { Link } from '@tanstack/react-router'
4+
import type { Library } from '~/libraries'
45

56
type LibraryHeroProps = {
6-
libraryName: string // e.g., "Query"
7-
gradientFrom: string
8-
gradientTo: string
9-
subtitle: React.ReactNode
10-
description?: React.ReactNode
7+
project: Library
118
cta?: {
129
linkProps: React.ComponentProps<typeof Link>
1310
label: string
1411
className?: string
1512
}
16-
statusBadge?: string
13+
actions?: React.ReactNode
1714
}
1815

19-
export function LibraryHero({
20-
libraryName,
21-
gradientFrom,
22-
gradientTo,
23-
subtitle,
24-
description,
25-
cta,
26-
statusBadge,
27-
}: LibraryHeroProps) {
28-
const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${gradientFrom} ${gradientTo}`
16+
export function LibraryHero({ project, cta, actions }: LibraryHeroProps) {
17+
const resolvedName = project.name.replace('TanStack ', '')
18+
const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${project.colorFrom} ${project.colorTo}`
2919

3020
return (
3121
<div className="flex flex-col items-center gap-8 text-center px-4">
32-
<h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
22+
<h1 className="font-black flex gap-x-3 gap-y-0 items-center text-5xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em] flex-wrap justify-center leading-none">
3323
<span>TanStack</span>
34-
<span className={twMerge(gradientText)}>{libraryName}</span>
24+
<span className={twMerge(gradientText)}>{resolvedName}</span>
3525
</h1>
36-
{statusBadge ? (
26+
{project.badge ? (
3727
<div
3828
className={twMerge(
3929
'text-sm md:text-base font-black lg:text-lg align-super text-white animate-bounce uppercase',
4030
'dark:text-black bg-black dark:bg-white shadow-xl shadow-black/30 px-2 py-1 rounded-md',
4131
'leading-none whitespace-nowrap'
4232
)}
4333
>
44-
STATUS: {statusBadge}
34+
STATUS: {String(project.badge).toUpperCase()}
4535
</div>
4636
) : null}
47-
<h2 className="font-bold text-2xl max-w-md md:text-3xl lg:text-5xl lg:max-w-2xl">
48-
{subtitle}
37+
<h2 className="font-bold text-2xl max-w-md md:max-w-lg md:text-4xl lg:max-w-4xl text-balance">
38+
{project.tagline}
4939
</h2>
50-
{description ? (
40+
{project.description ? (
5141
<p className="text opacity-90 max-w-sm lg:text-xl lg:max-w-2xl">
52-
{description}
42+
{project.description}
5343
</p>
5444
) : null}
55-
{cta ? (
45+
{actions ? (
46+
<div>{actions}</div>
47+
) : cta ? (
5648
<Link
5749
{...cta.linkProps}
5850
className={twMerge(

‎src/libraries/config.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const configProject = {
1414
cardStyles: `shadow-xl shadow-slate-700/20 dark:shadow-lg dark:shadow-slate-500/30 text-slate-500 border-2 border-transparent hover:border-current`,
1515
to: '/config',
1616
tagline: `Configuration and tools for publishing and maintaining high-quality JavaScript packages`,
17-
description: `The build and publish utilities used by all of our projects. Use it if you dare!`,
17+
description: `Opinionated tooling to lint, build, test, version, and publish JS/TS packages — minimal config, consistent results.`,
1818
ogImage: 'https://github.com/tanstack/config/raw/main/media/repo-header.png',
1919
badge: undefined,
2020
bgStyle: 'bg-slate-500',

‎src/routes/_libraries/config.$version.index.tsx‎

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import { FaCheckCircle } from 'react-icons/fa'
2-
import { Carbon } from '~/components/Carbon'
32
import { Footer } from '~/components/Footer'
4-
import { TbHeartHandshake } from 'react-icons/tb'
53
import { SponsorsSection } from '~/components/SponsorsSection'
4+
import { LibraryHero } from '~/components/LibraryHero'
65
import { BottomCTA } from '~/components/BottomCTA'
76
import { configProject } from '~/libraries/config'
87
import { getLibrary } from '~/libraries'
98
import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
10-
import { Await, Link, getRouteApi } from '@tanstack/react-router'
9+
import { getRouteApi } from '@tanstack/react-router'
1110
import { seo } from '~/utils/seo'
12-
import { twMerge } from 'tailwind-merge'
1311
import LandingPageGad from '~/components/LandingPageGad'
1412
import { PartnershipCallout } from '~/components/PartnershipCallout'
1513

@@ -27,38 +25,22 @@ const librariesRouteApi = getRouteApi('/_libraries')
2725

2826
export default function FormVersionIndex() {
2927
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
30-
const { version } = Route.useParams()
3128
const library = getLibrary('config')
3229

33-
const gradientText = `pr-1 inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${configProject.colorFrom} ${configProject.colorTo}`
34-
3530
return (
3631
<>
3732
<div className="flex flex-col gap-20 md:gap-32 pt-32">
38-
<div className="flex flex-col items-center gap-8 text-center px-4">
39-
<h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
40-
<span>TanStack</span>
41-
<span className={twMerge(gradientText)}>Config</span>
42-
</h1>
43-
<h2
44-
className="font-bold text-2xl max-w-[600px]
45-
md:text-3xl
46-
lg:text-5xl lg:max-w-[800px]"
47-
>
48-
<span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
49-
Configuration and tools
50-
</span>{' '}
51-
for publishing and maintaining high-quality JavaScript packages
52-
</h2>
53-
<Link
54-
from="/$libraryId/$version"
55-
to="./docs"
56-
params={{ libraryId: library.id }}
57-
className={`py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
58-
>
59-
Get Started
60-
</Link>
61-
</div>
33+
<LibraryHero
34+
project={configProject}
35+
actions={
36+
<a
37+
href={`/config/latest/docs`}
38+
className="inline-block py-2 px-4 rounded uppercase font-extrabold transition-colors bg-gray-500 text-white"
39+
>
40+
Get Started
41+
</a>
42+
}
43+
/>
6244

6345
<LibraryFeatureHighlights
6446
featureHighlights={library.featureHighlights}
@@ -108,8 +90,7 @@ export default function FormVersionIndex() {
10890

10991
<BottomCTA
11092
linkProps={{
111-
from: '/$libraryId/$version',
112-
to: './docs',
93+
to: '/$libraryId/$version/docs',
11394
params: { libraryId: library.id },
11495
}}
11596
label="Get Started!"

‎src/routes/_libraries/db.$version.index.tsx‎

Lines changed: 14 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1-
import * as React from 'react'
2-
import { Link, getRouteApi } from '@tanstack/react-router'
1+
import { getRouteApi } from '@tanstack/react-router'
32
import { Footer } from '~/components/Footer'
4-
import { FaCheckCircle } from 'react-icons/fa'
53
import { SponsorsSection } from '~/components/SponsorsSection'
64
import { PartnersSection } from '~/components/PartnersSection'
75
import { BottomCTA } from '~/components/BottomCTA'
86
import { dbProject } from '~/libraries/db'
9-
import { Await } from '@tanstack/react-router'
107
import { seo } from '~/utils/seo'
11-
import { twMerge } from 'tailwind-merge'
8+
import { LibraryHero } from '~/components/LibraryHero'
129
import { getLibrary } from '~/libraries'
1310
import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
14-
import { partners } from '~/utils/partners'
1511
import LandingPageGad from '~/components/LandingPageGad'
1612
import { PartnershipCallout } from '~/components/PartnershipCallout'
1713

@@ -30,47 +26,22 @@ const library = getLibrary('db')
3026

3127
export default function DBVersionIndex() {
3228
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
33-
const { version } = Route.useParams()
34-
35-
const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${dbProject.colorFrom} ${dbProject.colorTo}`
3629

3730
return (
3831
<>
3932
<div className="flex flex-col gap-20 md:gap-32 max-w-full pt-32">
40-
<div className="flex flex-col items-center gap-6 text-center px-4">
41-
<h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
42-
<span>TanStack</span>
43-
<span className={twMerge(gradientText)}>DB</span>
44-
</h1>
45-
<h2
46-
className="font-bold text-2xl max-w-md
47-
md:text-3xl
48-
lg:text-5xl lg:max-w-2xl"
49-
>
50-
A{' '}
51-
<span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
52-
reactive client store
53-
</span>{' '}
54-
for building{' '}
55-
<span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
56-
super-fast
57-
</span>{' '}
58-
apps
59-
</h2>
60-
<p className="text opacity-90 max-w-[500px] lg:text-xl lg:max-w-[800px]">
61-
TanStack DB extends TanStack Query with collections, live queries
62-
and optimistic mutations that keep your app reactive, consistent
63-
and&nbsp;blazing fast 🔥
64-
</p>
65-
<Link
66-
from={'/$libraryId/$version'}
67-
params={{ libraryId: library.id }}
68-
to={'./docs'}
69-
className={`py-2 px-4 bg-orange-500 rounded text-white uppercase font-extrabold`}
70-
>
71-
Get Started
72-
</Link>
73-
</div>
33+
<LibraryHero
34+
project={dbProject}
35+
cta={{
36+
linkProps: {
37+
from: '/$libraryId/$version',
38+
to: './docs',
39+
params: { libraryId: library.id },
40+
},
41+
label: 'Get Started',
42+
className: 'bg-orange-500 text-white',
43+
}}
44+
/>
7445
<LibraryFeatureHighlights
7546
featureHighlights={library.featureHighlights}
7647
/>

‎src/routes/_libraries/devtools.$version.index.tsx‎

Lines changed: 14 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import { FaCheckCircle } from 'react-icons/fa'
2-
import { Carbon } from '~/components/Carbon'
32
import { Footer } from '~/components/Footer'
4-
import { TbHeartHandshake } from 'react-icons/tb'
53
import { SponsorsSection } from '~/components/SponsorsSection'
64
import { BottomCTA } from '~/components/BottomCTA'
5+
import { LibraryHero } from '~/components/LibraryHero'
76
import { devtoolsProject } from '~/libraries/devtools'
87
import { getLibrary } from '~/libraries'
98
import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
10-
import { Await, Link, getRouteApi } from '@tanstack/react-router'
9+
import { getRouteApi } from '@tanstack/react-router'
1110
import { seo } from '~/utils/seo'
12-
import { twMerge } from 'tailwind-merge'
1311
import LandingPageGad from '~/components/LandingPageGad'
1412
import { PartnershipCallout } from '~/components/PartnershipCallout'
1513

@@ -27,58 +25,23 @@ const librariesRouteApi = getRouteApi('/_libraries')
2725

2826
export default function DevtoolsVersionIndex() {
2927
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
30-
const { version } = Route.useParams()
3128
const library = getLibrary('devtools')
3229

33-
const gradientText = `pr-1 inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${devtoolsProject.colorFrom} ${devtoolsProject.colorTo}`
34-
3530
return (
3631
<>
3732
<div className="flex flex-col gap-20 md:gap-32 pt-32">
38-
<div className="flex flex-col items-center gap-8 text-center px-4">
39-
<h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
40-
<span>TanStack</span>
41-
<span className={twMerge(gradientText)}>Devtools</span>
42-
</h1>
43-
<div
44-
className={twMerge(
45-
'text-sm',
46-
'md:text-base font-black',
47-
'lg:text-lg align-super text-white animate-bounce uppercase',
48-
'dark:text-black bg-black dark:bg-white shadow-xl shadow-black/30 px-2 py-1 rounded-md',
49-
'leading-none whitespace-nowrap'
50-
)}
51-
>
52-
STATUS: ALPHA
53-
</div>
54-
<h2
55-
className="font-bold text-2xl max-w-[600px]
56-
md:text-3xl
57-
lg:text-5xl lg:max-w-[800px]"
58-
>
59-
<span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
60-
Centralized devtools panel
61-
</span>{' '}
62-
for TanStack libraries and custom devtools
63-
</h2>
64-
<p
65-
className="text opacity-90 max-w-[500px]
66-
lg:text-xl lg:max-w-[800px]"
67-
>
68-
A unified devtools panel that houses all TanStack devtools and
69-
allows you to create and integrate your own custom devtools. Built
70-
with <strong>Solid.js for lightweight performance</strong> but
71-
designed to work with any framework.
72-
</p>
73-
<Link
74-
from="/$libraryId/$version"
75-
to="./docs"
76-
params={{ libraryId: library.id }}
77-
className={`py-2 px-4 bg-slate-500 hover:bg-slate-600 text-white rounded uppercase font-extrabold transition-colors`}
78-
>
79-
Get Started
80-
</Link>
81-
</div>
33+
<LibraryHero
34+
project={devtoolsProject}
35+
cta={{
36+
linkProps: {
37+
from: '/$libraryId/$version',
38+
to: './docs',
39+
params: { libraryId: library.id },
40+
},
41+
label: 'Get Started',
42+
className: 'bg-slate-500 hover:bg-slate-600 text-white',
43+
}}
44+
/>
8245

8346
<LibraryFeatureHighlights
8447
featureHighlights={library.featureHighlights}

‎src/routes/_libraries/form.$version.index.tsx‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -40,30 +40,7 @@ export default function FormVersionIndex() {
4040
<>
4141
<div className="flex flex-col gap-20 md:gap-32 max-w-full pt-32">
4242
<LibraryHero
43-
libraryName="Form"
44-
gradientFrom={formProject.colorFrom}
45-
gradientTo={formProject.colorTo}
46-
subtitle={
47-
<>
48-
<span className="underline decoration-dashed decoration-yellow-500 decoration-3 underline-offset-2">
49-
Headless, performant, and type-safe
50-
</span>{' '}
51-
form state management for TS/JS, React, Vue, Angular, Solid, Lit
52-
and Svelte
53-
</>
54-
}
55-
description={
56-
<>
57-
Stop crying over your forms with a return to simplicity,
58-
composability and type-safety with TanStack Form. Sporting a{' '}
59-
<strong>
60-
tiny footprint, zero dependencies, framework agnostic core and
61-
granular type-safe APIs
62-
</strong>
63-
, TanStack Form is the perfect combination of simplicity and power
64-
you need to build forms fast with peace of mind.
65-
</>
66-
}
43+
project={formProject}
6744
cta={{
6845
linkProps: {
6946
from: '/$libraryId/$version',

0 commit comments

Comments
 (0)