code review BookCard

ShareBookCode · Feb 1, 2025 · d21733a · d21733a
1 parent d37e898
commit d21733a
Show file tree

Hide file tree

Showing 29 changed files with 393 additions and 397 deletions.
diff --git a/README.md b/README.md
@@ -18,11 +18,11 @@ export default tseslint.config({
   languageOptions: {
     // other options...
     parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
       tsconfigRootDir: import.meta.dirname,
     },
   },
-})
+});
 ```
 
 - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
@@ -31,11 +31,11 @@ export default tseslint.config({
 
 ```js
 // eslint.config.js
-import react from 'eslint-plugin-react'
+import react from "eslint-plugin-react";
 
 export default tseslint.config({
   // Set the react version
-  settings: { react: { version: '18.3' } },
+  settings: { react: { version: "18.3" } },
   plugins: {
     // Add the react plugin
     react,
@@ -44,7 +44,7 @@ export default tseslint.config({
     // other rules...
     // Enable its recommended rules
     ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
+    ...react.configs["jsx-runtime"].rules,
   },
-})
+});
 ```
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,28 +1,28 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-)
+);
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <!--home-head-->
   </head>
   <body>
-  <div id="sharebook"><!--home-body--></div>
-  <script src="./src/entry-client.tsx" type="module"></script>
+    <div id="sharebook"><!--home-body--></div>
+    <script src="./src/entry-client.tsx" type="module"></script>
   </body>
 </html>
diff --git a/src/antdConfig.ts b/src/antdConfig.ts
@@ -1,4 +1,4 @@
-import type {ThemeConfig} from "antd";
+import type { ThemeConfig } from "antd";
 
 export const antdThemeConfig: ThemeConfig = {
   cssVar: true,
@@ -18,7 +18,7 @@ export const antdThemeConfig: ThemeConfig = {
     },
     Input: {
       colorText: "#000000",
-      activeBorderColor: "rgb(42, 127, 255, 80)",
+      activeBorderColor: "rgba(42, 127, 255, 80)",
       fontFamily: "Onest-Regular",
       hoverBorderColor: "transparent",
       colorBorder: "transparent",
@@ -30,15 +30,15 @@ export const antdThemeConfig: ThemeConfig = {
     Dropdown: {
       paddingBlock: 6,
       controlPaddingHorizontal: 10,
-      boxShadowSecondary: "0px 2px 7px rgb(0, 0, 0, 0.15)",
+      boxShadowSecondary: "0px 2px 7px rgba(0, 0, 0, 0.15)",
       fontFamily: "Onest-Regular",
       colorBgElevated: "#FFFFFF",
     },
     Card: {
       paddingLG: 0,
       borderRadiusLG: 10,
-      boxShadow: "0px 20px 7px rgb(42, 127, 255, 80)",
-      boxShadowTertiary: "0px 2px 7px rgb(42, 127, 255, 80)",
+      boxShadow: "0px 20px 7px rgba(42, 127, 255, 80)",
+      boxShadowTertiary: "0px 2px 7px rgba(42, 127, 255, 80)",
       colorBgContainer: "#FFFFFF",
     },
   },

diff --git a/src/components/Header/components/Avatar.tsx b/src/components/Header/components/Avatar.tsx
@@ -1,6 +1,6 @@
 import styles from "../header.module.scss";
-import {Button} from "antd";
-import {SvgAvatar} from "../svg/SvgAvatar.tsx";
+import { Button } from "antd";
+import { SvgAvatar } from "../svg/SvgAvatar.tsx";
 
 export function Avatar() {
   return (

diff --git a/src/components/Header/components/Logo.tsx b/src/components/Header/components/Logo.tsx
@@ -1,5 +1,5 @@
-import {Link} from "react-router";
-import {SvgLogo} from "../svg/SvgLogo.tsx";
+import { Link } from "react-router";
+import { SvgLogo } from "../svg/SvgLogo.tsx";
 import styles from "../header.module.scss";
 
 export function Logo() {

diff --git a/src/components/Header/components/Nav.tsx b/src/components/Header/components/Nav.tsx
@@ -1,5 +1,5 @@
 import styles from "../header.module.scss";
-import {NavLink} from "react-router";
+import { NavLink } from "react-router";
 
 interface MainMenuItem {
   title: string;

diff --git a/src/components/Header/components/Search.tsx b/src/components/Header/components/Search.tsx
@@ -1,6 +1,6 @@
 import styles from "../header.module.scss";
-import {Input} from "antd";
-import {SvgSearch} from "../svg/SvgSearch.tsx";
+import { Input } from "antd";
+import { SvgSearch } from "../svg/SvgSearch.tsx";
 
 export function Search() {
   return (

diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss
@@ -1,90 +1,88 @@
 .header {
-	background: rgb(250, 250, 250, 80%);
-	border-bottom: 1px solid var(--ant-color-bg-container);
-	display: flex;
-	justify-content: center;
-	height: 66px;
+  background: rgba(250, 250, 250, 80%);
+  border-bottom: 1px solid var(--ant-color-bg-container);
+  display: flex;
+  justify-content: center;
+  height: 66px;
 }
 
 .container {
-	max-width: 1400px;
-	display: flex;
-	align-items: center;
-	flex: 1;
-	padding: 0 35px 0 35px;
-
-	font-family: 'Onest-Regular', sans-serif;
-	font-size: 15px;
+  max-width: 1330px;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: 0 35px 0;
+
+  font-family: "Onest-Regular", sans-serif;
+  font-size: 15px;
 }
 
 .logo {
-	margin-bottom: 2px;
-	line-height: 0;
+  margin-bottom: 2px;
+  line-height: 0;
 }
 
 .navBar {
-	display: flex;
-	justify-content: center;
-	list-style: none;
-	margin: 0;
-
-	padding: 0 40px 0;
-	gap: 30px;
-
-	.menuItem {
-		cursor: pointer;
-		color: var(--ant-color-text-placeholder);
-
-		&:hover {
-			color: var(--ant-color-text-base);
-		}
-	}
-
-	.activeMenuItem {
-		font-family: 'Onest-Medium', sans-serif;
-		color: var(--ant-color-text-base);
-	}
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+
+  padding: 0 40px 0;
+  gap: 30px;
+
+  .menuItem {
+    cursor: pointer;
+    color: var(--ant-color-text-placeholder);
+
+    &:hover {
+      color: var(--ant-color-text-base);
+    }
+  }
+
+  .activeMenuItem {
+    font-family: "Onest-Medium", sans-serif;
+    color: var(--ant-color-text-base);
+  }
 }
 
 .blank {
-	flex: 1;
+  flex: 1;
 }
 
 .containerSearch {
-	width: 403px
+  width: 403px;
 }
 
 .miniContainerSearch {
-	width: 395px;
-	display: flex;
-	align-items: center;
-
-	svg {
-		position: relative;
-		left: -30px;
-		pointer-events: none;
-	}
+  width: 395px;
+  display: flex;
+  align-items: center;
+
+  svg {
+    position: relative;
+    left: -30px;
+    pointer-events: none;
+  }
 }
 
 .search {
-	width: 378px;
-	height: 36px;
-	padding-left: 15px;
-	border-radius: 38px;
-
-	background: #F1F4F6;
-	outline: none;
-	border: none;
-
-	&::placeholder {
-		color: var(--ant-color-text-placeholder);
-	}
+  width: 378px;
+  height: 36px;
+  padding-left: 15px;
+  border-radius: 38px;
+
+  background: #f1f4f6;
+  outline: none;
+  border: none;
+
+  &::placeholder {
+    color: var(--ant-color-text-placeholder);
+  }
 }
 
 .avatar {
-	max-width: 36px;
-	min-width: 36px !important;
-	height: 36px;
+  max-width: 36px;
+  min-width: 36px !important;
+  height: 36px;
 }
-
-
diff --git a/src/entry-client.tsx b/src/entry-client.tsx
@@ -1,7 +1,7 @@
-import {hydrateRoot} from "react-dom/client";
-import {App} from "./App.tsx";
+import { hydrateRoot } from "react-dom/client";
+import { App } from "./App.tsx";
 
 hydrateRoot(
   document.getElementById("sharebook") as HTMLElement,
-  <App location={location.href}/>,
-)
+  <App location={location.href} />,
+);
diff --git a/src/entry-server.tsx b/src/entry-server.tsx
@@ -1,14 +1,14 @@
-import {renderToString} from "react-dom/server";
-import {App} from "./App";
-import {createCache, extractStyle} from "@ant-design/cssinjs";
+import { renderToString } from "react-dom/server";
+import { App } from "./App";
+import { createCache, extractStyle } from "@ant-design/cssinjs";
 import type Entity from "@ant-design/cssinjs/es/Cache";
 
 export function render(location: string) {
   const cache: Entity = createCache();
 
-  const body = renderToString(<App cache={cache} location={location}/>);
+  const body = renderToString(<App cache={cache} location={location} />);
 
   const head = extractStyle(cache);
 
-  return {body, head};
+  return { body, head };
 }
diff --git a/src/index.css b/src/index.css
@@ -1,14 +1,14 @@
 @font-face {
-	font-family: 'Literata-Medium';
-	src: url('./fonts/Literata-Medium.woff') format('woff');
+  font-family: "Literata-Medium";
+  src: url("./fonts/Literata-Medium.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Onest-Medium';
-	src: url('./fonts/Onest-Medium.woff') format('woff');
+  font-family: "Onest-Medium";
+  src: url("./fonts/Onest-Medium.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Onest-Regular';
-	src: url('./fonts/Onest-Regular.woff') format('woff');
-}
+  font-family: "Onest-Regular";
+  src: url("./fonts/Onest-Regular.woff") format("woff");
+}
diff --git a/src/pages/auth/auth.module.scss b/src/pages/auth/auth.module.scss
@@ -5,4 +5,4 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-}
+}