ballistic-builder/app/components/Info/ContactUs/index.tsx

import React, { Component } from 'react'
import TypoGraphy from '@mui/material/Typography';
import PropTypes from 'prop-types' //ES6
import styles from './styles.module.css';
import constants from '@/app/lib/constants'

import { useQuery, useMutation, gql } from "@apollo/client";

export default function ContactUs(props) {

    const GET_SITE_CONTENT = gql`
        query Get_Site_Content {
          site_contents(where: {content_id: {_eq: "CONTACTUS"}}, order_by: {content: asc}) {
            id
            content_id
            content
          }
         }
       `;

    const { loading, error, data } = useQuery(GET_SITE_CONTENT);
    if (loading) return "Loading ...";
    if (error) return `Error! ${error.message}`;

    return (
        <div>
            <TypoGraphy paragraph='true' variant="body" color="inherit" >
                {data.site_contents.map((site_content: { content: any; }) => (
                    <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
                ))}
            </TypoGraphy>
        </div>
    )

}

ContactUs.propTypes = {

};