feat: rewrite app system

apps/main/src/components/Button/Button.module.css

@@ -0,0 +1,20 @@
+.root {
+    display: inline-block;
+    background-color: hsl(208, 46%, 52%);
+    cursor: pointer;
+    padding: 10px 15px;
+    border-radius: 5px;
+    color: hsl(208, 46%, 15%);;
+    font-weight: bolder;
+    font-size: 1.2em;
+}
+
+.root:hover {
+    background-color: hsl(208, 60%, 52%);
+    color: hsl(208, 60%, 15%);;;
+}
+
+.root > a {
+    text-decoration: none;
+    color: inherit;
+}

apps/main/src/components/Button/Button.tsx

@@ -0,0 +1,16 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import styles from "./Button.module.css";
+export interface ButtonProps extends PropsWithChildren {
+  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+}
+
+export const Button: FunctionComponent<ButtonProps> = ({
+  children,
+  onClick,
+}) => {
+  return (
+    <div className={styles.root} onClick={onClick}>
+      {children}
+    </div>
+  );
+};

apps/main/src/components/Layout/Layout.module.css

@@ -0,0 +1,17 @@
+.root {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    width: 90%;
+}
+
+@media only screen and (max-width: 768px) {
+    .container {
+        width: 90%;
+        height: 90%;
+    }
+}

apps/main/src/components/Layout/Layout.tsx

@@ -0,0 +1,15 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import styles from "./Layout.module.css";
+import { Outlet } from "react-router-dom";
+
+export interface LayoutProps extends PropsWithChildren {}
+
+export const Layout: FunctionComponent<LayoutProps> = ({ children }) => {
+  return (
+    <div className={styles.root}>
+      <div className={styles.container}>
+        <Outlet />
+      </div>
+    </div>
+  );
+};

apps/main/src/components/Panel/Panel.module.css

@@ -0,0 +1,10 @@
+.root {
+    display: block;
+    background-color: #fff;
+    border-radius: 15px;
+    box-shadow: 10px 10px 10px #33333361;
+    position: relative;
+    padding: 30px 30px 30px 30px;
+    min-width: 33%;
+    color: #333;
+}

apps/main/src/components/Panel/Panel.tsx

@@ -0,0 +1,7 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import styles from "./Panel.module.css";
+export interface PanelProps extends PropsWithChildren {}
+
+export const Panel: FunctionComponent<PanelProps> = ({ children }) => {
+  return <div className={styles.root}>{children}</div>;
+};

apps/main/src/components/Tabs/Tabs.module.css

@@ -0,0 +1,3 @@
+.root {
+   
+}

apps/main/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,7 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import styles from "./Tabs.module.css";
+export interface TabsProps extends PropsWithChildren {}
+
+export const Tabs: FunctionComponent<TabsProps> = ({ children }) => {
+  return <div className={styles.root}>Tabs</div>;
+};