update to react-router v7

apps/artboard/index.html

@@ -40,12 +40,5 @@
 
     <!-- Phosphor Icons -->
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
-
-    <!-- Simple Icons -->
-    <link
-      type="text/css"
-      rel="stylesheet"
-      href="https://unpkg.com/simple-icons-font@v14/font/simple-icons.min.css"
-    />
   </body>
 </html>

apps/artboard/src/components/brand-icon.tsx

@@ -1,5 +1,3 @@
-import { cn } from "@reactive-resume/utils";
-
 type BrandIconProps = {
   slug: string;
 };
@@ -8,12 +6,12 @@ export const BrandIcon = ({ slug }: BrandIconProps) => {
   if (slug === "linkedin") {
     return (
       <img
-        alt="LinkedIn"
+        alt="linkedin"
         className="size-4"
         src={`${window.location.origin}/support-logos/linkedin.svg`}
       />
     );
   }
 
-  return <i className={cn("si si--color text-[1rem]", `si-${slug}`)} />;
+  return <img alt={slug} className="size-4" src={`https://cdn.simpleicons.org/${slug}`} />;
 };

apps/artboard/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "react-router";
 
 import { router } from "./router";
 

apps/artboard/src/pages/artboard.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import webfontloader from "webfontloader";
 
 import { useArtboardStore } from "../store/artboard";

apps/artboard/src/providers/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 
 import { useArtboardStore } from "../store/artboard";
 

apps/artboard/src/router/index.tsx

@@ -1,4 +1,4 @@
-import { createBrowserRouter, createRoutesFromChildren, Route } from "react-router-dom";
+import { createBrowserRouter, createRoutesFromChildren, Route } from "react-router";
 
 import { ArtboardPage } from "../pages/artboard";
 import { BuilderLayout } from "../pages/builder";
@@ -6,7 +6,7 @@ import { PreviewLayout } from "../pages/preview";
 import { Providers } from "../providers";
 
 export const routes = createRoutesFromChildren(
-  <Route element={<Providers />}>
+  <Route element={<Providers />} hydrateFallbackElement={<div>Loading...</div>}>
     <Route path="artboard" element={<ArtboardPage />}>
       <Route path="builder" element={<BuilderLayout />} />
       <Route path="preview" element={<PreviewLayout />} />