Skip to content

Commit fb19d25

Browse files
tannerlinsleytannerlinsley
committed
Add interactive landing page demos
1 parent 9b48bea commit fb19d25

17 files changed

Lines changed: 2282 additions & 356 deletions

‎src/components/landing/AiLanding.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import { GithubIcon } from '~/components/icons/GithubIcon'
2121
import { LazyLandingCommunitySection } from '~/components/LazyLandingCommunitySection'
2222
import { LazySponsorSection } from '~/components/LazySponsorSection'
2323
import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
24-
import { LibraryStatsSection } from '~/components/LibraryStatsSection'
2524
import { LibraryWordmark } from '~/components/LibraryWordmark'
2625
import LandingPageGad from '~/components/LandingPageGad'
2726
import { getLibrary } from '~/libraries'
@@ -347,10 +346,6 @@ export default function AiLanding({
347346
{landingCodeExampleRsc}
348347
</div>
349348
</div>
350-
351-
<div className="mx-auto w-full max-w-[80rem] px-4 pb-12 xl:max-w-[92rem]">
352-
<LibraryStatsSection library={library} />
353-
</div>
354349
</section>
355350

356351
<section className="border-b border-zinc-200 bg-[#fff1f7] py-12 dark:border-zinc-800 dark:bg-zinc-900">

‎src/components/landing/CliLanding.tsx‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { GithubIcon } from '~/components/icons/GithubIcon'
1919
import { LazyLandingCommunitySection } from '~/components/LazyLandingCommunitySection'
2020
import { LazySponsorSection } from '~/components/LazySponsorSection'
2121
import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
22-
import { LibraryStatsSection } from '~/components/LibraryStatsSection'
2322
import { LibraryWordmark } from '~/components/LibraryWordmark'
2423
import LandingPageGad from '~/components/LandingPageGad'
2524
import { getLibrary } from '~/libraries'
@@ -270,10 +269,6 @@ export default function CliLanding({
270269
{landingCodeExampleRsc}
271270
</div>
272271
</div>
273-
274-
<div className="mx-auto w-full max-w-[80rem] px-4 pb-12 xl:max-w-[92rem]">
275-
<LibraryStatsSection library={library} />
276-
</div>
277272
</section>
278273

279274
<section className="bg-white py-12 dark:bg-zinc-950">
@@ -322,6 +317,13 @@ export default function CliLanding({
322317
}
323318

324319
function CliWorkbenchPanel() {
320+
const [activeCommandIndex, setActiveCommandIndex] = React.useState(0)
321+
const activeCommand = commandRows[activeCommandIndex] ?? commandRows[0]
322+
const activeCommandPreview = `npx @tanstack/cli ${activeCommand[0].replace(
323+
' ',
324+
'-',
325+
)} "${activeCommand[1]}"`
326+
325327
return (
326328
<div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-indigo-200 bg-white p-4 shadow-sm shadow-indigo-950/5 dark:border-indigo-900 dark:bg-zinc-950">
327329
<div className="flex items-center justify-between gap-3">
@@ -339,23 +341,36 @@ function CliWorkbenchPanel() {
339341
<p className="font-mono leading-6">
340342
npx @tanstack/cli mcp
341343
<br />
342-
npx @tanstack/cli add auth database deploy
344+
{activeCommandPreview}
343345
<br />
344346
npx @tanstack/cli build-plan
345347
</p>
346348
</div>
347349

348350
<div className="mt-4 grid gap-3 md:grid-cols-2">
349-
{commandRows.map(([label, value]) => (
350-
<div
351+
{commandRows.map(([label, value], index) => (
352+
<button
351353
key={label}
352-
className="rounded-lg border border-zinc-200 bg-indigo-50 p-4 dark:border-zinc-800 dark:bg-indigo-950/20"
354+
aria-pressed={activeCommandIndex === index}
355+
className={
356+
activeCommandIndex === index
357+
? 'rounded-lg border border-indigo-500 bg-indigo-500 p-4 text-left text-white'
358+
: 'rounded-lg border border-zinc-200 bg-indigo-50 p-4 text-left transition-colors hover:border-indigo-300 dark:border-zinc-800 dark:bg-indigo-950/20 dark:hover:border-indigo-800'
359+
}
360+
type="button"
361+
onClick={() => setActiveCommandIndex(index)}
353362
>
354-
<p className="text-[0.65rem] font-black uppercase text-indigo-700 dark:text-indigo-300">
363+
<p
364+
className={
365+
activeCommandIndex === index
366+
? 'text-[0.65rem] font-black uppercase text-white/75'
367+
: 'text-[0.65rem] font-black uppercase text-indigo-700 dark:text-indigo-300'
368+
}
369+
>
355370
{label}
356371
</p>
357372
<p className="mt-2 text-sm font-bold leading-6">{value}</p>
358-
</div>
373+
</button>
359374
))}
360375
</div>
361376
</div>

‎src/components/landing/ConfigLanding.tsx‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { GithubIcon } from '~/components/icons/GithubIcon'
2020
import { LazyLandingCommunitySection } from '~/components/LazyLandingCommunitySection'
2121
import { LazySponsorSection } from '~/components/LazySponsorSection'
2222
import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
23-
import { LibraryStatsSection } from '~/components/LibraryStatsSection'
2423
import { LibraryWordmark } from '~/components/LibraryWordmark'
2524
import LandingPageGad from '~/components/LandingPageGad'
2625
import { getLibrary } from '~/libraries'
@@ -264,10 +263,6 @@ export default function ConfigLanding({
264263
{landingCodeExampleRsc}
265264
</div>
266265
</div>
267-
268-
<div className="mx-auto w-full max-w-[80rem] px-4 pb-12 xl:max-w-[92rem]">
269-
<LibraryStatsSection library={library} />
270-
</div>
271266
</section>
272267

273268
<section className="bg-white py-12 dark:bg-zinc-950">
@@ -317,6 +312,24 @@ export default function ConfigLanding({
317312
}
318313

319314
function ReleasePanel() {
315+
const [completedRows, setCompletedRows] = React.useState(
316+
() => new Set(releaseRows.map(([label]) => label)),
317+
)
318+
const completedCount = completedRows.size
319+
const toggleRow = (label: string) => {
320+
setCompletedRows((current) => {
321+
const next = new Set(current)
322+
323+
if (next.has(label)) {
324+
next.delete(label)
325+
} else {
326+
next.add(label)
327+
}
328+
329+
return next
330+
})
331+
}
332+
320333
return (
321334
<div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-zinc-300 bg-white p-4 shadow-sm shadow-zinc-950/5 dark:border-zinc-800 dark:bg-zinc-950">
322335
<div className="flex items-center justify-between gap-3">
@@ -336,23 +349,33 @@ function ReleasePanel() {
336349
<br />
337350
pnpm test
338351
<br />
339-
pnpm build
352+
pnpm build --verify {completedCount}/{releaseRows.length}
340353
<br />
341-
pnpm release
354+
pnpm release{' '}
355+
{completedCount === releaseRows.length ? '--ready' : '--blocked'}
342356
</p>
343357
</div>
344358

345359
<div className="mt-4 space-y-2">
346360
{releaseRows.map(([label, state]) => (
347-
<div
361+
<button
348362
key={label}
349-
className="flex items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900"
363+
aria-pressed={completedRows.has(label)}
364+
className="flex w-full items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-left transition-colors hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900"
365+
type="button"
366+
onClick={() => toggleRow(label)}
350367
>
351368
<span className="font-bold">{label}</span>
352-
<span className="rounded-md bg-emerald-100 px-2 py-1 text-[0.65rem] font-black uppercase text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">
353-
{state}
369+
<span
370+
className={
371+
completedRows.has(label)
372+
? 'rounded-md bg-emerald-100 px-2 py-1 text-[0.65rem] font-black uppercase text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200'
373+
: 'rounded-md bg-amber-100 px-2 py-1 text-[0.65rem] font-black uppercase text-amber-800 dark:bg-amber-950 dark:text-amber-200'
374+
}
375+
>
376+
{completedRows.has(label) ? state : 'pending'}
354377
</span>
355-
</div>
378+
</button>
356379
))}
357380
</div>
358381
</div>

0 commit comments

Comments
 (0)