Dark card signature

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

export default function SignatureDarkCard(props: SignatureProps) {
  const { person: p, brand: b } = resolve(props);
  const mono = "'SF Mono', Menlo, Consolas, monospace";
  return (
    <T style={{ fontFamily: sans, backgroundColor: "#101114", borderRadius: 10, border: "1px solid #24272D" }}>
      <tr>
        <td style={{ padding: "16px 18px", backgroundColor: "#101114", borderRadius: 10 }}>
          <T>
            <tr>
              <td style={{ width: 40, paddingRight: 14, verticalAlign: "top" }}>
                <img src={b.iconUrl} width={36} height={36} alt={b.name} style={{ display: "block", border: 0, borderRadius: 8 }} />
              </td>
              <td style={{ verticalAlign: "top" }}>
                <div style={{ fontSize: 14, lineHeight: "20px", fontWeight: 600, color: "#FFFFFF" }}>{p.name}</div>
                <div style={{ fontSize: 11, lineHeight: "18px", color: "#7F858F", fontFamily: mono, letterSpacing: "0.04em" }}>
                  {p.role.toUpperCase()} @ {b.name.toUpperCase()}
                </div>
                <div style={{ paddingTop: 8, fontSize: 12, lineHeight: "18px", color: "#C9CDD4" }}>
                  <a href={`mailto:${p.email}`} style={{ color: "#C9CDD4", textDecoration: "none" }}>{p.email}</a>