This is an automated email from the ASF dual-hosted git repository. leonardcs pushed a commit to branch feature/community-tab in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit 55163b6597f5a9bb245faf1e537943c41058c9bf Author: Leonard <[email protected]> AuthorDate: Tue Jun 27 13:39:48 2023 +0200 Add mailing list component --- .../buttons/MailingListButtons/index.tsx | 37 ++++++++++++++++++++++ .../buttons/MailingListButtons/style.module.css | 6 ++++ 2 files changed, 43 insertions(+) diff --git a/src/components/buttons/MailingListButtons/index.tsx b/src/components/buttons/MailingListButtons/index.tsx new file mode 100644 index 0000000..45d3a03 --- /dev/null +++ b/src/components/buttons/MailingListButtons/index.tsx @@ -0,0 +1,37 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'; + +import { Button } from '../Button'; +import styles from './style.module.css'; + +interface MailingListButtonsProps { + list: string; +} + +export const MailingListButtons: React.FC<MailingListButtonsProps> = ({ + list +}) => { + return ( + <div className={styles.container}> + <a + href={`mailto:${list}[email protected]?subject=(send%20this%20email%20to%20subscribe)`} + > + <Button size="sm">Subscribe</Button> + </a> + <a + href={`mailto:${list}[email protected]?subject=(send%20this%20email%20to%20unsubscribe)`} + > + <Button size="sm">Unsubscribe</Button> + </a> + <a + href={`https://lists.apache.org/list.html?${list}@baremaps.apache.org`} + target="_blank" + > + <Button size="sm"> + <span>Archive</span> + <FontAwesomeIcon icon={faArrowUpRightFromSquare}></FontAwesomeIcon> + </Button> + </a> + </div> + ); +}; diff --git a/src/components/buttons/MailingListButtons/style.module.css b/src/components/buttons/MailingListButtons/style.module.css new file mode 100644 index 0000000..040ca32 --- /dev/null +++ b/src/components/buttons/MailingListButtons/style.module.css @@ -0,0 +1,6 @@ +.container { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0; +}
