Decouple shlink-web-component from NotFound component

shlink-web-component/Main.tsx

@@ -1,15 +1,18 @@
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { useEffect } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
-import { NotFound } from '../src/common/NotFound';
 import { AsideMenu } from './common/AsideMenu';
 import { useFeature } from './utils/features';
 import { useSwipeable, useToggle } from './utils/helpers/hooks';
 import { useRoutesPrefix } from './utils/routesPrefix';
 
+type MainProps = {
+  createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
+};
+
 export const Main = (
   TagsList: FC,
   ShortUrlsList: FC,
@@ -22,7 +25,7 @@ export const Main = (
   Overview: FC,
   EditShortUrl: FC,
   ManageDomains: FC,
-): FC => () => {
+): FC<MainProps> => ({ createNotFound }) => {
   const location = useLocation();
   const routesPrefix = useRoutesPrefix();
   const [sidebarVisible, toggleSidebar, showSidebar, hideSidebar] = useToggle();
@@ -56,10 +59,7 @@ export const Main = (
                 <Route path="/non-orphan-visits/*" element={<NonOrphanVisits />} />
                 <Route path="/manage-tags" element={<TagsList />} />
                 <Route path="/manage-domains" element={<ManageDomains />} />
-                <Route
-                  path="*"
-                  element={<NotFound to={`${routesPrefix}/list-short-urls/1`}>List short URLs</NotFound>}
-                />
+                {createNotFound && <Route path="*" element={createNotFound('/list-short-urls/1')} />}
               </Routes>
             </div>
           </div>

shlink-web-component/ShlinkWebComponent.tsx

@@ -11,10 +11,11 @@ import type { Settings } from './utils/settings';
 import { SettingsProvider } from './utils/settings';
 
 type ShlinkWebComponentProps = {
-  routesPrefix?: string;
-  settings?: Settings;
   serverVersion: SemVer;
   apiClient: ShlinkApiClient;
+  routesPrefix?: string;
+  settings?: Settings;
+  createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
 };
 
 // FIXME
@@ -24,7 +25,7 @@ let apiClientRef: ShlinkApiClient;
 
 export const createShlinkWebComponent = (
   bottle: Bottle,
-): FC<ShlinkWebComponentProps> => ({ serverVersion, apiClient, settings, routesPrefix = '' }) => {
+): FC<ShlinkWebComponentProps> => ({ serverVersion, apiClient, settings, routesPrefix = '', createNotFound }) => {
   const features = useFeatures(serverVersion);
   const mainContent = useRef<ReactNode>();
   const [theStore, setStore] = useState<Store | undefined>();
@@ -37,7 +38,7 @@ export const createShlinkWebComponent = (
     // depend on it
     const { container } = bottle;
     const { Main, store, loadMercureInfo } = container;
-    mainContent.current = <Main />;
+    mainContent.current = <Main createNotFound={createNotFound} />;
     setStore(store);
 
     // Load mercure info