feat: allow setting qeta page title and subtitle

closes #23

Author: drodil

docs/setup.md

@@ -62,10 +62,12 @@ import { QetaPage } from '@drodil/backstage-plugin-qeta';
 const AppRoutes = () => (
   <FlatRoutes>
     // ...
-    <Route path="/qeta" element={<QetaPage />} />
+    <Route path="/qeta" element={<QetaPage title="Questions" />} />
     // ...
   </FlatRoutes>
 );
 ```
 
 An interface for Q&A is now available at `/qeta`.
+
+QetaPage also takes optional properties if you want to change the page title/subtitle/elements shown in the header.

plugins/qeta/dev/index.tsx

@@ -32,7 +32,12 @@ const qetaDevPlugin = createPlugin({
 createDevApp()
   .registerPlugin(qetaDevPlugin)
   .addPage({
-    element: <QetaPage />,
+    element: (
+      <QetaPage
+        title="Questions and answers"
+        subtitle="We have answers to everything!"
+      />
+    ),
     title: 'Root Page',
     path: '/qeta',
   })

plugins/qeta/src/components/HomePage/HomePage.tsx

@@ -58,9 +58,17 @@ export const HomePageContent = () => {
   );
 };
 
-export const HomePage = () => (
+type Props = {
+  title?: string;
+  subtitle?: string;
+  headerElements?: JSX.Element[];
+};
+
+export const HomePage = (props: Props) => (
   <Page themeId="tool">
-    <Header title="Q&A" style={{ paddingTop: '1rem', paddingBottom: '1rem' }} />
+    <Header title={props.title ?? 'Q&A'} subtitle={props.subtitle}>
+      {props.headerElements}
+    </Header>
     <Routes>
       <Route path="/" element={<HomePageContent />} />
       <Route path="/ask" element={<AskPage />} />