mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-30 18:46:00 +00:00
Maurice
741639edf0
The text-size control now adjusts each size class (Large / Medium / Normal / Small) independently as well as all-at-once. Inline px sizes are mapped to a class by their value, so the per-class sliders reach real content; each class variable = global factor x its per-class factor (no double-scaling with the root font-size that handles rem text). The settings UI gains a live preview that resizes as you drag, and the four size sliders sit behind a clear toggle.
21 lines
778 B
TypeScript
21 lines
778 B
TypeScript
// Source badge
|
|
interface SourceBadgeProps {
|
|
icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
|
|
label: string
|
|
}
|
|
|
|
export function SourceBadge({ icon: Icon, label }: SourceBadgeProps) {
|
|
return (
|
|
<span style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 4,
|
|
fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', color: '#4b5563',
|
|
background: 'var(--bg-tertiary)', border: '1px solid var(--border-primary)',
|
|
borderRadius: 6, padding: '2px 7px',
|
|
fontWeight: 500, maxWidth: '100%', overflow: 'hidden',
|
|
}}>
|
|
<Icon size={10} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
|
|
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
|
|
</span>
|
|
)
|
|
}
|