Skip to content

Commit 88b029e

Browse files
kelvink96kelvink96
authored
Merge pull request #37 from design-sparx/ft/chore
chore and styles updates
2 parents 066a7a3 + 97f7c09 commit 88b029e

File tree

16 files changed

+271
-68
lines changed

16 files changed

+271
-68
lines changed

‎.changeset/early-ears-guess.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"mantine-analytics-dashboard": patch
3+
---
4+
5+
- docs: updated product roadmap notion link in README.md
6+
- styles: updated authentication page(s) layout
7+
- chore: added missing npm package @dnd-kit/utilities
8+
- chore: removed unused emotion/** npm packages

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
- [Live preview](https://mantine-analytics-dashboard.netlify.app/)
3535
- [Components preview](https://6546507b657a74164abf2db6-oniqlpqtfs.chromatic.com/)
3636
- [Medium](https://medium.com/stackademic/how-i-built-an-open-source-admin-dashboard-template-with-mantine-and-next-js-4f00a21ce04f)
37-
- [Product roadmap](https://kelvink96.notion.site/a41deb84ce1143d986e8efe45a195a25?v=86ea99dec0c94fd4bbee00edacfb29f1) * **New** *
37+
- [Product roadmap](https://kelvink96.notion.site/Mantine-analytics-dashboard-Product-roadmap-822fe0c757e647c9b2fd62a50807500a?pvs=74) * **New** *
3838

3939
# About
4040

‎app/authentication/auth0/layout.tsx‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,70 @@
1-
import { ReactNode } from 'react';
1+
'use client';
2+
3+
import { ReactNode, useState } from 'react';
24
import { Providers } from '@/providers/session';
5+
import { AppShell, Container, rem, useMantineTheme } from '@mantine/core';
6+
import HeaderNav from '@/components/HeaderNav';
7+
import Navigation from '@/components/Navigation';
8+
import AppMain from '@/components/AppMain';
9+
import FooterNav from '@/components/FooterNav';
10+
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
311

412
type Auth0LayoutProps = {
513
children: ReactNode;
614
};
715

816
export default function Auth0Layout({ children }: Auth0LayoutProps) {
9-
return <Providers>{children}</Providers>;
17+
const theme = useMantineTheme();
18+
const [opened, setOpened] = useState(false);
19+
const [themeOpened, { open: themeOpen, close: themeClose }] =
20+
useDisclosure(false);
21+
const tablet_match = useMediaQuery('(max-width: 768px)');
22+
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
23+
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
24+
25+
return (
26+
<AppShell
27+
layout="alt"
28+
header={{ height: 60 }}
29+
footer={{ height: 60 }}
30+
navbar={{
31+
width: 300,
32+
breakpoint: 'md',
33+
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
34+
}}
35+
padding={0}
36+
>
37+
<AppShell.Header
38+
style={{
39+
height: rem(60),
40+
border: 'none',
41+
boxShadow: tablet_match ? theme.shadows.md : theme.shadows.sm,
42+
}}
43+
>
44+
<Container fluid py="sm" px="lg">
45+
<HeaderNav
46+
opened={opened}
47+
handleOpen={() => setOpened((o) => !o)}
48+
desktopOpened={desktopOpened}
49+
mobileOpened={mobileOpened}
50+
toggleDesktop={toggleDesktop}
51+
toggleMobile={toggleMobile}
52+
/>
53+
</Container>
54+
</AppShell.Header>
55+
<AppShell.Navbar>
56+
<Navigation onClose={() => setOpened(false)} />
57+
</AppShell.Navbar>
58+
<AppShell.Main>
59+
<AppMain>
60+
<Providers>{children}</Providers>
61+
</AppMain>
62+
</AppShell.Main>
63+
<AppShell.Footer p="md">
64+
<Container fluid px="lg">
65+
<FooterNav />
66+
</Container>
67+
</AppShell.Footer>
68+
</AppShell>
69+
);
1070
}

‎app/authentication/clerk/layout.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
'use client';
2+
3+
import { AppShell, Container, rem, useMantineTheme } from '@mantine/core';
4+
import { ReactNode, useState } from 'react';
5+
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
6+
import AppMain from '@/components/AppMain';
7+
import Navigation from '@/components/Navigation';
8+
import HeaderNav from '@/components/HeaderNav';
9+
import FooterNav from '@/components/FooterNav';
10+
11+
type Props = {
12+
children: ReactNode;
13+
};
14+
15+
function ClerkLayout({ children }: Props) {
16+
const theme = useMantineTheme();
17+
const [opened, setOpened] = useState(false);
18+
const [themeOpened, { open: themeOpen, close: themeClose }] =
19+
useDisclosure(false);
20+
const tablet_match = useMediaQuery('(max-width: 768px)');
21+
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
22+
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
23+
24+
return (
25+
<AppShell
26+
layout="alt"
27+
header={{ height: 60 }}
28+
footer={{ height: 60 }}
29+
navbar={{
30+
width: 300,
31+
breakpoint: 'md',
32+
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
33+
}}
34+
padding={0}
35+
>
36+
<AppShell.Header
37+
style={{
38+
height: rem(60),
39+
border: 'none',
40+
boxShadow: tablet_match ? theme.shadows.md : theme.shadows.sm,
41+
}}
42+
>
43+
<Container fluid py="sm" px="lg">
44+
<HeaderNav
45+
opened={opened}
46+
handleOpen={() => setOpened((o) => !o)}
47+
desktopOpened={desktopOpened}
48+
mobileOpened={mobileOpened}
49+
toggleDesktop={toggleDesktop}
50+
toggleMobile={toggleMobile}
51+
/>
52+
</Container>
53+
</AppShell.Header>
54+
<AppShell.Navbar>
55+
<Navigation onClose={() => setOpened(false)} />
56+
</AppShell.Navbar>
57+
<AppShell.Main>
58+
<AppMain>{children}</AppMain>
59+
</AppShell.Main>
60+
<AppShell.Footer p="md">
61+
<Container fluid px="lg">
62+
<FooterNav />
63+
</Container>
64+
</AppShell.Footer>
65+
</AppShell>
66+
);
67+
}
68+
69+
export default ClerkLayout;

‎app/authentication/clerk/page.tsx‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,25 @@
22

33
import {
44
ClerkProvider,
5-
SignInButton,
6-
SignUpButton,
75
SignIn,
8-
SignUp,
6+
SignInButton,
97
SignOutButton,
10-
UserButton,
11-
UserProfile,
12-
ClerkLoading,
13-
ClerkLoaded,
8+
SignUp,
9+
SignUpButton,
1410
} from '@clerk/nextjs';
1511
import {
12+
Button,
1613
Container,
17-
Image,
18-
Stack,
1914
Divider,
15+
Flex,
2016
Group,
21-
Title,
22-
Text,
23-
Paper,
24-
Button,
25-
useMantineColorScheme,
26-
useMantineTheme,
17+
Image,
2718
parseThemeColor,
2819
Select,
29-
Flex,
20+
Stack,
21+
Text,
22+
Title,
23+
useMantineTheme,
3024
} from '@mantine/core';
3125
import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes';
3226
import { useEffect, useState } from 'react';
@@ -35,7 +29,6 @@ import { IconLogin, IconLogin2, IconUserCircle } from '@tabler/icons-react';
3529
const ICON_SIZE = 18;
3630

3731
function Home() {
38-
const { colorScheme } = useMantineColorScheme();
3932
const theme = useMantineTheme();
4033
const parsedThemeColor = parseThemeColor({
4134
color: theme.primaryColor,
@@ -67,7 +60,7 @@ function Home() {
6760
/>
6861
</>
6962
<ClerkProvider appearance={...clerkAppearanceOptions}>
70-
<Container fluid>
63+
<Container>
7164
<Stack gap="lg">
7265
<Image src="/brands/clerk.svg" h={48} w={120} fit="contain" />
7366
<Divider />

‎app/authentication/layout.tsx‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,13 @@
11
'use client';
22

3-
import { Center, Stack, useMantineTheme } from '@mantine/core';
4-
import Image from 'next/image';
53
import React, { ReactNode } from 'react';
6-
import { useColorScheme } from '@mantine/hooks';
74

85
type AuthProps = {
96
children: ReactNode;
107
};
118

129
function AuthLayout({ children }: AuthProps) {
13-
const theme = useMantineTheme();
14-
const colorScheme = useColorScheme();
15-
16-
return (
17-
<Center
18-
style={{
19-
height: '100vh',
20-
width: '100vw',
21-
}}
22-
>
23-
<Stack>
24-
<Center>
25-
<Image
26-
src="/logo-no-background.png"
27-
alt="DesignSparx logo"
28-
width={96}
29-
height={96}
30-
style={{ objectFit: 'contain' }}
31-
/>
32-
</Center>
33-
{children}
34-
</Stack>
35-
</Center>
36-
);
10+
return <>{children}</>;
3711
}
3812

3913
export default AuthLayout;

‎app/authentication/password-reset/layout.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use client';
2+
3+
import { Center, Stack } from '@mantine/core';
4+
import Image from 'next/image';
5+
import React, { ReactNode } from 'react';
6+
7+
type AuthProps = {
8+
children: ReactNode;
9+
};
10+
11+
function PasswordLayout({ children }: AuthProps) {
12+
return (
13+
<Center
14+
style={{
15+
height: '100vh',
16+
width: '100vw',
17+
}}
18+
>
19+
<Stack>
20+
<Center>
21+
<Image
22+
src="/logo-no-background.png"
23+
alt="DesignSparx logo"
24+
width={96}
25+
height={96}
26+
style={{ objectFit: 'contain' }}
27+
/>
28+
</Center>
29+
{children}
30+
</Stack>
31+
</Center>
32+
);
33+
}
34+
35+
export default PasswordLayout;

‎app/authentication/signin/layout.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use client';
2+
3+
import { Center, Stack } from '@mantine/core';
4+
import Image from 'next/image';
5+
import React, { ReactNode } from 'react';
6+
7+
type AuthProps = {
8+
children: ReactNode;
9+
};
10+
11+
function SignInLayout({ children }: AuthProps) {
12+
return (
13+
<Center
14+
style={{
15+
height: '100vh',
16+
width: '100vw',
17+
}}
18+
>
19+
<Stack>
20+
<Center>
21+
<Image
22+
src="/logo-no-background.png"
23+
alt="DesignSparx logo"
24+
width={96}
25+
height={96}
26+
style={{ objectFit: 'contain' }}
27+
/>
28+
</Center>
29+
{children}
30+
</Stack>
31+
</Center>
32+
);
33+
}
34+
35+
export default SignInLayout;

‎app/authentication/signup/layout.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use client';
2+
3+
import { Center, Stack } from '@mantine/core';
4+
import Image from 'next/image';
5+
import React, { ReactNode } from 'react';
6+
7+
type AuthProps = {
8+
children: ReactNode;
9+
};
10+
11+
function SignUpLayout({ children }: AuthProps) {
12+
return (
13+
<Center
14+
style={{
15+
height: '100vh',
16+
width: '100vw',
17+
}}
18+
>
19+
<Stack>
20+
<Center>
21+
<Image
22+
src="/logo-no-background.png"
23+
alt="DesignSparx logo"
24+
width={96}
25+
height={96}
26+
style={{ objectFit: 'contain' }}
27+
/>
28+
</Center>
29+
{children}
30+
</Stack>
31+
</Center>
32+
);
33+
}
34+
35+
export default SignUpLayout;

‎app/layout.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,11 @@ export default function RootLayout({
5353
name="description"
5454
content="Explore our versatile dashboard website template featuring a stunning array of themes and meticulously crafted components. Elevate your web project with seamless integration, customizable themes, and a rich variety of components for a dynamic user experience. Effortlessly bring your data to life with our intuitive dashboard template, designed to streamline development and captivate users. Discover endless possibilities in design and functionality today!"
5555
/>
56+
57+
<script
58+
src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js"
59+
defer
60+
></script>
5661
<ColorSchemeScript defaultColorScheme="auto" />
5762
</head>
5863
<body>

0 commit comments

Comments
 (0)