trickthefox/components/footer.js

import styles from '../styles/components/Footer.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/free-solid-svg-icons'

export default function Footer() {
    return (
        <div>
            <div className={styles.footer}>
                <div className="container">
                    <p>
                        <b>
                            Made with <FontAwesomeIcon icon={faHeart} style={{color: "#63C5DA"}} size="1x" id="clickMeow" onClick={() => updateMeowCount()} /> by <a href="https://dubbelnull.com" className="link" target="_blank">DubbelNull</a>
                        </b>
                        <br/>
                        NextJS // Vercel // Airtable
                    </p>
                </div>
            </div>
            <script src="js/meow.js"></script>
        </div>
    )
}

async function updateMeowCount() {
    const getMeow = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            "Authorization": "Bearer " + process.env.AIRTABLE,
        }
    });

    let meowCount = await getMeow.json();
    meowCount = parseInt(meowCount['records'][0]['fields']['count']);
    meowCount++;

    const updateMeow = {
        "records": [
            {
                "id": "recR9RbScmJUPGQem",
                "fields": {
                    "count": meowCount + ""
                }
            }
        ]
    };

    await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
        method: "PATCH",
        headers: {
            'Content-Type': 'application/json',
            "Authorization": "Bearer " + process.env.AIRTABLE,
            "accept": "application/json",
        },
        body: JSON.stringify(updateMeow)
    });
}