diff --git a/bun.lockb b/bun.lockb index 9d6bd60..4b91f47 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/next.config.ts b/next.config.ts index fe2648e..6137476 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,9 +1,14 @@ import type { NextConfig } from "next"; +import path from "node:path"; const nextConfig: NextConfig = { output: "standalone", 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;`, }, }; diff --git a/package.json b/package.json index 0443e8d..c9d540e 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,9 @@ "lint": "next lint" }, "dependencies": { + "@mantine/core": "^7.16.1", + "@mantine/hooks": "^7.16.1", + "@mantine/modals": "^7.16.1", "next": "15.1.5", "react": "^19.0.0", "react-dom": "^19.0.0", @@ -21,8 +24,10 @@ "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "15.1.5", - "postcss": "^8", - "sass": "^1.83.4", + "postcss": "^8.5.1", + "postcss-preset-mantine": "^1.17.0", + "postcss-simple-vars": "^7.0.1", + "sass-embedded": "^1.83.4", "typescript": "^5" } } diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..e817f56 --- /dev/null +++ b/postcss.config.cjs @@ -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", + }, + }, + }, +}; diff --git a/postcss.config.mjs b/postcss.config.mjs deleted file mode 100644 index 4ba5b43..0000000 --- a/postcss.config.mjs +++ /dev/null @@ -1,6 +0,0 @@ -/** @type {import('postcss-load-config').Config} */ -const config = { - plugins: {}, -}; - -export default config; diff --git a/src/_mantine.scss b/src/_mantine.scss new file mode 100644 index 0000000..48bbaf1 --- /dev/null +++ b/src/_mantine.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index aca5046..911df11 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,3 +1,5 @@ +import { ColorSchemeScript, MantineProvider } from "@mantine/core"; +import "@mantine/core/styles.css"; import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.scss"; @@ -25,10 +27,11 @@ export default function RootLayout({ return ( - - + - {children} + + {children} + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index f0615e9..99b2cd4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,9 +1,42 @@ "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() { + const [opened, { toggle }] = useDisclosure(); + const { setColorScheme, colorScheme } = useMantineColorScheme(); return ( -
-

Test

-
+ + + + +
Logo
+ + + + {Array(15) + .fill(0) + .map((_, index) => ( + + ))} + + + Main + +
Footer
+ + ); }