web-extension-starter/source/Popup/components/TabInfo/TabInfo.tsx

import * as React from "react";
import type { FC } from "react";
import { Card } from "../../../components/Card/Card";
import { Button } from "../../../components/Button/Button";
import styles from "./TabInfo.module.scss";

interface TabInfoProps {
  title: string;
  url: string;
  favIconUrl?: string;
  onReload: () => void;
}

export const TabInfo: FC<TabInfoProps> = ({
  title,
  url,
  favIconUrl,
  onReload,
}) => {
  const getInitial = (text: string): string => {
    return text.charAt(0).toUpperCase();
  };

  return (
    <Card title="Current Tab">
      <div className={styles.content}>
        {favIconUrl ? (
          <img src={favIconUrl} alt="" className={styles.favicon} />
        ) : (
          <div className={styles.faviconPlaceholder}>{getInitial(title)}</div>
        )}
        <div className={styles.details}>
          <p className={styles.title}>{title}</p>
          <p className={styles.url}>{url}</p>
        </div>
      </div>
      <Button variant="secondary" fullWidth onClick={onReload}>
        Reload Tab
      </Button>
    </Card>
  );
};