Add project base

2025-11-14 09:25:47 +01:00 · 2022-04-25 00:11:32 +02:00
parent c2c4f3a9d1
commit 56b42668a8
11 changed files with 568 additions and 124 deletions
--- a/README.md
+++ b/README.md
@@ -1,39 +1,13 @@
-# Mantine Next Template
+# HomePage, a home page for your home server
+## What is HomePage ?
+HomePage is a web page for your home server, it provides a user friendly interface to access docker containers or other services.
+## How to use HomePage ?
+### 1. Install HomePage
+### 2. Configure HomePage
+### 3. Start HomePage

-Get started with Mantine + Next with just a few button clicks.
-Click `Use this template` button at the header of repository or [follow this link](https://github.com/mantinedev/mantine-next-template/generate) and
-create new repository with `@mantine` packages. Note that you have to be logged in to GitHub to generate template.
-
-## Features
-
-This template comes with several essential features:
-
- Server side rendering setup for Mantine
- Color scheme is stored in cookie to avoid color scheme mismatch after hydration
- Storybook with color scheme toggle
- Jest with react testing library
- ESLint setup with [eslint-config-mantine](https://github.com/mantinedev/eslint-config-mantine)
-
-## npm scripts
-
-### Build and dev scripts
-
- `dev` – start dev server
- `build` – bundle application for production
- `export` – exports static website to `out` folder
- `analyze` – analyzes application bundle with [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
-
-### Testing scripts
-
- `typecheck` – checks TypeScript types
- `lint` – runs ESLint
- `prettier:check` – checks files with Prettier
- `jest` – runs jest tests
- `jest:watch` – starts jest watch
- `test` – runs `jest`, `prettier:check`, `lint` and `typecheck` scripts
-
-### Other scripts
-
- `storybook` – starts storybook dev server
- `storybook:build` – build production storybook bundle to `storybook-static`
- `prettier:write` – formats all files with Prettier
+# Notes
+## On page load ? 
+# Ping all connected services to check if they are up and running
+# If not, display a warning message
+# Update the bubble of each connected service
--- a/components/AppShelf/AppShelf.tsx
+++ b/components/AppShelf/AppShelf.tsx
@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  ActionIcon,
+  createStyles,
+  Grid,
+  Group,
+  Text,
+  Title,
+  Paper,
+  Tooltip,
+  Image,
+  ThemeIcon,
+  useMantineTheme,
+  Anchor,
+  Box,
+  Menu,
+  AspectRatio,
+} from '@mantine/core';
+import { ArrowBack, Trash } from 'tabler-icons-react';
+
+const AppShelf = () => {
+  const Services = loadServices();
+  const [hovering, setHovering] = useState('none');
+  const theme = useMantineTheme();
+  return (
+    <Grid m={'xl'} gutter={'xl'}>
+      {Services.map((service, i) => (
+        <Grid.Col span={4} lg={2} sm={3} key={i}>
+          <motion.div
+            onHoverStart={(e) => {
+              setHovering(service.name);
+            }}
+            onHoverEnd={(e) => {
+              setHovering('none');
+            }}
+          >
+            <AspectRatio ratio={4 / 3}>
+              <Box
+                sx={(theme) => ({
+                  backgroundColor:
+                    theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+                  textAlign: 'center',
+                  padding: theme.spacing.xl,
+                  borderRadius: theme.radius.md,
+
+                  '&:hover': {
+                    backgroundColor:
+                      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+                  },
+                })}
+              >
+                <motion.div animate={{opacity: hovering == service.name ? 1 : 0}}>
+                  <Menu sx={{ position: 'absolute', top: 3, right: 3 }}>
+                    <Menu.Label>Settings</Menu.Label>
+
+                    <Menu.Label>Danger zone</Menu.Label>
+                    <Menu.Item color="red" icon={<Trash size={14} />}>
+                      Delete
+                    </Menu.Item>
+                  </Menu>
+                </motion.div>
+                <Group position="center">
+                  <Anchor href={service.url} target="_blank">
+                    <motion.div whileHover={{ scale: 1.2 }}>
+                      <Image height={60} src={service.icon} alt={service.name} />
+                    </motion.div>
+                  </Anchor>
+                  <Text>{service.name}</Text>
+                </Group>
+              </Box>
+            </AspectRatio>
+          </motion.div>
+        </Grid.Col>
+      ))}
+    </Grid>
+  );
+};
+
+export default AppShelf;
+function loadServices() {
+  return [
+    {
+      name: 'Radarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
+      url: 'http://server:7878/',
+    },
+    {
+      name: 'Sonarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+      url: 'http://server:8989/',
+    },
+    {
+      name: 'Sonarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+      url: 'http://server:8989/',
+    },
+    {
+      name: 'Sonarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+      url: 'http://server:8989/',
+    },
+    {
+      name: 'Sonarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+      url: 'http://server:8989/',
+    },
+    {
+      name: 'Sonarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+      url: 'http://server:8989/',
+    },
+    {
+      name: 'Sonarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+      url: 'http://server:8989/',
+    },
+    {
+      name: 'Sonarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+      url: 'http://server:8989/',
+    },
+    {
+      name: 'Sonarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+      url: 'http://server:8989/',
+    },
+    {
+      name: 'Sonarr',
+      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+      url: 'http://server:8989/',
+    },
+  ];
+}
--- a/components/ColorSchemeToggle/ColorSchemeToggle.tsx
+++ b/components/ColorSchemeToggle/ColorSchemeToggle.tsx
@@ -1,26 +1,28 @@
-import { ActionIcon, Group, useMantineColorScheme } from '@mantine/core';
-import { SunIcon, MoonIcon } from '@modulz/radix-icons';
+import { ActionIcon, useMantineColorScheme } from '@mantine/core';
+import { Sun, MoonStars } from 'tabler-icons-react';
+import { motion } from 'framer-motion';

 export function ColorSchemeToggle() {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();

  return (
-    <Group position="center" mt="xl">
+    <motion.div
+      whileHover={{ scale: 1.2, rotate: 90 }}
+      whileTap={{
+        scale: 0.8,
+        rotate: -90,
+        borderRadius: '100%',
+      }}
+    >
      <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} />
-        )}
+        {colorScheme === 'dark' ? <Sun size={24} /> : <MoonStars size={24} />}
      </ActionIcon>
-    </Group>
+    </motion.div>
  );
 }
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { createStyles, Anchor, Text, Group, ActionIcon } from '@mantine/core';
+import { BrandGithub, Phone, BrandGmail } from 'tabler-icons-react';
+import { posix } from 'path';
+
+const useStyles = createStyles((theme) => ({
+  footer: {
+    borderTop: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
+    }`,
+  },
+
+  inner: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: `${theme.spacing.md}px ${theme.spacing.md}px`,
+
+    [theme.fn.smallerThan('sm')]: {
+      flexDirection: 'column',
+    },
+  },
+
+  links: {
+    [theme.fn.smallerThan('sm')]: {
+      marginTop: theme.spacing.lg,
+      marginBottom: theme.spacing.sm,
+    },
+  },
+}));
+
+interface FooterCenteredProps {
+  links: { link: string; label: string }[];
+}
+
+export function Footer({ links }: FooterCenteredProps) {
+  const { classes } = useStyles();
+  const items = links.map((link) => (
+    <Anchor<'a'>
+      color="dimmed"
+      key={link.label}
+      href={link.link}
+      sx={{ lineHeight: 1 }}
+      onClick={(event) => event.preventDefault()}
+      size="sm"
+    >
+      {link.label}
+    </Anchor>
+  ));
+
+  return (
+    <Group
+      sx={{
+        position: 'absolute',
+        bottom: 0,
+        right: 15,
+      }}
+      direction="row"
+      align="center"
+      mb={15}
+    >
+      <Group className={classes.links}>{items}</Group>
+      <Group spacing={'xs'} position="right" noWrap>
+        <ActionIcon<'a'> component="a" href={`https://github.com/ajnart/myhomepage`} size="lg">
+          <BrandGithub size={18} />
+        </ActionIcon>
+      </Group>
+      <Text
+        style={{
+          fontSize: '0.75rem',
+          textAlign: 'center',
+          color: '#a0aec0',
+        }}
+      >
+        Made with ❤️ by @
+        <Anchor href="https://github.com/ajnart" style={{ color: 'inherit', fontStyle: 'inherit' }}>
+          ajnart
+        </Anchor>
+      </Text>
+    </Group>
+  );
+}
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import {
+  createStyles,
+  Header as Head,
+  Container,
+  Group,
+  Burger,
+  Paper,
+  Transition,
+} from '@mantine/core';
+import { useBooleanToggle } from '@mantine/hooks';
+import { NextLink } from '@mantine/next';
+import { Logo } from './Logo';
+import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
+
+const HEADER_HEIGHT = 60;
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'relative',
+    zIndex: 1,
+  },
+
+  dropdown: {
+    position: 'absolute',
+    top: HEADER_HEIGHT,
+    left: 0,
+    right: 0,
+    zIndex: 0,
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopWidth: 0,
+    overflow: 'hidden',
+
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '100%',
+  },
+
+  links: {
+    [theme.fn.smallerThan('sm')]: {
+      display: 'none',
+    },
+  },
+
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+
+  link: {
+    display: 'block',
+    lineHeight: 1,
+    padding: '8px 12px',
+    borderRadius: theme.radius.sm,
+    textDecoration: 'none',
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+    fontSize: theme.fontSizes.sm,
+    fontWeight: 500,
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    },
+
+    [theme.fn.smallerThan('sm')]: {
+      borderRadius: 0,
+      padding: theme.spacing.md,
+    },
+  },
+
+  linkActive: {
+    '&, &:hover': {
+      backgroundColor:
+        theme.colorScheme === 'dark'
+          ? theme.fn.rgba(theme.colors[theme.primaryColor][9], 0.25)
+          : theme.colors[theme.primaryColor][0],
+      color: theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 3 : 7],
+    },
+  },
+}));
+
+interface HeaderResponsiveProps {
+  links: { link: string; label: string }[];
+}
+
+export function Header({ links }: HeaderResponsiveProps) {
+  const [opened, toggleOpened] = useBooleanToggle(false);
+  const [active, setActive] = useState('/');
+  const { classes, cx } = useStyles();
+
+  const items = (
+    <>
+      {links.map((link) => (
+        <NextLink
+          key={link.label}
+          href={link.link}
+          className={cx(classes.link, { [classes.linkActive]: active === link.link })}
+          onClick={(event) => {
+            setActive(link.link);
+            toggleOpened(false);
+          }}
+        >
+          {link.label}
+        </NextLink>
+      ))}
+    </>
+  );
+  return (
+    <Head height={HEADER_HEIGHT} mb={10} className={classes.root}>
+      <Container className={classes.header}>
+        <Group>
+          <ColorSchemeToggle />
+          <NextLink style={{ textDecoration: 'none' }} href="/">
+            <Logo style={{ fontSize: 22 }} />
+          </NextLink>
+        </Group>
+        <Group spacing={5} className={classes.links}>
+          {items}
+        </Group>
+
+        <Burger
+          opened={opened}
+          onClick={() => toggleOpened()}
+          className={classes.burger}
+          size="sm"
+        />
+
+        <Transition transition="pop-top-right" duration={200} mounted={opened}>
+          {(styles) => (
+            <Paper className={classes.dropdown} withBorder style={{ zIndex: 99 }}>
+              {items}
+            </Paper>
+          )}
+        </Transition>
+      </Container>
+    </Head>
+  );
+}
--- a/components/layout/Layout.tsx
+++ b/components/layout/Layout.tsx
@@ -0,0 +1,32 @@
+import { AppShell, Center, createStyles } from '@mantine/core';
+import { Header } from './Header';
+import { Footer } from './Footer';
+
+const useStyles = createStyles((theme) => ({
+  main: {
+    [theme.fn.smallerThan('md')]: {
+      maxWidth: '90vw',
+    },
+    [theme.fn.largerThan('md')]: {
+      width: 1200,
+    },
+  },
+}));
+
+export default function Layout({ children, style }: any) {
+  const { classes, cx } = useStyles();
+  return (
+    <AppShell header={<Header links={[]} />} footer={<Footer links={[]} />}>
+      <Center>
+        <main
+          className={cx(classes.main)}
+          style={{
+            ...style,
+          }}
+        >
+          {children}
+        </main>
+      </Center>
+    </AppShell>
+  );
+}
--- a/components/layout/Logo.tsx
+++ b/components/layout/Logo.tsx
@@ -0,0 +1,15 @@
+import { Text } from '@mantine/core';
+import * as React from 'react';
+
+export function Logo({ style }: any) {
+  return (
+    <Text
+      sx={style}
+      weight="bold"
+      variant="gradient"
+      gradient={{ from: 'red', to: 'orange', deg: 145 }}
+    >
+      MyHomePage
+    </Text>
+  );
+}
--- a/package.json
+++ b/package.json
@@ -28,10 +28,12 @@
    "@modulz/radix-icons": "^4.0.0",
    "cookies-next": "^2.0.4",
    "dayjs": "^1.11.0",
