diff --git a/demo/index.tsx b/demo/index.tsx
index d4a2faa..f2549d8 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -2,16 +2,18 @@ import React from "react";
import { createRoot } from "react-dom/client";
import "./src/index.css";
import App from "./src/App";
-import { GeistProvider, CssBaseline } from "@geist-ui/core";
+import "@mantine/core/styles.css";
+import { MantineProvider, createTheme } from "@mantine/core";
const container = document.getElementById("root")!;
const root = createRoot(container);
+const theme = createTheme({});
+
root.render(
-
-
+
-
+
);
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index 28bb262..42d8da7 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -7,7 +7,7 @@ import OgmaLib, {
} from "@linkurious/ogma";
import { useEffect, useState, createRef, useCallback } from "react";
// loading indicator
-import { Loading } from "@geist-ui/core";
+import { LoadingOverlay } from "@mantine/core";
// for geo mode
import * as L from "leaflet";
// components
@@ -32,6 +32,7 @@ import { Controls } from "./components/Controls";
import { MousePosition } from "./components/MousePosition";
import { Logo } from "./components/Logo";
import { UpdateGroupingButton } from "./components/UpdateGroupingButton";
+import "@mantine/core/styles.css";
// to enable geo mode integration
OgmaLib.libraries["leaflet"] = L;
@@ -96,7 +97,7 @@ export default function App() {
}, []);
// nothing to render yet
- if (loading) return ;
+ if (loading) return ;
return (
diff --git a/demo/src/components/Controls.tsx b/demo/src/components/Controls.tsx
index f7604f5..5baa536 100644
--- a/demo/src/components/Controls.tsx
+++ b/demo/src/components/Controls.tsx
@@ -1,6 +1,14 @@
import { useState } from "react";
-import { Drawer, Text, Button, Toggle, Slider, Spacer } from "@geist-ui/core";
-import { Menu as MenuIcon, X as XIcon } from "@geist-ui/icons";
+import {
+ Drawer,
+ Text,
+ Title,
+ Switch as Toggle,
+ Slider,
+ ActionIcon,
+ Space,
+} from "@mantine/core";
+import { Menu as MenuIcon } from "react-feather";
interface ControlsProps {
toggleNodeGrouping: (value: boolean) => void;
@@ -25,84 +33,90 @@ export function Controls({
}: ControlsProps) {
//const ogma = useOgma();
const [drawerShown, setDrawerShown] = useState(false);
+ const [nodeSize, setNodeSizeLocal] = useState(5);
+ const [edgeWidth, setEdgeWidthLocal] = useState(0.25);
return (
<>
-
setDrawerShown(false)}
- placement="right"
+ position="right"
className="controls"
>
-
- Controls
-
>
);
diff --git a/demo/src/components/Logo.tsx b/demo/src/components/Logo.tsx
index 9154f95..1aef6ec 100644
--- a/demo/src/components/Logo.tsx
+++ b/demo/src/components/Logo.tsx
@@ -1,21 +1,23 @@
-import { Button, Spacer, Link } from "@geist-ui/core";
-import { Github as GithubIcon } from "@geist-ui/icons";
+import { Space, ActionIcon } from "@mantine/core";
+import { GitHub as GithubIcon } from "react-feather";
import { Icon as ReactIcon } from "./ReactIcon";
export const Logo = () => {
return (
);
};
diff --git a/demo/src/components/ReactIcon.tsx b/demo/src/components/ReactIcon.tsx
index a18b9d4..c76c2aa 100644
--- a/demo/src/components/ReactIcon.tsx
+++ b/demo/src/components/ReactIcon.tsx
@@ -1,10 +1,11 @@
-export const Icon = ({ width = 12, height = 12 }) => (
+export const Icon = ({ width = 12, height = 12, ...props }) => (