Skip to content

Commit b2f7317

Browse files
0inp0inp
committedAug 15, 2024
refactor(layout): move to mantine ui lib
1 parent 31b6cc6 commit b2f7317

16 files changed

+5955
-126
lines changed
 

‎.eslintignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*.js
2+
*.mjs
3+
*.cjs

‎.gitignore

+121-27
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,132 @@
1-
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
29

3-
# dependencies
4-
/node_modules
5-
/.pnp
6-
.pnp.js
7-
.yarn/install-state.gz
8-
package-lock.json
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
912

13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
1018

11-
# testing
12-
/coverage
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
1321

14-
# next.js
15-
/.next/
16-
/out/
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
1725

18-
# production
19-
/build
26+
# nyc test coverage
27+
.nyc_output
2028

21-
# misc
22-
.DS_Store
23-
*.pem
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
2431

25-
# debug
26-
npm-debug.log*
27-
yarn-debug.log*
28-
yarn-error.log*
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
2937

30-
# local env files
31-
.env*.local
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
3240

33-
# vercel
34-
.vercel
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
3544

36-
# typescript
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
3749
*.tsbuildinfo
38-
next-env.d.ts
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Optional stylelint cache
58+
.stylelintcache
59+
60+
# Microbundle cache
61+
.rpt2_cache/
62+
.rts2_cache_cjs/
63+
.rts2_cache_es/
64+
.rts2_cache_umd/
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
# Yarn Integrity file
73+
.yarn-integrity
74+
75+
# dotenv environment variable files
76+
.env
77+
.env.development.local
78+
.env.test.local
79+
.env.production.local
80+
.env.local
81+
82+
# parcel-bundler cache (https://parceljs.org/)
83+
.cache
84+
.parcel-cache
85+
86+
# Next.js build output
87+
.next
88+
out
89+
90+
# Nuxt.js build / generate output
91+
.nuxt
92+
dist
93+
94+
# Gatsby files
95+
.cache/
96+
# Comment in the public line in if your project uses Gatsby and not Next.js
97+
# https://nextjs.org/blog/next-9-1#public-directory-support
98+
# public
99+
100+
# vuepress build output
101+
.vuepress/dist
102+
103+
# vuepress v2.x temp and cache directory
104+
.temp
105+
.cache
106+
107+
# Docusaurus cache and generated files
108+
.docusaurus
109+
110+
# Serverless directories
111+
.serverless/
112+
113+
# FuseBox cache
114+
.fusebox/
115+
116+
# DynamoDB Local files
117+
.dynamodb/
118+
119+
# TernJS port file
120+
.tern-port
121+
122+
# Stores VSCode versions used for testing VSCode extensions
123+
.vscode-test
124+
125+
# yarn v2
126+
.yarn/cache
127+
.yarn/unplugged
128+
.yarn/build-state.yml
129+
.yarn/install-state.gz
130+
.pnp.*
131+
132+
.DS_Store

‎app/layout.tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import type { Metadata } from "next";
2-
import Layout from "@/components/Layout";
3-
// import { GeistSans } from "geist/font/sans";
4-
import { ThemeProvider } from "@/components/ThemeProvider";
2+
// Import styles of packages that you've installed.
3+
// All packages except `@mantine/hooks` require styles imports
4+
import "@mantine/core/styles.css";
5+
6+
import { ColorSchemeScript, MantineProvider } from "@mantine/core";
7+
8+
import Layout from "@components/Layout";
59

610
import "./globals.css";
711

@@ -17,15 +21,13 @@ export default function RootLayout({
1721
}>) {
1822
return (
1923
<html lang="en">
24+
<head>
25+
<ColorSchemeScript />
26+
</head>
2027
<body>
21-
<ThemeProvider
22-
attribute="class"
23-
defaultTheme="system"
24-
enableSystem
25-
disableTransitionOnChange
26-
>
28+
<MantineProvider defaultColorScheme="dark">
2729
<Layout>{children}</Layout>
28-
</ThemeProvider>
30+
</MantineProvider>
2931
</body>
3032
</html>
3133
);

‎app/page.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import { Flex, Text, Title } from "@mantine/core";
2+
13
export default function Home() {
24
return (
3-
<div className="h-screen flex flex-col items-center justify-center">
4-
<h1 className="text-2xl py-8 text-primary">Music Tools</h1>
5-
<p>A simple music toolbox for the musician</p>
6-
</div>
5+
<Flex direction="column" align="center" justify="center" h="100%">
6+
<Title order={1}>Music Tools</Title>
7+
<Text>A simple music toolbox for the musician</Text>
8+
</Flex>
79
);
810
}

‎components/Layout.tsx

+30-27
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
"use client";
22

3-
import React from "react";
3+
import { Anchor, Container, Flex, Text } from "@mantine/core";
44
import { usePathname } from "next/navigation";
5-
import Link from "next/link";
5+
import React from "react";
66
import { ThemeToggle } from "./ThemeToggle";
77

88
const Layout = ({ children }: { children: React.ReactNode }) => {
@@ -20,64 +20,67 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
2020
label: "HOME",
2121
path: "/",
2222
isActive: pathname == "/",
23-
orderClass: "order-1",
23+
orderClass: "1",
2424
},
2525
{
2626
index: 1,
2727
label: "METRONOME",
2828
path: "/metronome",
2929
isActive: pathname == "/metronome",
30-
orderClass: "order-1",
30+
orderClass: "1",
3131
},
3232
{
3333
index: 2,
3434
label: "TUNER",
3535
path: "/tuner",
3636
isActive: pathname == "/tuner",
37-
orderClass: "order-1",
37+
orderClass: "1",
3838
},
3939
];
4040
let isActiveFlag = false;
4141
for (let page of pages) {
4242
if (isActiveFlag) {
43-
page.orderClass = "order-3";
43+
page.orderClass = "3";
4444
}
4545
if (page.isActive) {
4646
isActiveFlag = true;
4747
}
4848
}
4949

