Function MessageAuthorArea

packages/ui/src/message/Message.tsx:19–46

(props: Pick<MessageProps, 'message'>)

import { MessageProps } from './props';

export const MessageAuthorArea = (props: Pick<MessageProps, 'message'>) => {
	const { message } = props;
	return (
		<div className="flex w-full min-w-0 gap-2">
			{/* TODO: sort out responsive styling */}
			<div className="flex w-full flex-row items-center gap-2 font-body text-lg text-black/[.7] dark:text-white/[.47]">
				<DiscordAvatar user={message.author} size={40} />
				<Link className="mr-1" href={`/u/${message.author.id}`}>
					<span className="text-black/[.7] hover:underline dark:text-white/[.47]">
						{message.author.name}
					</span>
				</Link>
				<div className="ml-auto mr-4 flex flex-row gap-2">
					<TrackLinkButton
						href={getDiscordURLForMessage(message)}
						eventName={'View On Discord Click'}
						eventData={messageWithDiscordAccountToAnalyticsData(message)}
						className="h-8 w-8 bg-transparent p-1 hover:bg-transparent dark:bg-transparent dark:hover:bg-transparent"
					>
						<DiscordIcon className="h-8 w-8" color="primary" />
						<span className="sr-only">View on Discord</span>
					</TrackLinkButton>
				</div>
				<span>{getSnowflakeUTCDate(message.id)}</span>
			</div>
		</div>
	);
};

const DEFAULT_COLLAPSE_CONTENT_LENGTH = 500;