Initial commit

components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,26 @@
+import { ActionIcon, Group, useMantineColorScheme } from '@mantine/core';
+import { SunIcon, MoonIcon } from '@modulz/radix-icons';
+
+export function ColorSchemeToggle() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  return (
+    <Group position="center" mt="xl">
+      <ActionIcon
+        onClick={() => toggleColorScheme()}
+        size="xl"
+        sx={(theme) => ({
+          backgroundColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+          color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
+        })}
+      >
+        {colorScheme === 'dark' ? (
+          <SunIcon width={20} height={20} />
+        ) : (
+          <MoonIcon width={20} height={20} />
+        )}
+      </ActionIcon>
+    </Group>
+  );
+}

components/Welcome/Welcome.story.tsx

@@ -0,0 +1,7 @@
+import { Welcome } from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Usage = () => <Welcome />;

components/Welcome/Welcome.styles.ts

@@ -0,0 +1,14 @@
+import { createStyles } from '@mantine/core';
+
+export default createStyles((theme) => ({
+  title: {
+    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+    fontSize: 100,
+    fontWeight: 900,
+    letterSpacing: -2,
+
+    [theme.fn.smallerThan('md')]: {
+      fontSize: 50,
+    },
+  },
+}));

components/Welcome/Welcome.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import { Welcome } from './Welcome';
+
+describe('Welcome component', () => {
+  it('has correct Next.js theming section link', () => {
+    render(<Welcome />);
+    expect(screen.getByText('this guide')).toHaveAttribute(
+      'href',
+      'https://mantine.dev/theming/next/'
+    );
+  });
+});

components/Welcome/Welcome.tsx

@@ -0,0 +1,25 @@
+import { Title, Text, Anchor } from '@mantine/core';
+import useStyles from './Welcome.styles';
+
+export function Welcome() {
+  const { classes } = useStyles();
+
+  return (
+    <>
+      <Title className={classes.title} align="center" mt={100}>
+        Welcome to{' '}
+        <Text inherit variant="gradient" component="span">
+          Mantine
+        </Text>
+      </Title>
+      <Text color="dimmed" align="center" size="lg" sx={{ maxWidth: 580 }} mx="auto" mt="xl">
+        This starter Next.js project includes a minimal setup for server side rendering, if you want
+        to learn more on Mantine + Next.js integration follow{' '}
+        <Anchor href="https://mantine.dev/theming/next/" size="lg">
+          this guide
+        </Anchor>
+        . To get started edit index.tsx file.
+      </Text>
+    </>
+  );
+}