chore: use semantically correct tags for docs

Author: satya164

docs/index.js

@@ -36,7 +36,6 @@ items.forEach(it => {
     import React from 'react';
     import Page from '../templates/Page';
     import ComponentDocs from '../templates/ComponentDocs';
-
     export default function ${it.name}Doc(props) {
       return (
         <Page {...props} pages={${JSON.stringify(index)}}>

docs/templates/ComponentDocs.js

@@ -36,12 +36,12 @@ const propLabel = css({
 export default function ComponentDocs(props: any) {
   return (
     <div {...wrapper}>
-      <div {...mono} {...name}>{`<${props.name} />`}</div>
-      <div {...body}>{props.info.description}</div>
-      <div {...mono} {...propsHeader}>Props</div>
+      <h1 {...mono} {...name}>{`<${props.name} />`}</h1>
+      <p {...body}>{props.info.description}</p>
+      <h2 {...mono} {...propsHeader}>Props</h2>
       {Object.keys(props.info.props).map(prop => (
         <div {...propInfo} key={prop}>
-          <div {...mono} {...propLabel}>{prop}: {props.info.props[prop].flowType.name}</div>
+          <code {...mono} {...propLabel}>{prop}: {props.info.props[prop].flowType.name}</code>
           <div {...body}>{props.info.props[prop].description}</div>
         </div>
       ))}

docs/templates/Home.js

@@ -31,8 +31,8 @@ export default function Home() {
   return (
     <div {...wrapper}>
       <div {...inner}>
-        <div {...mono} {...heading}>React Native Paper</div>
-        <div {...body} {...description}>Documentation</div>
+        <h1 {...mono} {...heading}>React Native Paper</h1>
+        <p {...body} {...description}>Documentation</p>
       </div>
     </div>
   );

docs/templates/Page.js

@@ -49,7 +49,7 @@ const active = css({
 export default function Body({ url, pages, children }: any) {
   return (
     <div {...wrapper}>
-      <div {...sidebar}>
+      <nav {...sidebar}>
         <Link href='/'>
           <a {...mono} {...link} {...(url.pathname === '/' ? active : null)}>
             Home
@@ -63,7 +63,7 @@ export default function Body({ url, pages, children }: any) {
             </a>
           </Link>
         )}
-      </div>
+      </nav>
       <div {...content}>
         {children}
       </div>