forked from sashaastiadi/www_mycelium_net
fix: update 404 page HTML with latest build assets
This commit is contained in:
68
src/components/Texts.tsx
Normal file
68
src/components/Texts.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const colorVariants = {
|
||||
primary: 'text-gray-900',
|
||||
secondary: 'text-gray-600',
|
||||
light: 'text-gray-50',
|
||||
} as const
|
||||
|
||||
type TextOwnProps = {
|
||||
color?: keyof typeof colorVariants
|
||||
className?: string
|
||||
}
|
||||
|
||||
// Polymorphic helpers
|
||||
type PolymorphicProps<E extends React.ElementType, P> = P & {
|
||||
as?: E
|
||||
} & Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
|
||||
|
||||
const createTextComponent = <DefaultElement extends React.ElementType>(
|
||||
defaultElement: DefaultElement,
|
||||
defaultClassName: string
|
||||
) => {
|
||||
type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
|
||||
E,
|
||||
TextOwnProps
|
||||
>
|
||||
|
||||
function Text<E extends React.ElementType = DefaultElement>({
|
||||
as,
|
||||
color = 'primary',
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: Props<E>) {
|
||||
const Tag = (as || defaultElement) as React.ElementType
|
||||
return (
|
||||
<Tag
|
||||
className={cn(defaultClassName, colorVariants[color], className)}
|
||||
{...(props as object)}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
)
|
||||
}
|
||||
|
||||
;(Text as any).displayName = `Text(${
|
||||
typeof defaultElement === 'string' ? defaultElement : 'Component'
|
||||
})`
|
||||
return Text
|
||||
}
|
||||
|
||||
// Exports based on your tailwind.css and the example
|
||||
export const H1 = createTextComponent(
|
||||
'h1',
|
||||
'text-5xl lg:text-8xl font-medium tracking-tight'
|
||||
)
|
||||
export const H2 = createTextComponent('h2', 'text-4xl lg:text-6xl font-medium')
|
||||
export const H3 = createTextComponent('h3', 'text-3xl lg:text-5xl font-medium')
|
||||
export const H4 = createTextComponent('h4', 'text-2xl lg:text-4xl font-semibold')
|
||||
export const P = createTextComponent(
|
||||
'p',
|
||||
'text-base lg:text-lg leading-relaxed'
|
||||
)
|
||||
export const Small = createTextComponent('small', 'text-sm font-medium')
|
||||
export const Subtle = createTextComponent('p', 'text-sm text-gray-500')
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
Reference in New Issue
Block a user