neuro_llc/NwBlog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: started work with Mantine

Browse Source
This commit is contained in:
Sergey Elpashev
2025-01-23 16:45:34 +03:00
parent c8a42598bf
commit d97cafa9ec
8 changed files with 126 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

7
next.config.ts
View File

@@ -1,9 +1,14 @@
import type { NextConfig } from "next"; import type { NextConfig } from "next";
import path from "node:path";
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
output: "standalone", output: "standalone",
experimental: { experimental: {
optimizePackageImports: ["@chakra-ui/react"], optimizePackageImports: ["@mantine/core", "@mantine/hooks"],
},
sassOptions: {
implementation: "sass-embedded",
additionalData: `@use "${path.join(process.cwd(), "src/_mantine").replace(/\\/g, "/")}" as mantine;`,
}, },
}; };

9
package.json
View File

@@ -9,6 +9,9 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@mantine/core": "^7.16.1",
"@mantine/hooks": "^7.16.1",
"@mantine/modals": "^7.16.1",
"next": "15.1.5", "next": "15.1.5",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
@@ -21,8 +24,10 @@
"@types/react-dom": "^19", "@types/react-dom": "^19",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "15.1.5", "eslint-config-next": "15.1.5",
"postcss": "^8", "postcss": "^8.5.1",
"sass": "^1.83.4", "postcss-preset-mantine": "^1.17.0",
"postcss-simple-vars": "^7.0.1",
"sass-embedded": "^1.83.4",
"typescript": "^5" "typescript": "^5"
} }
} }

14
postcss.config.cjs Normal file
View File

@@ -0,0 +1,14 @@
module.exports = {
plugins: {
"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",
},
},
},
};

6
postcss.config.mjs
View File

@@ -1,6 +0,0 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {},
};
export default config;

57
src/_mantine.scss Normal file
View File

@@ -0,0 +1,57 @@
@use 'sass:math';
// Define variables for your breakpoints,
// values must be the same as in your theme
$mantine-breakpoint-xs: '36em';
$mantine-breakpoint-sm: '48em';
$mantine-breakpoint-md: '62em';
$mantine-breakpoint-lg: '75em';
$mantine-breakpoint-xl: '88em';
@function rem($value) {
@return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
}
@mixin light {
[data-mantine-color-scheme='light'] & {
@content;
}
}
@mixin dark {
[data-mantine-color-scheme='dark'] & {
@content;
}
}
@mixin hover {
@media (hover: hover) {
&:hover {
@content;
}
}
@media (hover: none) {
&:active {
@content;
}
}
}
@mixin smaller-than($breakpoint) {
@media (max-width: $breakpoint) {
@content;
}
}
@mixin larger-than($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
@mixin ltr {
[dir='ltr'] & {
@content;
}
}

9
src/app/layout.tsx
View File

@@ -1,3 +1,5 @@
import { ColorSchemeScript, MantineProvider } from "@mantine/core";
import "@mantine/core/styles.css";
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.scss"; import "./globals.scss";
@@ -25,10 +27,11 @@ export default function RootLayout({
return ( return (
<html lang="ru" suppressHydrationWarning> <html lang="ru" suppressHydrationWarning>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <ColorSchemeScript />
<meta charSet="utf-8" />
</head> </head>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<MantineProvider>{children}</MantineProvider>
</body>
</html> </html>
); );
} }

39
src/app/page.tsx
View File

@@ -1,9 +1,42 @@
"use client"; "use client";
import { AppShell, Burger, Button, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { LuSun } from "react-icons/lu";
export default function Home() { export default function Home() {
const [opened, { toggle }] = useDisclosure();
const { setColorScheme, colorScheme } = useMantineColorScheme();
return ( return (
<div> <AppShell
<p>Test</p> header={{ height: 60 }}
</div> navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
padding="md"
>
<AppShell.Header>
<Group h="100%" px="md">
<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
<div>Logo</div>
</Group>
</AppShell.Header>
<AppShell.Navbar p="md">
{Array(15)
.fill(0)
.map((_, index) => (
<Skeleton key={index} h={28} mt="sm" animate={false} />
))}
<Button
onClick={() => {
setColorScheme(colorScheme === "light" ? "dark" : "light");
}}
>
<LuSun />
</Button>
</AppShell.Navbar>
<AppShell.Main>Main</AppShell.Main>
<AppShell.Footer>
<div>Footer</div>
</AppShell.Footer>
</AppShell>
); );
} }