mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-20 15:12:28 +01:00
parent a972bb4195
commit 94aaaff704
25 changed files with 793 additions and 574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/website/ui/Text.tsx
View File

@@ -1,4 +1,5 @@
import React, { ElementType, ReactNode, forwardRef } from 'react';
import React, { ElementType, ReactNode, forwardRef, CSSProperties } from 'react';
import { ResponsiveValue } from './Box';
export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'base';
@@ -15,7 +16,7 @@ export interface TextProps {
block?: boolean;
truncate?: boolean;
className?: string;
style?: React.CSSProperties;
style?: CSSProperties;
mt?: number | any;
mb?: number | any;
ml?: number | any;
@@ -29,7 +30,7 @@ export interface TextProps {
flexGrow?: number;
flexShrink?: number;
lineClamp?: number;
display?: string;
display?: string | ResponsiveValue<string | any>;
opacity?: number;
maxWidth?: string | number;
mx?: string | number;
@@ -170,6 +171,20 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
loose: 'leading-loose',
};
const getResponsiveClasses = (prefix: string, value: any | ResponsiveValue<any> | undefined) => {
if (value === undefined) return '';
if (typeof value === 'object') {
const classes = [];
if (value.base !== undefined) classes.push(prefix ? `${prefix}-${value.base}` : String(value.base));
if (value.sm !== undefined) classes.push(prefix ? `sm:${prefix}-${value.sm}` : `sm:${value.sm}`);
if (value.md !== undefined) classes.push(prefix ? `md:${prefix}-${value.md}` : `md:${value.md}`);
if (value.lg !== undefined) classes.push(prefix ? `lg:${prefix}-${value.lg}` : `lg:${value.lg}`);
if (value.xl !== undefined) classes.push(prefix ? `xl:${prefix}-${value.xl}` : `xl:${value.xl}`);
return classes.join(' ');
}
return prefix ? `${prefix}-${value}` : String(value);
};
const classes = [
variantClasses[variant as keyof typeof variantClasses] || '',
getResponsiveSize(size),
@@ -180,6 +195,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
leadingClasses[leading as keyof typeof leadingClasses] || '',
block ? 'block' : 'inline',
truncate ? 'truncate' : '',
getResponsiveClasses('display', display),
transition ? 'transition-all duration-200' : '',
italic ? 'italic' : '',
animate === 'pulse' ? 'animate-pulse' : '',
@@ -189,7 +205,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
const combinedStyle: React.CSSProperties = {
...style,
...(display ? { display } : {}),
...(typeof display === 'string' ? { display } : {}),
...(alignItems ? { alignItems } : {}),
...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
...(cursor ? { cursor } : {}),
@@ -219,7 +235,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
...(transform ? { textTransform: transform as any } : {}),
};
const Tag = as;
const Tag = as || 'p';
return (
<Tag ref={ref} className={classes} style={combinedStyle} aria-label={ariaLabel} htmlFor={htmlFor}>