ourworld_web/www_ourworld_new
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace paragraph tags with H1 and P components in Hero and set default fonts for text components

Browse Source
This commit is contained in:
sasha-astiadi
2025-12-05 14:12:41 +01:00
parent 7764d08f8b
commit 4f442c893d
4 changed files with 71 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/UI/Texts.tsx
View File

@@ -6,6 +6,8 @@ import { cn } from '@/lib/utils'
const fontVariants = {
sans: 'font-sans',
neuton: 'font-neuton',
quicking: 'font-quicking',
sourceLight: 'font-source-sans-light',
} as const
const colorVariants = {
@@ -72,25 +74,33 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
}
// Exports based on your tailwind.css and the example
// Headings default to Quicking font
export const H1 = createTextComponent(
'h1',
'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
'text-6xl lg:text-7xl font-medium leading-tight tracking-tight',
{ font: 'quicking' }
)
export const H2 = createTextComponent(
'h2',
'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
'text-5xl lg:text-6xl font-medium leading-tight tracking-tight',
{ font: 'quicking' }
)
export const H3 = createTextComponent(
'h3',
'text-4xl lg:text-5xl font-medium leading-tight tracking-tight'
'text-4xl lg:text-5xl font-medium leading-tight tracking-tight',
{ font: 'quicking' }
)
export const H4 = createTextComponent(
'h4',
'text-4xl lg:text-5xl font-medium leading-snug tracking-tight'
'text-4xl lg:text-5xl font-medium leading-snug tracking-tight',
{ font: 'quicking' }
)
// Paragraph-style text defaults to Avenir (font-sans)
export const P = createTextComponent(
'p',
'text-base lg:text-xl leading-relaxed'
'text-base lg:text-xl leading-relaxed',
{ font: 'sans' }
)
export const Small = createTextComponent(
'small',
@@ -98,7 +108,8 @@ export const Small = createTextComponent(
)
export const Subtle = createTextComponent(
'p',
'text-sm leading-normal tracking-normal text-gray-500'
'text-sm leading-normal tracking-normal text-gray-500',
{ font: 'sans' }
)
export const H5 = createTextComponent(
'h5',
@@ -120,7 +131,8 @@ export const CardTitle = createTextComponent(
)
export const CardDescription = createTextComponent(
'p',
'text-sm/6 leading-normal tracking-normal'
'text-sm/6 leading-normal tracking-normal',
{ font: 'sans' }
)
export const FeatureTitle = createTextComponent(
'h3',
@@ -128,7 +140,8 @@ export const FeatureTitle = createTextComponent(
)
export const FeatureDescription = createTextComponent(
'p',
'lg:text-base text-sm leading-normal tracking-normal'
'lg:text-base text-sm leading-normal tracking-normal',
{ font: 'sans' }
)
export const MobileFeatureTitle = createTextComponent(
'h3',
@@ -144,7 +157,8 @@ export const Question = createTextComponent(
)
export const Answer = createTextComponent(
'p',
'mt-4 text-sm leading-normal tracking-normal'
'mt-4 text-sm leading-normal tracking-normal',
{ font: 'sans' }
)
export const PageHeader = createTextComponent(
'h2',
@@ -156,8 +170,17 @@ export const DownloadCardTitle = createTextComponent(
)
export const DownloadCardDescription = createTextComponent(
'dd',
'text-base/7 leading-normal tracking-normal'
'text-base/7 leading-normal tracking-normal',
{ font: 'sans' }
)
export const CT = createTextComponent('span', 'text-base lg:text-lg leading-normal font-medium')
export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-normal font-light')
export const CT = createTextComponent(
'span',
'text-base lg:text-lg leading-normal font-medium',
{ font: 'quicking' }
)
export const CP = createTextComponent(
'p',
'text-sm lg:text-base tracking-wide leading-normal font-light',
{ font: 'sans' }
)