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

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 01:26:30 +01:00
parent 4a2d7d15a5
commit c3b308e960
102 changed files with 2532 additions and 4744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
apps/website/ui/Box.tsx
View File

@@ -2,33 +2,74 @@ import React, { forwardRef, ForwardedRef, ElementType, ComponentPropsWithoutRef
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
interface BoxProps<T extends ElementType> {
interface ResponsiveSpacing {
base?: Spacing;
md?: Spacing;
lg?: Spacing;
}
export interface BoxProps<T extends ElementType> {
as?: T;
children?: React.ReactNode;
className?: string;
center?: boolean;
fullWidth?: boolean;
fullHeight?: boolean;
m?: Spacing;
mt?: Spacing;
mb?: Spacing;
ml?: Spacing;
mr?: Spacing;
mx?: Spacing | 'auto';
my?: Spacing;
p?: Spacing;
pt?: Spacing;
pb?: Spacing;
pl?: Spacing;
pr?: Spacing;
px?: Spacing;
py?: Spacing;
m?: Spacing | ResponsiveSpacing;
mt?: Spacing | ResponsiveSpacing;
mb?: Spacing | ResponsiveSpacing;
ml?: Spacing | ResponsiveSpacing;
mr?: Spacing | ResponsiveSpacing;
mx?: Spacing | 'auto' | ResponsiveSpacing;
my?: Spacing | ResponsiveSpacing;
p?: Spacing | ResponsiveSpacing;
pt?: Spacing | ResponsiveSpacing;
pb?: Spacing | ResponsiveSpacing;
pl?: Spacing | ResponsiveSpacing;
pr?: Spacing | ResponsiveSpacing;
px?: Spacing | ResponsiveSpacing;
py?: Spacing | ResponsiveSpacing;
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
flexDirection?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
flexShrink?: number;
flexGrow?: number;
gridCols?: number | string;
responsiveGridCols?: {
base?: number | string;
md?: number | string;
lg?: number | string;
};
gap?: Spacing;
position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
top?: Spacing | string;
bottom?: Spacing | string;
left?: Spacing | string;
right?: Spacing | string;
overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
maxWidth?: string;
zIndex?: number;
w?: string | ResponsiveValue<string>;
h?: string | ResponsiveValue<string>;
width?: string;
height?: string;
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
border?: boolean;
borderColor?: string;
bg?: string;
shadow?: string;
hoverBorderColor?: string;
transition?: boolean;
}
type ResponsiveValue<T> = {
base?: T;
md?: T;
lg?: T;
};
export const Box = forwardRef(<T extends ElementType = 'div'>(
{
as,
@@ -41,8 +82,27 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
p, pt, pb, pl, pr, px, py,
display,
position,
top,
bottom,
left,
right,
overflow,
maxWidth,
zIndex,
gridCols,
responsiveGridCols,
gap,
w,
h,
rounded,
border,
borderColor,
bg,
shadow,
flexShrink,
flexGrow,
hoverBorderColor,
transition,
...props
}: BoxProps<T> & ComponentPropsWithoutRef<T>,
ref: ForwardedRef<HTMLElement>
@@ -57,31 +117,83 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
'auto': 'auto'
};
const getSpacingClass = (prefix: string, value: Spacing | 'auto' | ResponsiveSpacing | undefined) => {
if (value === undefined) return '';
if (typeof value === 'object') {
const classes = [];
if (value.base !== undefined) classes.push(`${prefix}-${spacingMap[value.base]}`);
if (value.md !== undefined) classes.push(`md:${prefix}-${spacingMap[value.md]}`);
if (value.lg !== undefined) classes.push(`lg:${prefix}-${spacingMap[value.lg]}`);
return classes.join(' ');
}
return `${prefix}-${spacingMap[value]}`;
};
const getResponsiveClasses = (prefix: string, value: string | ResponsiveValue<string> | undefined) => {
if (value === undefined) return '';
if (typeof value === 'object') {
const classes = [];
if (value.base !== undefined) classes.push(`${prefix}-${value.base}`);
if (value.md !== undefined) classes.push(`md:${prefix}-${value.md}`);
if (value.lg !== undefined) classes.push(`lg:${prefix}-${value.lg}`);
return classes.join(' ');
}
return `${prefix}-${value}`;
};
const classes = [
center ? 'flex items-center justify-center' : '',
fullWidth ? 'w-full' : '',
fullHeight ? 'h-full' : '',
m !== undefined ? `m-${spacingMap[m]}` : '',
mt !== undefined ? `mt-${spacingMap[mt]}` : '',
mb !== undefined ? `mb-${spacingMap[mb]}` : '',
ml !== undefined ? `ml-${spacingMap[ml]}` : '',
mr !== undefined ? `mr-${spacingMap[mr]}` : '',
mx !== undefined ? `mx-${spacingMap[mx]}` : '',
my !== undefined ? `my-${spacingMap[my]}` : '',
p !== undefined ? `p-${spacingMap[p]}` : '',
pt !== undefined ? `pt-${spacingMap[pt]}` : '',
pb !== undefined ? `pb-${spacingMap[pb]}` : '',
pl !== undefined ? `pl-${spacingMap[pl]}` : '',
pr !== undefined ? `pr-${spacingMap[pr]}` : '',
px !== undefined ? `px-${spacingMap[px]}` : '',
py !== undefined ? `py-${spacingMap[py]}` : '',
getSpacingClass('m', m),
getSpacingClass('mt', mt),
getSpacingClass('mb', mb),
getSpacingClass('ml', ml),
getSpacingClass('mr', mr),
getSpacingClass('mx', mx),
getSpacingClass('my', my),
getSpacingClass('p', p),
getSpacingClass('pt', pt),
getSpacingClass('pb', pb),
getSpacingClass('pl', pl),
getSpacingClass('pr', pr),
getSpacingClass('px', px),
getSpacingClass('py', py),
getResponsiveClasses('w', w),
getResponsiveClasses('h', h),
rounded ? `rounded-${rounded}` : '',
border ? 'border' : '',
borderColor ? borderColor : '',
bg ? bg : '',
shadow ? shadow : '',
flexShrink !== undefined ? `flex-shrink-${flexShrink}` : '',
flexGrow !== undefined ? `flex-grow-${flexGrow}` : '',
hoverBorderColor ? `hover:${hoverBorderColor}` : '',
transition ? 'transition-all' : '',
display ? display : '',
gridCols ? `grid-cols-${gridCols}` : '',
responsiveGridCols?.base ? `grid-cols-${responsiveGridCols.base}` : '',
responsiveGridCols?.md ? `md:grid-cols-${responsiveGridCols.md}` : '',
responsiveGridCols?.lg ? `lg:grid-cols-${responsiveGridCols.lg}` : '',
gap !== undefined ? `gap-${spacingMap[gap]}` : '',
position ? position : '',
top !== undefined && spacingMap[top as any] ? `top-${spacingMap[top as any]}` : '',
bottom !== undefined && spacingMap[bottom as any] ? `bottom-${spacingMap[bottom as any]}` : '',
left !== undefined && spacingMap[left as any] ? `left-${spacingMap[left as any]}` : '',
right !== undefined && spacingMap[right as any] ? `right-${spacingMap[right as any]}` : '',
overflow ? `overflow-${overflow}` : '',
zIndex !== undefined ? `z-${zIndex}` : '',
className
].filter(Boolean).join(' ');
const style = maxWidth ? { maxWidth, ...((props as Record<string, unknown>).style as object || {}) } : (props as Record<string, unknown>).style;
const style: React.CSSProperties = {
...(maxWidth ? { maxWidth } : {}),
...(top !== undefined && !spacingMap[top as any] ? { top } : {}),
...(bottom !== undefined && !spacingMap[bottom as any] ? { bottom } : {}),
...(left !== undefined && !spacingMap[left as any] ? { left } : {}),
...(right !== undefined && !spacingMap[right as any] ? { right } : {}),
...((props as Record<string, unknown>).style as object || {})
};
return (
<Tag ref={ref as React.ForwardedRef<HTMLElement>} className={classes} {...props} style={style as React.CSSProperties}>

20
apps/website/ui/Button.tsx
View File

@@ -5,7 +5,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
children: ReactNode;
onClick?: MouseEventHandler<HTMLButtonElement>;
className?: string;
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-performance' | 'race-final';
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-performance' | 'race-final' | 'discord';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
type?: 'button' | 'submit' | 'reset';
@@ -13,9 +13,11 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
fullWidth?: boolean;
as?: 'button' | 'a';
href?: string;
target?: string;
rel?: string;
}
export function Button({
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
children,
onClick,
className = '',
@@ -27,8 +29,10 @@ export function Button({
fullWidth = false,
as = 'button',
href,
target,
rel,
...props
}: ButtonProps) {
}, ref) => {
const baseClasses = 'inline-flex items-center rounded-lg transition-all duration-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 hover:scale-[1.02] active:scale-95';
const variantClasses = {
@@ -37,7 +41,8 @@ export function Button({
danger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600',
ghost: 'bg-transparent text-gray-400 hover:bg-gray-800 focus-visible:outline-gray-400',
'race-performance': 'bg-gradient-to-r from-yellow-400 to-orange-500 text-white shadow-[0_0_15px_rgba(251,191,36,0.4)] hover:from-yellow-500 hover:to-orange-600 focus-visible:outline-yellow-400',
'race-final': 'bg-gradient-to-r from-purple-400 to-pink-500 text-white shadow-[0_0_15px_rgba(168,85,247,0.4)] hover:from-purple-500 hover:to-pink-600 focus-visible:outline-purple-400'
'race-final': 'bg-gradient-to-r from-purple-400 to-pink-500 text-white shadow-[0_0_15px_rgba(168,85,247,0.4)] hover:from-purple-500 hover:to-pink-600 focus-visible:outline-purple-400',
discord: 'bg-[#5865F2] text-white hover:bg-[#4752C4] shadow-[0_0_20px_rgba(88,101,242,0.3)] hover:shadow-[0_0_30px_rgba(88,101,242,0.6)] focus-visible:outline-[#5865F2]'
};
const sizeClasses = {
@@ -69,6 +74,8 @@ export function Button({
return (
<a
href={href}
target={target}
rel={rel}
className={classes}
{...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
>
@@ -79,6 +86,7 @@ export function Button({
return (
<button
ref={ref}
type={type}
className={classes}
onClick={onClick}
@@ -88,4 +96,6 @@ export function Button({
{content}
</button>
);
}
});
Button.displayName = 'Button';

21
apps/website/ui/Card.tsx
View File

@@ -1,19 +1,20 @@
import React, { ReactNode, MouseEventHandler, HTMLAttributes } from 'react';
import { Box, BoxProps } from './Box';
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
interface CardProps extends HTMLAttributes<HTMLDivElement> {
interface CardProps extends Omit<BoxProps<'div'>, 'children' | 'className'> {
children: ReactNode;
className?: string;
onClick?: MouseEventHandler<HTMLDivElement>;
variant?: 'default' | 'highlight';
p?: Spacing;
px?: Spacing;
py?: Spacing;
pt?: Spacing;
pb?: Spacing;
pl?: Spacing;
pr?: Spacing;
p?: Spacing | any;
px?: Spacing | any;
py?: Spacing | any;
pt?: Spacing | any;
pb?: Spacing | any;
pl?: Spacing | any;
pr?: Spacing | any;
}
export function Card({
@@ -53,8 +54,8 @@ export function Card({
].filter(Boolean).join(' ');
return (
<div className={classes} onClick={onClick} {...props}>
<Box className={classes} onClick={onClick as any} {...props}>
{children}
</div>
</Box>
);
}

4
apps/website/ui/DashboardLayoutWrapper.tsx
View File

@@ -1,4 +1,6 @@
import React, { ReactNode } from 'react';
import { ReactNode } from 'react';
// TODO very useless component
interface DashboardLayoutWrapperProps {
children: ReactNode;

21
apps/website/ui/Input.tsx
View File

@@ -5,16 +5,31 @@ import { Box } from './Box';
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
variant?: 'default' | 'error';
errorMessage?: string;
icon?: React.ReactNode;
}
export const Input = forwardRef<HTMLInputElement, InputProps>(
({ className = '', variant = 'default', errorMessage, ...props }, ref) => {
({ className = '', variant = 'default', errorMessage, icon, ...props }, ref) => {
const baseClasses = 'px-3 py-2 border rounded-lg text-white bg-deep-graphite focus:outline-none focus:border-primary-blue transition-colors w-full';
const variantClasses = (variant === 'error' || errorMessage) ? 'border-racing-red' : 'border-charcoal-outline';
const classes = `${baseClasses} ${variantClasses} ${className}`;
const iconClasses = icon ? 'pl-10' : '';
const classes = `${baseClasses} ${variantClasses} ${iconClasses} ${className}`;
return (
<Box fullWidth>
<Box fullWidth position="relative">
{icon && (
<Box
position="absolute"
left="3"
top="50%"
style={{ transform: 'translateY(-50%)' }}
zIndex={10}
display="flex"
center
>
{icon}
</Box>
)}
<input ref={ref} className={classes} {...props} />
{errorMessage && (
<Text size="xs" color="text-error-red" block mt={1}>

27
apps/website/ui/LeagueCover.tsx
View File

@@ -1,27 +0,0 @@
/**
* LeagueCover
*
* Pure UI component for displaying league cover images.
* Renders an image with fallback on error.
*/
export interface LeagueCoverProps {
leagueId: string;
alt: string;
className?: string;
}
export function LeagueCover({ leagueId, alt, className = '' }: LeagueCoverProps) {
return (
// eslint-disable-next-line @next/next/no-img-element
<img
src={`/media/leagues/${leagueId}/cover`}
alt={alt}
className={`w-full h-48 object-cover ${className}`}
onError={(e) => {
// Fallback to default cover
(e.target as HTMLImageElement).src = '/default-league-cover.png';
}}
/>
);
}

30
apps/website/ui/LeagueLogo.tsx
View File

@@ -1,30 +0,0 @@
/**
* LeagueLogo
*
* Pure UI component for displaying league logos.
* Renders an optimized image with fallback on error.
*/
import Image from 'next/image';
export interface LeagueLogoProps {
leagueId: string;
alt: string;
className?: string;
}
export function LeagueLogo({ leagueId, alt, className = '' }: LeagueLogoProps) {
return (
<Image
src={`/media/leagues/${leagueId}/logo`}
alt={alt}
width={100}
height={100}
className={`object-contain ${className}`}
onError={(e) => {
// Fallback to default logo
(e.target as HTMLImageElement).src = '/default-league-logo.png';
}}
/>
);
}

29
apps/website/ui/Stack.tsx
View File

@@ -1,9 +1,9 @@
import React, { ReactNode, HTMLAttributes } from 'react';
import { Box } from './Box';
import { Box, BoxProps } from './Box';
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
interface StackProps extends HTMLAttributes<HTMLElement> {
interface StackProps extends Omit<BoxProps<'div'>, 'children' | 'className' | 'gap'> {
children: ReactNode;
className?: string;
direction?: 'row' | 'col';
@@ -12,19 +12,20 @@ interface StackProps extends HTMLAttributes<HTMLElement> {
justify?: 'start' | 'center' | 'end' | 'between' | 'around';
wrap?: boolean;
center?: boolean;
m?: Spacing;
mt?: Spacing;
mb?: Spacing;
ml?: Spacing;
mr?: Spacing;
p?: Spacing;
pt?: Spacing;
pb?: Spacing;
pl?: Spacing;
pr?: Spacing;
px?: Spacing;
py?: Spacing;
m?: Spacing | any;
mt?: Spacing | any;
mb?: Spacing | any;
ml?: Spacing | any;
mr?: Spacing | any;
p?: Spacing | any;
pt?: Spacing | any;
pb?: Spacing | any;
pl?: Spacing | any;
pr?: Spacing | any;
px?: Spacing | any;
py?: Spacing | any;
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
style?: React.CSSProperties;
}
export function Stack({

35
apps/website/ui/Surface.tsx
View File

@@ -1,17 +1,20 @@
import React, { ReactNode, HTMLAttributes } from 'react';
import { Box } from './Box';
import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
import { Box, BoxProps } from './Box';
interface SurfaceProps extends HTMLAttributes<HTMLElement> {
interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children' | 'className' | 'display'> {
as?: T;
children: ReactNode;
variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple';
variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord' | 'discord-inner';
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
border?: boolean;
padding?: number;
className?: string;
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'discord' | string;
}
export function Surface({
export function Surface<T extends ElementType = 'div'>({
as,
children,
variant = 'default',
rounded = 'lg',
@@ -19,19 +22,32 @@ export function Surface({
padding = 0,
className = '',
display,
shadow = 'none',
...props
}: SurfaceProps) {
const variantClasses = {
}: SurfaceProps<T> & ComponentPropsWithoutRef<T>) {
const variantClasses: Record<string, string> = {
default: 'bg-iron-gray',
muted: 'bg-iron-gray/50',
dark: 'bg-deep-graphite',
glass: 'bg-deep-graphite/60 backdrop-blur-md',
'gradient-blue': 'bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite',
'gradient-gold': 'bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite',
'gradient-purple': 'bg-gradient-to-br from-purple-600/20 via-iron-gray/80 to-deep-graphite'
'gradient-purple': 'bg-gradient-to-br from-purple-600/20 via-iron-gray/80 to-deep-graphite',
'gradient-green': 'bg-gradient-to-br from-green-600/20 via-iron-gray/80 to-deep-graphite',
'discord': 'bg-gradient-to-b from-deep-graphite to-iron-gray',
'discord-inner': 'bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray'
};
const roundedClasses = {
const shadowClasses: Record<string, string> = {
none: '',
sm: 'shadow-sm',
md: 'shadow-md',
lg: 'shadow-lg',
xl: 'shadow-xl',
discord: 'shadow-[0_0_80px_rgba(88,101,242,0.15)]'
};
const roundedClasses: Record<string, string> = {
none: 'rounded-none',
sm: 'rounded-sm',
md: 'rounded-md',
@@ -58,6 +74,7 @@ export function Surface({
roundedClasses[rounded],
border ? 'border border-charcoal-outline' : '',
paddingClasses[padding] || 'p-0',
shadowClasses[shadow],
display ? display : '',
className
].filter(Boolean).join(' ');

30
apps/website/ui/TeamLogo.tsx
View File

@@ -1,30 +0,0 @@
/**
* TeamLogo
*
* Pure UI component for displaying team logos.
* Renders an optimized image with fallback on error.
*/
import Image from 'next/image';
export interface TeamLogoProps {
teamId: string;
alt: string;
className?: string;
}
export function TeamLogo({ teamId, alt, className = '' }: TeamLogoProps) {
return (
<Image
src={`/media/teams/${teamId}/logo`}
alt={alt}
width={100}
height={100}
className={`object-contain ${className}`}
onError={(e) => {
// Fallback to default logo
(e.target as HTMLImageElement).src = '/default-team-logo.png';
}}
/>
);
}

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

@@ -1,25 +1,29 @@
import React, { ReactNode, HTMLAttributes } from 'react';
import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
import { Box, BoxProps } from './Box';
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
interface TextProps extends HTMLAttributes<HTMLSpanElement> {
interface TextProps<T extends ElementType = 'span'> extends Omit<BoxProps<T>, 'children' | 'className'> {
as?: T;
children: ReactNode;
className?: string;
size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
weight?: 'normal' | 'medium' | 'semibold' | 'bold';
weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
color?: string;
font?: 'mono' | 'sans';
align?: 'left' | 'center' | 'right';
truncate?: boolean;
leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
style?: React.CSSProperties;
block?: boolean;
ml?: Spacing;
mr?: Spacing;
mt?: Spacing;
mb?: Spacing;
ml?: Spacing | any;
mr?: Spacing | any;
mt?: Spacing | any;
mb?: Spacing | any;
}
export function Text({
export function Text<T extends ElementType = 'span'>({
as,
children,
className = '',
size = 'base',
@@ -28,12 +32,15 @@ export function Text({
font = 'sans',
align = 'left',
truncate = false,
leading,
style,
block = false,
ml, mr, mt, mb,
...props
}: TextProps) {
const sizeClasses = {
}: TextProps<T> & ComponentPropsWithoutRef<T>) {
const Tag = (as as ElementType) || 'span';
const sizeClasses: Record<string, string> = {
xs: 'text-xs',
sm: 'text-sm',
base: 'text-base',
@@ -44,7 +51,8 @@ export function Text({
'4xl': 'text-4xl'
};
const weightClasses = {
const weightClasses: Record<string, string> = {
light: 'font-light',
normal: 'font-normal',
medium: 'font-medium',
semibold: 'font-semibold',
@@ -69,12 +77,22 @@ export function Text({
48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
};
const leadingClasses: Record<string, string> = {
none: 'leading-none',
tight: 'leading-tight',
snug: 'leading-snug',
normal: 'leading-normal',
relaxed: 'leading-relaxed',
loose: 'leading-loose'
};
const classes = [
block ? 'block' : 'inline',
sizeClasses[size],
weightClasses[weight],
fontClasses[font],
alignClasses[align],
leading ? leadingClasses[leading] : '',
color,
truncate ? 'truncate' : '',
ml !== undefined ? `ml-${spacingMap[ml]}` : '',
@@ -84,5 +102,5 @@ export function Text({
className
].filter(Boolean).join(' ');
return <span className={classes} style={style} {...props}>{children}</span>;
return <Tag className={classes} style={style} {...props}>{children}</Tag>;
}

30
apps/website/ui/TrackImage.tsx
View File

@@ -1,30 +0,0 @@
/**
* TrackImage
*
* Pure UI component for displaying track images.
* Renders an optimized image with fallback on error.
*/
import Image from 'next/image';
export interface TrackImageProps {
trackId: string;
alt: string;
className?: string;
}
export function TrackImage({ trackId, alt, className = '' }: TrackImageProps) {
return (
<Image
src={`/media/tracks/${trackId}/image`}
alt={alt}
width={800}
height={256}
className={`w-full h-64 object-cover ${className}`}
onError={(e) => {
// Fallback to default track image
(e.target as HTMLImageElement).src = '/default-track-image.png';
}}
/>
);
}

21
apps/website/ui/icons/DiscordIcon.tsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
interface DiscordIconProps {
className?: string;
size?: number | string;
color?: string;
}
export function DiscordIcon({ className = '', size = 24, color }: DiscordIconProps) {
return (
<svg
className={`${className} ${color || ''}`}
width={size}
height={size}
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
</svg>
);
}