---------------- App page ------------------------------------
import Heading, { SubHeading, SubHeading2 } from "./Heading"
// optional you can use import * as NameYouWant from "./root"
// when using the  when call the function use NameYouWant.NamOfFunction

------------------- Heading Page -------------------------
 function Heading() {
  return (
    <div>
      <h1>This is My Componente Heading</h1>
      <h2 style={customStyle}>{greeting}</h2>
    </div>
  );
}
  function SubHeading() {
  return (
    <ul>
      <li>This is the Subheading 1</li>
    </ul>
  );
}

function SubHeading2() {
  return (
    <ul>
      <li>This is the second Subheading 2</li>
    </ul>
  );
}

export default Heading;
export { SubHeading, SubHeading2 };