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

import * as React from "react";
import type { FC } from "react";
import { Button } from "../../../components/Button/Button";
import { SettingsIcon } from "../../../components/icons/SettingsIcon";
import { GitHubIcon } from "../../../components/icons/GitHubIcon";
import { HeartIcon } from "../../../components/icons/HeartIcon";
import styles from "./FooterActions.module.scss";

interface FooterActionsProps {
  onSettings: () => void;
  onGitHub: () => void;
  onSupport: () => void;
}

export const FooterActions: FC<FooterActionsProps> = ({
  onSettings,
  onGitHub,
  onSupport,
}) => {
  return (
    <div className={styles.footer}>
      <Button
        variant="settings"
        size="small"
        className={styles.button}
        onClick={onSettings}
      >
        <SettingsIcon />
        <span>Settings</span>
      </Button>
      <Button
        variant="github"
        size="small"
        className={styles.button}
        onClick={onGitHub}
      >
        <GitHubIcon />
        <span>GitHub</span>
      </Button>
      <Button
        variant="support"
        size="small"
        className={styles.button}
        onClick={onSupport}
      >
        <HeartIcon />
        <span>Support</span>
      </Button>
    </div>
  );
};