47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import clsx from 'clsx/lite';
|
|
import { ReactNode, useMemo } from 'react';
|
|
|
|
// Show long text at 'lg' breakpoint when 32 characters
|
|
const CHARACTER_CUTOFF_LG = 32;
|
|
// Show long text at 'md' breakpoint when 24 characters
|
|
const CHARACTER_CUTOFF_MD = 24;
|
|
// Otherwise show long text at 'sm' breakpoint
|
|
|
|
export default function ResponsiveText({
|
|
shortText,
|
|
className,
|
|
children,
|
|
}: {
|
|
shortText?: ReactNode
|
|
className?: string
|
|
children: ReactNode
|
|
}) {
|
|
const cutoffClasses = useMemo(() => {
|
|
const textLength = typeof children === 'string'
|
|
? children.length
|
|
: 0;
|
|
console.log(textLength);
|
|
return textLength >= CHARACTER_CUTOFF_LG
|
|
? { short: 'lg:hidden', long: 'max-lg:hidden' }
|
|
: textLength >= CHARACTER_CUTOFF_MD
|
|
? { short: 'md:hidden', long: 'max-md:hidden' }
|
|
: { short: 'sm:hidden', long: 'max-sm:hidden' };
|
|
}, [children]);
|
|
|
|
return (
|
|
<>
|
|
{/* Short text */}
|
|
<span
|
|
className={clsx(cutoffClasses.short, className)}
|
|
aria-hidden
|
|
>
|
|
{shortText ?? children}
|
|
</span>
|
|
{/* Full text */}
|
|
<span className={clsx(cutoffClasses.long, className)}>
|
|
{children}
|
|
</span>
|
|
</>
|
|
);
|
|
}
|