Heading

The HeadingComponent is a flexible and reusable component designed to display a heading in your Next.js application. It allows you to specify the heading level (e.g., h1, h2, etc.) and customize the heading text. The component can be dynamically shown or hidden based on the remove prop.

Usage

Props

• text: A string that represents the text to be displayed inside the heading.
• level: A number representing the heading level (1 to 6). This determines whether the heading is rendered as an h1, h2, etc.
• remove: A boolean that determines whether the heading should be rendered or not. If true, the heading will not be displayed.

Component Code

src/components/availableComponents/HeadingComponent.js

const HeadingComponent = ({ text, level, remove }) => {
  const Tag = `h${level}`;
  return remove ? null : <Tag className="heading">{text}</Tag>;
};

export default HeadingComponent;`` 

Component Explanation

• Dynamic Heading Level:

  • The level prop determines the heading level by dynamically setting the HTML tag (h1, h2, etc.). The component uses template literals to create the appropriate tag based on the level prop.

• Visibility Control:

  • The heading's visibility is controlled by the remove prop. If remove is true, the component returns null, and the heading is not rendered.

• Styling:

  • The heading is styled using a CSS class named heading. You can define this class in your CSS to apply custom styles to all headings generated by this component.

Customization

You can easily customize the HeadingComponent by:

• Changing the text and level props to render different headings.

• Modifying the heading CSS class to apply custom styles open ./src/app/globals.css.

  src/app/globals.css

  .heading {
      @apply font-semibold;
  }
  h1 {
      @apply text-5xl;
  }
  h2 {
      @apply text-4xl;
  }
  h3 {
      @apply text-3xl;
  }
  h4 {
      @apply text-2xl;
  }
  h5 {
      @apply text-xl;
  }
  h6 {
      @apply text-lg;
  }

• Conditionally rendering the component based on the remove prop to control its visibility dynamically.