-    "next": "12.1.4",
+    "framer-motion": "^6.3.1",
+    "next": "12.1.5-canary.4",
    "prism-react-renderer": "^1.3.1",
    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react-dom": "18.0.0",
+    "tabler-icons-react": "^1.46.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,6 +5,7 @@ import { getCookie, setCookies } from 'cookies-next';
 import Head from 'next/head';
 import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
+import Layout from '../components/layout/Layout';

 export default function App(props: AppProps & { colorScheme: ColorScheme }) {
  const { Component, pageProps } = props;
@@ -27,7 +28,9 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
        <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
          <NotificationsProvider>
-            <Component {...pageProps} />
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
          </NotificationsProvider>
        </MantineProvider>
      </ColorSchemeProvider>
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,11 +1,12 @@
 import { Welcome } from '../components/Welcome/Welcome';
 import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
+import AppShelf from '../components/AppShelf/AppShelf';
+import { Center } from '@mantine/core';

 export default function HomePage() {
  return (
    <>
-      <Welcome />
-      <ColorSchemeToggle />
+      <AppShelf/>
    </>
  );
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -1190,7 +1190,7 @@
  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==

-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6":
+"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.6":
  version "0.8.8"
  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -1660,10 +1660,10 @@
  dependencies:
    webpack-bundle-analyzer "4.3.0"

-"@next/env@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.4.tgz#5af629b43075281ecd7f87938802b7cf5b67e94b"
-  integrity sha512-7gQwotJDKnfMxxXd8xJ2vsX5AzyDxO3zou0+QOXX8/unypA6icw5+wf6A62yKZ6qQ4UZHHxS68pb6UV+wNneXg==
+"@next/env@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.5-canary.4.tgz#9b5e5108e2124edcddd5a7f9ddda7d244bd96c68"
+  integrity sha512-cXMjrodrFcQE38eELp6n2Q8zSnLiHVX88+CuW7QID2UDmillKNYW/OKYVjcB981wWz/OFM0UGIdf5KwA6IeDeA==

 "@next/eslint-plugin-next@^12.1.4":
  version "12.1.4"
@@ -1672,65 +1672,65 @@
  dependencies:
    glob "7.1.7"

-"@next/swc-android-arm-eabi@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.4.tgz#c3dae178b7c15ad627d2e9b8dfb38caecb5c4ac7"
-  integrity sha512-FJg/6a3s2YrUaqZ+/DJZzeZqfxbbWrynQMT1C5wlIEq9aDLXCFpPM/PiOyJh0ahxc0XPmi6uo38Poq+GJTuKWw==
+"@next/swc-android-arm-eabi@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.5-canary.4.tgz#9e25cd6abadbd9b0edb50cabe2daaab4061afea4"
+  integrity sha512-tt99U4bSgqPWbSsp0oyzol0fxwfLlsjlF9oSdwGlPOR2nQ91QpGtUsT5uyXlXyPBhjaCT5OS739GsT5IHoAEQg==

-"@next/swc-android-arm64@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.4.tgz#f320d60639e19ecffa1f9034829f2d95502a9a51"
-  integrity sha512-LXraazvQQFBgxIg3Htny6G5V5he9EK7oS4jWtMdTGIikmD/OGByOv8ZjLuVLZLtVm3UIvaAiGtlQSLecxJoJDw==
+"@next/swc-android-arm64@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.5-canary.4.tgz#93876e17fc4034ae15f74e111f77aab4fdbcecdf"
+  integrity sha512-LEX7por70dlKigcBWj8OfzU36pVTJ3C6r4Hrr3kKrS6zEstCJlUmUp9CLOUT4aJ1gDNym0p2AYwvsXShp/cxWA==

-"@next/swc-darwin-arm64@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.4.tgz#fd578278312613eddcf3aee26910100509941b63"
-  integrity sha512-SSST/dBymecllZxcqTCcSTCu5o1NKk9I+xcvhn/O9nH6GWjgvGgGkNqLbCarCa0jJ1ukvlBA138FagyrmZ/4rQ==
+"@next/swc-darwin-arm64@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.5-canary.4.tgz#1024cf80c4c76e0385e0e19dd775a2798e82f7ad"
+  integrity sha512-ddXvdzo6HrK8rU+A5AGy7iC0yjVi0Pzv9LjzqXmzoZDlKEB8PPnjop+HAsQJf/Kzk1Yw9CH7eNjQsMbi8HhX0w==

-"@next/swc-darwin-x64@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.4.tgz#ace5f80d8c8348efe194f6d7074c6213c52b3944"
-  integrity sha512-p1lwdX0TVjaoDXQVuAkjtxVBbCL/urgxiMCBwuPDO7TikpXtSRivi+mIzBj5q7ypgICFmIAOW3TyupXeoPRAnA==
+"@next/swc-darwin-x64@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.5-canary.4.tgz#56c536203c574909559a06e9e18695b2a876841d"
+  integrity sha512-AFN9Go6KF7kApDnxcwvMunPxrfMZMIEr8ud/GElpl/aBpEgoFj/MGol33xwBQc1NZGrY+7IjOeVCGe5jEqya/A==

-"@next/swc-linux-arm-gnueabihf@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.4.tgz#2bf2c83863635f19c71c226a2df936e001cce29c"
-  integrity sha512-67PZlgkCn3TDxacdVft0xqDCL7Io1/C4xbAs0+oSQ0xzp6OzN2RNpuKjHJrJgKd0DsE1XZ9sCP27Qv0591yfyg==
+"@next/swc-linux-arm-gnueabihf@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.5-canary.4.tgz#c30c196392b4413d2a8c7e5e8b4b7b21eb32aa68"
+  integrity sha512-GCzrV7K3sITb1nxlnTfI901firrXCOa/7uKoiUhMPPxP+xJVNu0EjwelgpobWfYgEBHqsa/uKBYURnKrh0/fZQ==

-"@next/swc-linux-arm64-gnu@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.4.tgz#d577190f641c9b4b463719dd6b8953b6ba9be8d9"
-  integrity sha512-OnOWixhhw7aU22TQdQLYrgpgFq0oA1wGgnjAiHJ+St7MLj82KTDyM9UcymAMbGYy6nG/TFOOHdTmRMtCRNOw0g==
+"@next/swc-linux-arm64-gnu@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.5-canary.4.tgz#f224cf0568ed56fe3f031f347c48bbcd205bd64b"
+  integrity sha512-LFxRvADEjSTIN+j+j5kuzmzZqloWo8VZi4Yl6/dooa7iBkRlViC28wtr6is1rqwrCp0J4PxL5Z6oGCPVJCez1Q==

-"@next/swc-linux-arm64-musl@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.4.tgz#e70ffe70393d8f9242deecdb282ce5a8fd588b14"
-  integrity sha512-UoRMzPZnsAavdWtVylYxH8DNC7Uy0i6RrvNwT4PyQVdfANBn2omsUkcH5lgS2O7oaz0nAYLk1vqyZDO7+tJotA==
+"@next/swc-linux-arm64-musl@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.5-canary.4.tgz#e16a7aa069c494bd39a20e1646a87db1bedc551f"
+  integrity sha512-5/YLEVy8vuSooulMq5V0D1zH9/wkU3beJ5yrmAOL8gLYQAo/wHfDoR3ORznMF2uZsMX6pQ6NeMFycL9GSwy7lg==

-"@next/swc-linux-x64-gnu@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.4.tgz#91498a130387fb1961902f2bee55863f8e910cff"
-  integrity sha512-nM+MA/frxlTLUKLJKorctdI20/ugfHRjVEEkcLp/58LGG7slNaP1E5d5dRA1yX6ISjPcQAkywas5VlGCg+uTvA==
+"@next/swc-linux-x64-gnu@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.5-canary.4.tgz#773627dbc681130021345b8fe3c89c58d61420be"
+  integrity sha512-Hy2poAkPya0dRhfeqeCeBcCSoYJbc3llwrTLEDyci0QrrrengxpQXghR2iNO/E+ycz2xVGqPfuMel3JCGTwRWA==

-"@next/swc-linux-x64-musl@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.4.tgz#78057b03c148c121553d41521ad38f6c732762ff"
-  integrity sha512-GoRHxkuW4u4yKw734B9SzxJwVdyEJosaZ62P7ifOwcujTxhgBt3y76V2nNUrsSuopcKI2ZTDjaa+2wd5zyeXbA==
+"@next/swc-linux-x64-musl@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.5-canary.4.tgz#373af8da463821081070023d790d4f98565a8b32"
+  integrity sha512-CP5uYJqG/0bWYIG+IuDXGAZ6e5LLrMXEyg0C/6XM/ATM5GrdF0GrVnw32KlzBKmMrEk1/BE0z+mxO0DbN3IfXw==

-"@next/swc-win32-arm64-msvc@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.4.tgz#05bbaabacac23b8edf6caa99eb86b17550a09051"
-  integrity sha512-6TQkQze0ievXwHJcVUrIULwCYVe3ccX6T0JgZ1SiMeXpHxISN7VJF/O8uSCw1JvXZYZ6ud0CJ7nfC5HXivgfPg==
+"@next/swc-win32-arm64-msvc@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.5-canary.4.tgz#3ca7331960140a0d387ed1b6079ecd0bd7178dc6"
+  integrity sha512-9orbZuIWxISoyvhf236wp8uRO9f0C0/voRZ6wb8DJNfL7n2ZTu6Rj9GXYhBbbFyidaPW44jdJ/yR7EFvAkJs/w==

-"@next/swc-win32-ia32-msvc@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.4.tgz#8fd2fb48f04a2802e51fc320878bf6b411c1c866"
-  integrity sha512-CsbX/IXuZ5VSmWCpSetG2HD6VO5FTsO39WNp2IR2Ut/uom9XtLDJAZqjQEnbUTLGHuwDKFjrIO3LkhtROXLE/g==
+"@next/swc-win32-ia32-msvc@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.5-canary.4.tgz#672bf5b50e686e2b824c7cbaf25920a3fce5f3f5"
+  integrity sha512-GJR5Q/SkHIVlBn8Lbo/HXzq/KyeXVYoHtaNOp+okYemdTAPmYLqTwH8F7+mVTKg6pzGdRXO3yUj6DM6lTSIMWQ==

-"@next/swc-win32-x64-msvc@12.1.4":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.4.tgz#a72ed44c9b1f850986a30fe36c59e01f8a79b5f3"
-  integrity sha512-JtYuWzKXKLDMgE/xTcFtCm1MiCIRaAc5XYZfYX3n/ZWSI1SJS/GMm+Su0SAHJgRFavJh6U/p998YwO/iGTIgqQ==
+"@next/swc-win32-x64-msvc@12.1.5-canary.4":
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.5-canary.4.tgz#644046929034530fd692faa8fab0cb1b418289a3"
+  integrity sha512-wsXqXj4g9CHagoQ78diYc44rl3Hyvsv/EPEJLoHZldnGLW5Y8jS/2rTQkN55Y5KqTVdO7HkEwp3oww22eRqYxQ==

 "@nodelib/fs.scandir@2.1.5":
  version "2.1.5"
@@ -6120,6 +6120,26 @@ fragment-cache@^0.2.1:
  dependencies:
    map-cache "^0.2.2"

+framer-motion@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.3.1.tgz#943216b90c7de77d3483359a0ef535ca4882a1f6"
+  integrity sha512-c4NX/XHkQIJdn9V+Yz55WZSPlpracyzFe50up5Vr/V4pxKA7q6t9WgISDo8VgQxuJf8vKPr01ka3UuUllw7zSg==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    popmotion "11.0.3"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fresh@0.5.2:
  version "0.5.2"
  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -6593,6 +6613,11 @@ he@^1.2.0:
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 highlight.js@^10.1.1, highlight.js@~10.7.0:
  version "10.7.3"
  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
@@ -8482,28 +8507,28 @@ nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
  resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.1.tgz#26c8a3cee6cc05fbcf1e333cd2fc3e003326c0b5"
  integrity sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==

-next@12.1.4:
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.1.4.tgz#597a9bdec7aec778b442c4f6d41afd2c64a54b23"
-  integrity sha512-DA4g97BM4Z0nKtDvCTm58RxdvoQyYzeg0AeVbh0N4Y/D8ELrNu47lQeEgRGF8hV4eQ+Sal90zxrJQQG/mPQ8CQ==
+next@12.1.5-canary.4:
+  version "12.1.5-canary.4"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.1.5-canary.4.tgz#8298484d505c2b1d7f2d739f2066726ec76e90b6"
+  integrity sha512-A8yrJQWU+5AXeA6Obp7MB2dXyLaKxJ2vstkaQ8FR7ZYs0ldRzjySE/TArBzM2w4utjJoLP1IKuu+49gGozT7Wg==
  dependencies:
-    "@next/env" "12.1.4"
+    "@next/env" "12.1.5-canary.4"
    caniuse-lite "^1.0.30001283"
    postcss "8.4.5"
    styled-jsx "5.0.1"
  optionalDependencies:
-    "@next/swc-android-arm-eabi" "12.1.4"
-    "@next/swc-android-arm64" "12.1.4"
-    "@next/swc-darwin-arm64" "12.1.4"
-    "@next/swc-darwin-x64" "12.1.4"
-    "@next/swc-linux-arm-gnueabihf" "12.1.4"
-    "@next/swc-linux-arm64-gnu" "12.1.4"
-    "@next/swc-linux-arm64-musl" "12.1.4"
-    "@next/swc-linux-x64-gnu" "12.1.4"
-    "@next/swc-linux-x64-musl" "12.1.4"
-    "@next/swc-win32-arm64-msvc" "12.1.4"
-    "@next/swc-win32-ia32-msvc" "12.1.4"
-    "@next/swc-win32-x64-msvc" "12.1.4"
+    "@next/swc-android-arm-eabi" "12.1.5-canary.4"
+    "@next/swc-android-arm64" "12.1.5-canary.4"
+    "@next/swc-darwin-arm64" "12.1.5-canary.4"
+    "@next/swc-darwin-x64" "12.1.5-canary.4"
+    "@next/swc-linux-arm-gnueabihf" "12.1.5-canary.4"
+    "@next/swc-linux-arm64-gnu" "12.1.5-canary.4"
+    "@next/swc-linux-arm64-musl" "12.1.5-canary.4"
+    "@next/swc-linux-x64-gnu" "12.1.5-canary.4"
+    "@next/swc-linux-x64-musl" "12.1.5-canary.4"
+    "@next/swc-win32-arm64-msvc" "12.1.5-canary.4"
+    "@next/swc-win32-ia32-msvc" "12.1.5-canary.4"
+    "@next/swc-win32-x64-msvc" "12.1.5-canary.4"

 no-case@^3.0.4:
  version "3.0.4"
@@ -9126,6 +9151,16 @@ polished@^4.0.5:
  dependencies:
    "@babel/runtime" "^7.16.7"

+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 posix-character-classes@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -10612,6 +10647,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
  dependencies:
    inline-style-parser "0.1.1"

+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 styled-jsx@5.0.1:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.1.tgz#78fecbbad2bf95ce6cd981a08918ce4696f5fc80"
@@ -10676,6 +10719,11 @@ synchronous-promise@^2.0.15:
  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
  integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==

+tabler-icons-react@^1.46.0:
+  version "1.46.0"
+  resolved "https://registry.yarnpkg.com/tabler-icons-react/-/tabler-icons-react-1.46.0.tgz#957215030bd5ce0ce2d2a93ed5e52b85f5ff95f7"
+  integrity sha512-tQt686DPfGRXxdCMg63gEO7KP1mcmx0JvzgAq5HKkD3ts9HSL9AAaGAGpa/IJdD0tLaoviegdpv6MOp8DsAr9Q==
+
 tapable@^1.0.0, tapable@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -10968,6 +11016,11 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.3.0:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==

+tslib@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tsutils@^3.21.0:
  version "3.21.0"
  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"