feat: notifications, redux, tailwind
This commit is contained in:
7
src/app/global.css
Normal file
7
src/app/global.css
Normal file
@ -0,0 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
body {
|
||||
@mixin light {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
@import "tailwind-preset-mantine";
|
||||
@import "./theme.css";
|
||||
@ -1,41 +1,54 @@
|
||||
import "@mantine/core/styles.css"
|
||||
import "@mantine/dates/styles.css"
|
||||
import "@mantine/notifications/styles.css"
|
||||
import '@mantine/dropzone/styles.css';
|
||||
|
||||
import React from "react"
|
||||
import "@mantine/core/styles.css";
|
||||
import "@mantine/notifications/styles.css";
|
||||
import React, { ReactNode } from "react";
|
||||
import {
|
||||
ColorSchemeScript,
|
||||
mantineHtmlProps,
|
||||
MantineProvider,
|
||||
} from "@mantine/core"
|
||||
import { theme } from "./theme"
|
||||
import "./globals.css"
|
||||
import { Notifications } from "@mantine/notifications"
|
||||
import { ModalsProvider } from "@mantine/modals"
|
||||
} from "@mantine/core";
|
||||
import { theme } from "@/theme";
|
||||
import "@/app/global.css";
|
||||
import { Notifications } from "@mantine/notifications";
|
||||
import ReduxProvider from "@/providers/ReduxProvider";
|
||||
|
||||
export const metadata = {
|
||||
title: "Mantine Next.js template",
|
||||
description: "I am using Mantine with Next.js!",
|
||||
}
|
||||
title: "CRM LogiDex",
|
||||
description: "CRM LogiDex",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: any }) {
|
||||
type Props = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: Props) {
|
||||
return (
|
||||
<html lang="en" {...mantineHtmlProps}>
|
||||
<html
|
||||
lang="ru"
|
||||
{...mantineHtmlProps}>
|
||||
<head>
|
||||
<ColorSchemeScript />
|
||||
<link rel="shortcut icon" href="/favicon.svg" />
|
||||
<ColorSchemeScript defaultColorScheme={"auto"} />
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="/favicon.svg"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="global.css"
|
||||
/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
|
||||
/>
|
||||
<title />
|
||||
</head>
|
||||
<body>
|
||||
<MantineProvider theme={theme}>
|
||||
<Notifications />
|
||||
<ModalsProvider>{children}</ModalsProvider>
|
||||
<MantineProvider
|
||||
theme={theme}
|
||||
defaultColorScheme={"auto"}>
|
||||
<ReduxProvider>{children}</ReduxProvider>
|
||||
<Notifications position="bottom-right" />
|
||||
</MantineProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,52 +1,11 @@
|
||||
import { ColorSchemesSwitcher } from "@/components/color-schemes-switcher"
|
||||
import {
|
||||
AppShell,
|
||||
AppShellHeader,
|
||||
AppShellMain,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core"
|
||||
import { ColorSchemeToggle } from "@/components/ColorSchemeToggle/ColorSchemeToggle";
|
||||
import { Welcome } from "@/components/Welcome/Welcome";
|
||||
|
||||
export default function Home() {
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<AppShell header={{ height: 60 }} padding="md">
|
||||
<AppShellHeader></AppShellHeader>
|
||||
<AppShellMain>
|
||||
<Title className="text-center mt-20">
|
||||
Welcome to{" "}
|
||||
<Text
|
||||
inherit
|
||||
variant="gradient"
|
||||
component="span"
|
||||
gradient={{ from: "pink", to: "yellow" }}
|
||||
>
|
||||
Mantine
|
||||
</Text>{" "}
|
||||
+
|
||||
<Text
|
||||
inherit
|
||||
variant="gradient"
|
||||
component="span"
|
||||
gradient={{ from: "blue", to: "green" }}
|
||||
>
|
||||
TailwindCSS
|
||||
</Text>
|
||||
</Title>
|
||||
<Text
|
||||
className="text-bold text-center text-gray-700 dark:text-gray-300 max-w-[500px] mx-auto mt-xl"
|
||||
ta="center"
|
||||
size="lg"
|
||||
maw={580}
|
||||
mx="auto"
|
||||
mt="xl"
|
||||
>
|
||||
This starter Next.js project includes a minimal setup for
|
||||
Mantine with TailwindCSS. To get started edit page.tsx file.
|
||||
</Text>
|
||||
<div className="flex justify-center mt-10">
|
||||
<ColorSchemesSwitcher />
|
||||
</div>
|
||||
</AppShellMain>
|
||||
</AppShell>
|
||||
)
|
||||
<>
|
||||
<Welcome />
|
||||
<ColorSchemeToggle />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,133 +0,0 @@
|
||||
/** This file is autogenerated by the script. Do not edit it manually. */
|
||||
|
||||
|
||||
@theme {
|
||||
|
||||
|
||||
/* colors - all */
|
||||
|
||||
|
||||
/* colors - variant specific */
|
||||
|
||||
|
||||
/* breakpoints */
|
||||
--breakpoint-*: initial;
|
||||
--breakpoint-xs: 36em;
|
||||
--breakpoint-sm: 48em;
|
||||
--breakpoint-md: 62em;
|
||||
--breakpoint-lg: 75em;
|
||||
--breakpoint-xl: 88em;
|
||||
|
||||
/* readd back tailwind's default containers vars to fix #24 */
|
||||
--size-3xs: 16rem;
|
||||
--size-2xs: 18rem;
|
||||
--size-xs: 20rem;
|
||||
--size-sm: 24rem;
|
||||
--size-md: 28rem;
|
||||
--size-lg: 32rem;
|
||||
--size-xl: 36rem;
|
||||
--size-2xl: 42rem;
|
||||
--size-3xl: 48rem;
|
||||
--size-4xl: 56rem;
|
||||
--size-5xl: 64rem;
|
||||
--size-6xl: 72rem;
|
||||
--size-7xl: 80rem;
|
||||
|
||||
--container-3xs: var(--size-3xs);
|
||||
--container-2xs: var(--size-2xs);
|
||||
--container-xs: var(--size-xs);
|
||||
--container-sm: var(--size-sm);
|
||||
--container-md: var(--size-md);
|
||||
--container-lg: var(--size-lg);
|
||||
--container-xl: var(--size-xl);
|
||||
--container-2xl: var(--size-2xl);
|
||||
--container-3xl: var(--size-3xl);
|
||||
--container-4xl: var(--size-4xl);
|
||||
--container-5xl: var(--size-5xl);
|
||||
--container-6xl: var(--size-6xl);
|
||||
--container-7xl: var(--size-7xl);
|
||||
|
||||
--width-3xs: var(--size-3xs);
|
||||
--width-2xs: var(--size-2xs);
|
||||
--width-xs: var(--size-xs);
|
||||
--width-sm: var(--size-sm);
|
||||
--width-md: var(--size-md);
|
||||
--width-lg: var(--size-lg);
|
||||
--width-xl: var(--size-xl);
|
||||
--width-2xl: var(--size-2xl);
|
||||
--width-3xl: var(--size-3xl);
|
||||
--width-4xl: var(--size-4xl);
|
||||
--width-5xl: var(--size-5xl);
|
||||
--width-6xl: var(--size-6xl);
|
||||
--width-7xl: var(--size-7xl);
|
||||
|
||||
--min-width-3xs: var(--size-3xs);
|
||||
--min-width-2xs: var(--size-2xs);
|
||||
--min-width-xs: var(--size-xs);
|
||||
--min-width-sm: var(--size-sm);
|
||||
--min-width-md: var(--size-md);
|
||||
--min-width-lg: var(--size-lg);
|
||||
--min-width-xl: var(--size-xl);
|
||||
--min-width-2xl: var(--size-2xl);
|
||||
--min-width-3xl: var(--size-3xl);
|
||||
--min-width-4xl: var(--size-4xl);
|
||||
--min-width-5xl: var(--size-5xl);
|
||||
--min-width-6xl: var(--size-6xl);
|
||||
--min-width-7xl: var(--size-7xl);
|
||||
|
||||
--max-width-3xs: var(--size-3xs);
|
||||
--max-width-2xs: var(--size-2xs);
|
||||
--max-width-xs: var(--size-xs);
|
||||
--max-width-sm: var(--size-sm);
|
||||
--max-width-md: var(--size-md);
|
||||
--max-width-lg: var(--size-lg);
|
||||
--max-width-xl: var(--size-xl);
|
||||
--max-width-2xl: var(--size-2xl);
|
||||
--max-width-3xl: var(--size-3xl);
|
||||
--max-width-4xl: var(--size-4xl);
|
||||
--max-width-5xl: var(--size-5xl);
|
||||
--max-width-6xl: var(--size-6xl);
|
||||
--max-width-7xl: var(--size-7xl);
|
||||
|
||||
--height-3xs: var(--size-3xs);
|
||||
--height-2xs: var(--size-2xs);
|
||||
--height-xs: var(--size-xs);
|
||||
--height-sm: var(--size-sm);
|
||||
--height-md: var(--size-md);
|
||||
--height-lg: var(--size-lg);
|
||||
--height-xl: var(--size-xl);
|
||||
--height-2xl: var(--size-2xl);
|
||||
--height-3xl: var(--size-3xl);
|
||||
--height-4xl: var(--size-4xl);
|
||||
--height-5xl: var(--size-5xl);
|
||||
--height-6xl: var(--size-6xl);
|
||||
--height-7xl: var(--size-7xl);
|
||||
|
||||
--min-height-3xs: var(--size-3xs);
|
||||
--min-height-2xs: var(--size-2xs);
|
||||
--min-height-xs: var(--size-xs);
|
||||
--min-height-sm: var(--size-sm);
|
||||
--min-height-md: var(--size-md);
|
||||
--min-height-lg: var(--size-lg);
|
||||
--min-height-xl: var(--size-xl);
|
||||
--min-height-2xl: var(--size-2xl);
|
||||
--min-height-3xl: var(--size-3xl);
|
||||
--min-height-4xl: var(--size-4xl);
|
||||
--min-height-5xl: var(--size-5xl);
|
||||
--min-height-6xl: var(--size-6xl);
|
||||
--min-height-7xl: var(--size-7xl);
|
||||
|
||||
--max-height-3xs: var(--size-3xs);
|
||||
--max-height-2xs: var(--size-2xs);
|
||||
--max-height-xs: var(--size-xs);
|
||||
--max-height-sm: var(--size-sm);
|
||||
--max-height-md: var(--size-md);
|
||||
--max-height-lg: var(--size-lg);
|
||||
--max-height-xl: var(--size-xl);
|
||||
--max-height-2xl: var(--size-2xl);
|
||||
--max-height-3xl: var(--size-3xl);
|
||||
--max-height-4xl: var(--size-4xl);
|
||||
--max-height-5xl: var(--size-5xl);
|
||||
--max-height-6xl: var(--size-6xl);
|
||||
--max-height-7xl: var(--size-7xl);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { createTheme } from "@mantine/core"
|
||||
|
||||
export const theme = createTheme({
|
||||
breakpoints: {
|
||||
xs: "36em",
|
||||
sm: "48em",
|
||||
md: "62em",
|
||||
lg: "75em",
|
||||
xl: "88em",
|
||||
},
|
||||
})
|
||||
|
||||
export default theme
|
||||
Reference in New Issue
Block a user