Social row signature

import * as React from "react";
import { domain, Initials, resolve, sans, T, type SignatureProps } from "./_person";

export default function SignatureSocial(props: SignatureProps) {
  const { person: p, brand: b } = resolve(props);
  return (
    <T style={{ fontFamily: sans }}>
      <tr>
        <td style={{ width: 52, paddingRight: 14, verticalAlign: "top" }}>
          <Initials name={p.name} size={48} bg={b.primary} radius={12} />
        </td>
        <td style={{ verticalAlign: "top" }}>
          <div style={{ fontSize: 15, lineHeight: "21px", fontWeight: 600, color: "#111418" }}>{p.name}</div>
          <div style={{ fontSize: 13, lineHeight: "19px", color: "#5B616B" }}>
            {p.role} · {b.name}
          </div>
          <T style={{ marginTop: 8 }}>
            <tr>
              {b.social.slice(0, 3).map((s) => (
                <td key={s.label} style={{ paddingRight: 6, paddingTop: 8 }}>
                  <a href={s.url} style={{ display: "inline-block", padding: "3px 9px", border: "1px solid #E4E6EA", borderRadius: 999, fontSize: 11, lineHeight: "16px", fontWeight: 600, color: "#30343B", textDecoration: "none" }}>
                    {s.label}