From adc2e4679a82171f97a79aa6021f1499032c3d25 Mon Sep 17 00:00:00 2001
From: Nicolas Schlecker <nicolasschlecker@gmail.com>
Date: Tue, 9 Nov 2021 10:07:45 +0100
Subject: [PATCH] feat(#13): add option to add a frame around routes with
 RouterRoutes

---
 src/components/RouterRoutes.tsx | 37 ++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/RouterRoutes.tsx b/src/components/RouterRoutes.tsx
index be51e3c..32b85d7 100644
--- a/src/components/RouterRoutes.tsx
+++ b/src/components/RouterRoutes.tsx
@@ -8,6 +8,7 @@ import { anyRouterToRouteList } from '../utils/routerUtils';
  */
 interface RouterRoutesProps {
   router: AnyRouterType;
+  frame: React.ReactElement<React.PropsWithChildren<any>>;
 }
 
 /**
@@ -16,19 +17,25 @@ interface RouterRoutesProps {
  * @param props - Props containing the router to use
  */
 export const RouterRoutes = (props: RouterRoutesProps) => {
-  return (
-    <Routes>
-      {anyRouterToRouteList(props.router).map((route, index) => {
-        const Element = route.render();
-        return (
-          <Route
-            key={index}
-            path={route.fullTemplate}
-            caseSensitive={route.caseSensitive}
-            element={Element}
-          />
-        );
-      })}
-    </Routes>
-  );
+  const routes = anyRouterToRouteList(props.router).map((route, index) => {
+    const Element = route.render();
+    return (
+      <Route
+        key={index}
+        path={route.fullTemplate}
+        caseSensitive={route.caseSensitive}
+        element={Element}
+      />
+    );
+  });
+
+  if (props.frame) {
+    const frame = React.cloneElement(props.frame, {
+      children: <>{routes}</>,
+    });
+
+    return <Routes>{frame}</Routes>;
+  }
+
+  return <Routes>{routes}</Routes>;
 };