chore: Installed Mantine Library

UoaWDCC · Oct 20, 2024 · 4b15109 · 4b15109
1 parent 41ff39f
commit 4b15109
Show file tree

Hide file tree

Showing 4 changed files with 259 additions and 9 deletions.
diff --git a/web/package.json b/web/package.json
@@ -11,10 +11,14 @@
     "test": "vitest run --coverage"
   },
   "dependencies": {
+    "@mantine/carousel": "^7.13.3",
+    "@mantine/core": "^7.13.3",
+    "@mantine/hooks": "^7.13.3",
     "@tanstack/react-query": "^5.18.1",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.6.7",
+    "embla-carousel-react": "7.1.0",
     "react": "^18.2.0",
     "react-cookies": "^0.1.1",
     "react-dom": "^18.2.0",
@@ -44,7 +48,9 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "jest": "^29.7.0",
     "jsdom": "^24.1.0",
-    "postcss": "^8.4.34",
+    "postcss": "^8.4.47",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",

diff --git a/web/postcss.config.js b/web/postcss.config.js
@@ -2,5 +2,15 @@ export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
   },
 };
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,6 +1,8 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { useState } from "react";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
 import Home from "@pages/Home";
 import About from "@pages/About";
 import Event from "@pages/Event";
@@ -33,8 +35,10 @@ const router = createBrowserRouter([
 export default function App() {
   const [queryClient] = useState(() => new QueryClient());
   return (
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
+    <MantineProvider>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
+    </MantineProvider>
   );
 }