import React from "react";
import { HeaderText, BodyText } from "../InfoStyles";

export const ExampleInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        Explanation of when/how the component is used. (Generally found in Figma
        Design Library)
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>
        Dos and Do-nots regarding usage of the component (Generally outlined in
        Figma Design Library)
      </BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>prop1:</u>
        </b>{" "}
        An [optional/required] <i>[prop type]</i> that [prop description]
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>prop2:</u>
        </b>{" "}
        An [optional/required] <i>[prop type]</i> that [prop description]
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>prop3:</u>
        </b>{" "}
        An [optional/required] <i>[prop type]</i> that [prop description]
      </BodyText>
      <HeaderText>Other</HeaderText>
      <BodyText>
        - include any other relevant details listed in the figma/on Ant (if
        using a component from Ant design)
      </BodyText>
      <BodyText>
        - include examples of props that might not be obvious to other
        developers
      </BodyText>
      <BodyText>
        - include examples of various states of the component itself (if
        relevant/reasonable/it fits){" "}
      </BodyText>
    </>
  );
};
