diff --git a/src/components/common/CreatorCard.tsx b/src/components/common/CreatorCard.tsx index d475c64..275cbb1 100644 --- a/src/components/common/CreatorCard.tsx +++ b/src/components/common/CreatorCard.tsx @@ -26,6 +26,7 @@ import CreatorBio from '@/components/common/CreatorBio'; import { useTransactionTelemetry } from '@/hooks/useTransactionTelemetry'; import { useNetworkMismatch } from '@/hooks/useNetworkMismatch'; import { formatCompactNumber, formatNumber, formatFollowerCount } from '@/utils/numberFormat.utils'; +import { truncateCreatorName } from '@/utils/creatorName.utils'; interface CreatorCardProps { creator: Course; @@ -138,8 +139,8 @@ const CreatorCard: React.FC = ({ creator, className }) => {
-

- {creator.title} +

+ {truncateCreatorName(creator.title)}

= ({
-

- {name} +

+ {truncateCreatorName(name, 32)}

{isVerified &&
}
diff --git a/src/utils/creatorName.utils.test.ts b/src/utils/creatorName.utils.test.ts new file mode 100644 index 0000000..6e81f17 --- /dev/null +++ b/src/utils/creatorName.utils.test.ts @@ -0,0 +1,39 @@ +import { describe, expect, it } from 'vitest'; +import { truncateCreatorName } from '@/utils/creatorName.utils'; + +describe('truncateCreatorName', () => { + it('returns the name unchanged when within the default limit', () => { + expect(truncateCreatorName('Alex Rivers')).toBe('Alex Rivers'); + }); + + it('truncates names that exceed the default 24-character limit', () => { + const long = 'Maximilian Thunderstruck Jr'; + expect(long.length).toBeGreaterThan(24); + const result = truncateCreatorName(long); + expect(result.endsWith('…')).toBe(true); + expect(result.length).toBeLessThanOrEqual(25); // 24 chars + ellipsis + }); + + it('does not truncate a name exactly at the limit', () => { + const exact = 'A'.repeat(24); + expect(truncateCreatorName(exact)).toBe(exact); + }); + + it('respects a custom maxLength', () => { + const result = truncateCreatorName('Sarah Chen', 5); + expect(result).toBe('Sarah…'); + }); + + it('returns an empty string for empty input', () => { + expect(truncateCreatorName('')).toBe(''); + }); + + it('trims surrounding whitespace before truncating', () => { + expect(truncateCreatorName(' Alex ')).toBe('Alex'); + }); + + it('does not add ellipsis for short names', () => { + expect(truncateCreatorName('Jo')).toBe('Jo'); + expect(truncateCreatorName('Jo').includes('…')).toBe(false); + }); +}); diff --git a/src/utils/creatorName.utils.ts b/src/utils/creatorName.utils.ts new file mode 100644 index 0000000..f5bdcc1 --- /dev/null +++ b/src/utils/creatorName.utils.ts @@ -0,0 +1,14 @@ +/** + * Truncates a creator name to a maximum character length, appending an ellipsis + * when the name exceeds the limit. + * + * @param name - The creator name to truncate. + * @param maxLength - Maximum number of characters before truncation. Defaults to 24. + * @returns The original name if within limit, or a truncated version ending with `…`. + */ +export function truncateCreatorName(name: string, maxLength = 24): string { + if (!name) return ''; + const trimmed = name.trim(); + if (trimmed.length <= maxLength) return trimmed; + return `${trimmed.slice(0, maxLength).trimEnd()}…`; +}