tanstack.com/src/components/LibraryWordmark.tsx at main · TanStack/tanstack.com · GitHub

History

48 lines (45 loc) · 1.2 KB

Raw

import { twMerge } from 'tailwind-merge'

import type { LibrarySlim } from '~/libraries'

type LibraryWordmarkProps = {

className?: string

colorProduct?: boolean

includeTanStack?: boolean

library: Pick<LibrarySlim, 'colorFrom' | 'colorTo' | 'name'>

productClassName?: string

tanStackClassName?: string

}

export function LibraryWordmark({

className,

colorProduct = true,

includeTanStack = true,

library,

productClassName,

tanStackClassName,

}: LibraryWordmarkProps) {

const productName = library.name.replace(/^TanStack\s+/i, '')

return (

<span

className={twMerge(

'inline-flex flex-wrap items-baseline gap-x-[0.22em] gap-y-1 font-black uppercase leading-none [letter-spacing:-.05em]',

className,

)}

{includeTanStack ? (

TanStack

</span>

) : null}

<span

className={twMerge(

'inline-block pr-1',

colorProduct

? `bg-linear-to-r bg-clip-text text-transparent ${library.colorFrom} ${library.colorTo}`

: '',

productClassName,

)}

{productName}

</span>

)

}

tanstack.com/src/components/LibraryWordmark.tsx at main · TanStack/tanstack.com · GitHub

Uh oh!

Uh oh!

tanstack.com/src/components/LibraryWordmark.tsx at main · TanStack/tanstack.com · GitHub

Uh oh!

Uh oh!

Expand file tree

Breadcrumbs

LibraryWordmark.tsx

Latest commit

History

Breadcrumbs

LibraryWordmark.tsx

File metadata and controls