virtual.tsx

import { Book, PersonStanding, Wallpaper, Zap } from 'lucide-react'
import { twMerge } from 'tailwind-merge'
import { GithubIcon } from '~/components/icons/GithubIcon'
import { CogsIcon } from '~/components/icons/CogsIcon'

const repo = 'tanstack/virtual'

const textStyles = 'text-violet-700 dark:text-violet-400'

export const virtualProject = {
  id: 'virtual',
  name: 'TanStack Virtual',
  cardStyles: `shadow-xl shadow-purple-700/20 dark:shadow-lg dark:shadow-purple-500/30 text-purple-500 border-2 border-transparent hover:border-current`,
  to: '/virtual',
  tagline: `Headless UI for Virtualizing Large Element Lists`,
  description: `Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular while retaining 100% control over markup and styles.`,
  ogImage: 'https://github.com/tanstack/query/raw/main/media/header.png',
  badge: undefined,
  bgStyle: 'bg-purple-500',
  textStyle: 'text-purple-500',
  repo,
  latestBranch: 'main',
  latestVersion: 'v3',
  availableVersions: ['v3'],
  bgRadial: 'from-purple-500 via-violet-600/50 to-transparent',
  colorFrom: 'from-purple-500',
  colorTo: 'to-violet-600',
  textColor: 'text-purple-600',
  frameworks: ['react', 'solid', 'vue', 'svelte', 'lit', 'angular'],
  defaultDocs: 'introduction',
  scarfId: '32372eb1-91e0-48e7-8df1-4808a7be6b94',
  legacyPackages: ['react-virtual'],
  menu: [
    {
      icon: <Book />,
      label: 'Docs',
      to: '/virtual/latest/docs/introduction',
    },
    {
      icon: <Wallpaper />,
      label: 'Examples',
      to: '/virtual/latest/docs/framework/react/examples/dynamic',
    },
    {
      icon: <GithubIcon />,
      label: 'GitHub',
      to: `https://github.com/${repo}`,
    },
  ],
  testimonials: [
    {
      quote:
        'We chose TanStack Virtual for our virtualization needs - it handles our massive lists without breaking a sweat.',
      author: 'Evan Bacon',
      role: '@Baconbrix',
      company: 'Expo',
    },
    {
      quote:
        'TanStack Virtual is the answer when you need to render thousands of rows without destroying performance. Headless, flexible, and just works.',
      author: 'Developer Review',
      role: 'Community',
      company: '',
    },
    {
      quote:
        'For anyone dealing with large datasets in React, TanStack Virtual is a must. The row virtualizer alone saved our app.',
      author: 'Community Developer',
      role: 'GitHub Discussion',
      company: '',
    },
  ],
  featureHighlights: [
    {
      title: 'Designed for zero design',
      icon: (
        <div className="text-center overflow-hidden">
          <PersonStanding className="text-purple-400" />
        </div>
      ),
      description: (
        <div>
          Headless Virtualization means you're always in control of your{' '}
          <span className={twMerge('font-semibold', textStyles)}>
            markup, styles and components
          </span>
          . Go design and implement the most beautiful UI you can dream up and
          let us take care of the hard parts.
        </div>
      ),
    },
    {
      title: 'Big Power, Small Package',
      icon: <Zap className="text-purple-500" />,
      description: (
        <div>
          Don't be fooled by the small bundle size. TanStack Virtual uses every
          byte to deliver powerful performance. After all,{' '}
          <span className={twMerge('font-semibold', textStyles)}>
            60FPS is table stakes
          </span>{' '}
          these days and we refuse to sacrifice anything for that 🧈-y smooth
          UX.
        </div>
      ),
    },
    {
      title: 'Maximum Composability',
      icon: <CogsIcon className="text-purple-600" />,
      description: (
        <div>
          With a single function/hook, you'll get limitless virtualization for{' '}
          <span className={twMerge('font-semibold', textStyles)}>
            vertical, horizontal, and grid-style{' '}
          </span>
          layouts. The API is tiny (literally 1 function), but its composability
          is not.
        </div>
      ),
    },
  ],
}