shoc-frontend-new/src/app/(protected)/completion-docs/_components/completion-template-created-by.tsx

import { Text } from "@/components/ui/text";

function initials(name: string): string {
  return name
    .trim()
    .split(/\s+/)
    .map((part) => part[0] ?? "")
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

export function CompletionTemplateCreatedBy({ name }: { name: string | null }) {
  if (name === null) {
    return (
      <Text variant="caption" tone="muted" sx={{ fontSize: 13 }}>
        —
      </Text>
    );
  }
  return (
    <span className="flex items-center gap-2">
      <span
        aria-hidden
        className="flex shrink-0 items-center justify-center rounded-full"
        style={{
          width: 22,
          height: 22,
          fontSize: 9,
          fontWeight: 600,
          background: "var(--color-bg-muted)",
          color: "var(--color-primary)",
        }}
      >
        {initials(name)}
      </span>
      <Text variant="caption" sx={{ fontSize: 13 }}>
        {name}
      </Text>
    </span>
  );
}