5050
return (
51-
<div className="flex flex-row">
51+
<Flex direction="row">
5252
{pages.map((page) => (
53-
<div
53+
<Flex
5454
key={page.index}
55-
className={
56-
"flex flex-col w-16 h-screen border-x-2 items-center justify-between " +
57-
page.orderClass
58-
}
55+
direction="column"
56+
align="center"
57+
justify="space-between"
58+
w="xl"
59+
bd="1px solid dark.0"
60+
style={{ order: page.orderClass }}
61+
h="100vh"
5962
>
60-
<div
61-
className={
62-
"text-lg " + (page.isActive ? "text-primary" : "text-current")
63-
}
64-
>
63+
<Text size="lg" c={page.isActive ? "orange.5" : "dimmed"}>
6564
0{page.index}
66-
</div>
65+
</Text>
6766
{page.index == 0 && <ThemeToggle />}
68-
<Link
67+
<Anchor
6968
href={page.path}
70-
className={
71-
"text-xl origin-left translate-x-2/4 -rotate-90 justify-self-end " +
72-
(page.isActive ? "text-primary" : "text-current")
73-
}
69+
underline="never"
70+
size="lg"
71+
c={page.isActive ? "orange.5" : "dimmed"}
72+
style={{
73+
"transform-origin": "left",
74+
rotate: "270deg",
75+
translate: "50% 0%",
76+
}}
7477
>
7578
{page.label}
76-
</Link>
77-
</div>
79+
</Anchor>
80+
</Flex>
7881
))}
79-
<main className="grow order-2">{children}</main>
80-
</div>
82+
<Container style={{ flexGrow: "1", order: "2" }}>{children}</Container>
83+
</Flex>
8184
);
8285
};
8386

‎components/ThemeProvider.tsx

-9
This file was deleted.

‎components/ThemeToggle.module.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.icon {
2+
width: 22px;
3+
height: 22px;
4+
}
5+
6+
.dark {
7+
@mixin dark {
8+
display: none;
9+
}
10+
11+
@mixin light {
12+
display: block;
13+
}
14+
}
15+
16+
.light {
17+
@mixin light {
18+
display: none;
19+
}
20+
21+
@mixin dark {
22+
display: block;
23+
}
24+
}

‎components/ThemeToggle.tsx

+25-12
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
11
"use client";
22

3-
import * as React from "react";
4-
import { Moon, Sun } from "lucide-react";
5-
import { useTheme } from "next-themes";
6-
7-
import { Toggle } from "@/components/ui/toggle";
3+
import {
4+
ActionIcon,
5+
useComputedColorScheme,
6+
useMantineColorScheme,
7+
} from "@mantine/core";
8+
import cx from "clsx";
9+
import { LuMoon, LuSun } from "react-icons/lu";
10+
import classes from "./ThemeToggle.module.css";
811

912
export function ThemeToggle() {
10-
const { theme, setTheme } = useTheme();
11-
const toggleMode = () => setTheme(theme == "light" ? "dark" : "light");
12-
13+
const { setColorScheme } = useMantineColorScheme({
14+
keepTransitions: true,
15+
});
16+
const computedColorScheme = useComputedColorScheme("dark");
17+
const toggleColorScheme = () => {
18+
setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
19+
};
1320
return (
14-
<Toggle onPressedChange={toggleMode}>
15-
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
16-
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
17-
</Toggle>
21+
<ActionIcon
22+
onClick={toggleColorScheme}
23+
variant="transparent"
24+
size="xl"
25+
aria-label="Toggle color scheme"
26+
color="orange"
27+
>
28+
<LuSun className={cx(classes.icon, classes.light)} />
29+
<LuMoon className={cx(classes.icon, classes.dark)} />
30+
</ActionIcon>
1831
);
1932
}

0 commit comments

Comments
 (0)
Please sign in to comment.