mantine statt material ui

package.json

@@ -4,11 +4,8 @@
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.11.12",
+    "@mantine/core": "^6.0.1",
+    "@mantine/hooks": "^6.0.1",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.14",
     "@types/react": "^18.0.28",

src/App.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import AppBar from './components/AppBar';
 import ImageGalleryX from './components/ImageGallery';
 import './App.css';
+import { AppShell } from '@mantine/core';
+import HeaderX from './components/HeaderX';
 
 function App() {
   return (
   <div className="App">
-    <AppBar />
-    <ImageGalleryX />
+    <AppShell header={<HeaderX />}>
+      <ImageGalleryX />
+    </AppShell>
   </div>
   );
 }

src/components/AppBar.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1
-    },
-    menuButton: {
-      marginRight: theme.spacing(2)
-    },
-    title: {
-      flexGrow: 1
-    }
-  })
-);
-
-export default function ButtonAppBar() {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <AppBar position="static">
-        <Toolbar>
-          <IconButton
-            edge="start"
-            className={classes.menuButton}
-            color="inherit"
-            aria-label="menu"
-          >
-            <MenuIcon />
-          </IconButton>
-          <Typography variant="h6" className={classes.title}>
-            Gallery
-          </Typography>
-        </Toolbar>
-      </AppBar>
-    </div>
-  );
-}

src/components/HeaderX.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {  Burger, Header, Text } from '@mantine/core';
+
+
+
+export default function HeaderX() 
+{
+
+  return (
+        <Header height={{ base: 50, md: 70 }} p="md">
+          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+              <Burger
+                opened={false}
+                onClick={() => {}}
+                size="sm"
+                color={'blue'}
+                mr="xl"
+              />
+            <Text>Gallery</Text>
+          </div>
+        </Header>  );
+}

src/components/ImageGallery.tsx

@@ -1,49 +1,32 @@
 import React, { useCallback, useMemo } from "react";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import ImageGallery, { ReactImageGalleryItem } from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
 import { imageGalleryItems } from "../state";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1
-    },
-    thubmnail: {
-      backgroundColor: "red",
-      '&.image-gallery-thumbnail.active': {
-        borderColor: 'green',
-      },
-      '&.image-gallery-thumbnail:hover': {
-        borderColor: 'lightgreen',
-      },
-    }
-  })
-);
 
 export default function ImageGalleryX() 
 {
-  const classes = useStyles();
-
   const root: string = process.env.REACT_APP_WWW_ROOT!;
   const uploads: string = root + 'uploads/';
 
-  const items = useMemo(() => {
-    return imageGalleryItems.map((item: ReactImageGalleryItem) => {
+  const items = useMemo(() => 
+  {
+    return imageGalleryItems.map((item: ReactImageGalleryItem) => 
+    {
       const newItem = { ...item };
       newItem.original = uploads + newItem.original;
       newItem.thumbnail = uploads + newItem.thumbnail;
-      newItem.thumbnailClass = classes.thubmnail;
+//      newItem.thumbnailClass = {''}
       return newItem;
     });
-  }, [classes.thubmnail]);
+  }, []);
 
   return (
-    <div className={classes.root}>
+    <div className={''}>
       <ImageGallery
         items={items}
-        showFullscreenButton={false}
-        showThumbnails
+        showFullscreenButton={true}
+        showThumbnails={true}
       />
     </div>
   );