chore: extend demo to include all variants via tabs

Author: saschb2b

src/App.tsx

@@ -1,8 +1,12 @@
 import * as React from 'react';
+import { Box, Tab, TabList, TabPanel, Tabs } from '@mui/joy';
 import {
   ChangelogContainer,
   ChangelogList,
   useChangelogs,
+  ChangelogListBase,
+  groupChangelogsByComponents,
+  GroupBy,
 } from '../dist/updatehive-react';
 
 export const App: React.FC = () => {
@@ -25,35 +29,61 @@ export const App: React.FC = () => {
   }
 
   return (
-    <div>
+    <Box>
       <h1>UpdateHive - React Client Component</h1>
-      <h3>Example using UpdateHive react hook</h3>
-      <div>
-        {loading || error || data === undefined ? (
-          <div>Loading changelogs ...</div>
-        ) : (
+      <h3>Examples using UpdateHive react components</h3>
+      <Tabs>
+        <TabList>
+          <Tab>Hook</Tab>
+          <Tab>Minimal</Tab>
+          <Tab>ChangelogList</Tab>
+          <Tab>Base</Tab>
+        </TabList>
+        <TabPanel value={0}>
+          <h3>Example using UpdateHive react hook</h3>
           <div>
-            <div className="hook table" key={'header'}>
-              <div className="hook div">Version</div>
-              <div className="hook div">Description</div>
-            </div>
-            {data.map((changelog, index) => (
-              <div className="hook table" key={`changelog-${index}`}>
-                <div className="hook div">{changelog.version}</div>
-                <div className="hook div">{changelog.description}</div>
+            {loading || error || data === undefined ? (
+              <div>Loading changelogs ...</div>
+            ) : (
+              <div>
+                <div className="hook table" key={'header'}>
+                  <div className="hook div">Version</div>
+                  <div className="hook div">Description</div>
+                </div>
+                {data.map((changelog, index) => (
+                  <div className="hook table" key={`changelog-${index}`}>
+                    <div className="hook div">{changelog.version}</div>
+                    <div className="hook div">{changelog.description}</div>
+                  </div>
+                ))}
               </div>
-            ))}
+            )}
           </div>
-        )}
-      </div>
-      <h3>Example using UpdateHive react components</h3>
-      <ChangelogContainer
-        API_KEY={API_KEY}
-        product={PRODUCT}
-        config={{ url: serviceURL }}
-      >
-        <ChangelogList />
-      </ChangelogContainer>
-    </div>
+        </TabPanel>
+        <TabPanel value={1}>
+          <ChangelogContainer
+            API_KEY={API_KEY}
+            product={PRODUCT}
+            config={{ url: serviceURL }}
+          >
+            <ChangelogList groupBy={GroupBy.NONE} hideEntryType />
+          </ChangelogContainer>
+        </TabPanel>
+        <TabPanel value={2}>
+          <ChangelogContainer
+            API_KEY={API_KEY}
+            product={PRODUCT}
+            config={{ url: serviceURL }}
+          >
+            <ChangelogList />
+          </ChangelogContainer>
+        </TabPanel>
+        <TabPanel value={3}>
+          <ChangelogListBase
+            changelogs={data && groupChangelogsByComponents(data)}
+          />
+        </TabPanel>
+      </Tabs>
+    </Box>
   );
 };