chore: config and basic layout

web/package.json

@@ -11,13 +11,16 @@
     "dev": "NODE_ENV=development webpack serve"
   },
   "dependencies": {
-    "linaria": "^3.0.0-beta.2",
+    "clsx": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "socket.io-client": "^4.1.2",
     "tailwindcss": "^2.2.4"
   },
   "devDependencies": {
+    "@types/mini-css-extract-plugin": "^1.4.3",
     "@types/node": "^15.12.5",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
@@ -27,6 +30,7 @@
     "css-loader": "^5.2.6",
     "esbuild-loader": "^2.13.1",
     "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "^1.6.2",
     "postcss": "^8.3.5",
     "postcss-loader": "^6.1.0",
     "style-loader": "^3.0.0",

web/src/App.tsx

@@ -1,5 +1,24 @@
 import React from 'react';
 
+const Icon: React.FC = React.memo(() => {
+  return (
+    <div className="w-10 h-10 hover:rounded-sm bg-gray-300 mb-2 transition-all rounded-1/2 cursor-pointer"></div>
+  );
+});
+
 export const App: React.FC = React.memo(() => {
-  return <div className="m-4">Hello World</div>;
+  return (
+    <div className="flex h-screen w-screen">
+      <div className="w-16 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
+        <Icon />
+        <div className="h-px w-full bg-white mt-4 mb-4"></div>
+        <Icon />
+        <Icon />
+        <Icon />
+        <Icon />
+      </div>
+      <div className="w-56 bg-gray-800"></div>
+      <div className="flex-auto bg-gray-700"></div>
+    </div>
+  );
 });

web/tailwind.config.js

@@ -8,8 +8,16 @@ module.exports = {
   },
   darkMode: 'class', // or 'media'
   theme: {
-    extend: {},
+    extend: {
+      borderRadius: {
+        "1/2": '50%'
+      }
+    },
+  },
+  variants: {
+    extend: {
+      borderRadius: ['hover'],
+    },
   },
-  variants: {},
   plugins: [],
 };

web/webpack.config.ts

@@ -6,6 +6,7 @@ import type { Configuration } from 'webpack';
 import type WebpackDevServer from 'webpack-dev-server';
 import path from 'path';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 const ROOT_PATH = path.resolve(__dirname, './');
 const DIST_PATH = path.resolve(ROOT_PATH, './dist');
@@ -17,8 +18,8 @@ declare module 'webpack' {
   }
 }
 
-const mode =
-  process.env.NODE_ENV === 'development' ? 'development' : 'production';
+const isDev = process.env.NODE_ENV === 'development';
+const mode = isDev ? 'development' : 'production';
 
 const config: Configuration = {
   mode,
@@ -47,8 +48,15 @@ const config: Configuration = {
       {
         test: /\.css$/,
         use: [
-          { loader: 'style-loader' },
-          { loader: 'css-loader' },
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: process.env.NODE_ENV !== 'production',
+            },
+          },
           {
             loader: 'postcss-loader',
             options: {
@@ -71,6 +79,7 @@ const config: Configuration = {
       hash: true,
       template: path.resolve(ROOT_PATH, './assets/template.html'),
     }),
+    new MiniCssExtractPlugin({ filename: 'styles-[contenthash].css' }),
   ],
 };