mirror of
https://github.com/usememos/memos.git
synced 2024-09-11 12:05:29 +03:00
chore: replace classnames with clsx
This commit is contained in:
Steven
parent
1b291422e7
commit
d8aeec993c
@ -14,7 +14,7 @@
|
||||
"@matejmazur/react-katex": "^3.1.3",
|
||||
"@mui/joy": "5.0.0-beta.32",
|
||||
"@reduxjs/toolkit": "^2.2.3",
|
||||
"classnames": "^2.5.1",
|
||||
"clsx": "^2.1.1",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"fuse.js": "^7.0.0",
|
||||
"highlight.js": "^11.9.0",
|
||||
@ -49,7 +49,7 @@
|
||||
"@types/textarea-caret": "^3.0.3",
|
||||
"@types/uuid": "^9.0.8",
|
||||
"@typescript-eslint/eslint-plugin": "^7.7.0",
|
||||
"@typescript-eslint/parser": "^6.21.0",
|
||||
"@typescript-eslint/parser": "^7.0.0",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
|
||||
@ -26,9 +26,9 @@ importers:
|
||||
'@reduxjs/toolkit':
|
||||
specifier: ^2.2.3
|
||||
version: 2.2.3(react-redux@9.1.1(@types/react@18.2.79)(react@18.2.0)(redux@5.0.1))(react@18.2.0)
|
||||
classnames:
|
||||
specifier: ^2.5.1
|
||||
version: 2.5.1
|
||||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
copy-to-clipboard:
|
||||
specifier: ^3.3.3
|
||||
version: 3.3.3
|
||||
@ -125,10 +125,10 @@ importers:
|
||||
version: 9.0.8
|
||||
'@typescript-eslint/eslint-plugin':
|
||||
specifier: ^7.7.0
|
||||
version: 7.7.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
|
||||
version: 7.7.0(@typescript-eslint/parser@7.7.1(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
|
||||
'@typescript-eslint/parser':
|
||||
specifier: ^6.21.0
|
||||
version: 6.21.0(eslint@8.57.0)(typescript@5.4.5)
|
||||
specifier: ^7.0.0
|
||||
version: 7.7.1(eslint@8.57.0)(typescript@5.4.5)
|
||||
'@vitejs/plugin-react':
|
||||
specifier: ^4.2.1
|
||||
version: 4.2.1(vite@5.2.9(@types/node@20.12.7)(less@4.2.0))
|
||||
@ -1047,24 +1047,24 @@ packages:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
'@typescript-eslint/parser@6.21.0':
|
||||
resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
|
||||
engines: {node: ^16.0.0 || >=18.0.0}
|
||||
'@typescript-eslint/parser@7.7.1':
|
||||
resolution: {integrity: sha512-vmPzBOOtz48F6JAGVS/kZYk4EkXao6iGrD838sp1w3NQQC0W8ry/q641KU4PrG7AKNAf56NOcR8GOpH8l9FPCw==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
peerDependencies:
|
||||
eslint: ^7.0.0 || ^8.0.0
|
||||
eslint: ^8.56.0
|
||||
typescript: '*'
|
||||
peerDependenciesMeta:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
'@typescript-eslint/scope-manager@6.21.0':
|
||||
resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
|
||||
engines: {node: ^16.0.0 || >=18.0.0}
|
||||
|
||||
'@typescript-eslint/scope-manager@7.7.0':
|
||||
resolution: {integrity: sha512-/8INDn0YLInbe9Wt7dK4cXLDYp0fNHP5xKLHvZl3mOT5X17rK/YShXaiNmorl+/U4VKCVIjJnx4Ri5b0y+HClw==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
|
||||
'@typescript-eslint/scope-manager@7.7.1':
|
||||
resolution: {integrity: sha512-PytBif2SF+9SpEUKynYn5g1RHFddJUcyynGpztX3l/ik7KmZEv19WCMhUBkHXPU9es/VWGD3/zg3wg90+Dh2rA==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
|
||||
'@typescript-eslint/type-utils@7.7.0':
|
||||
resolution: {integrity: sha512-bOp3ejoRYrhAlnT/bozNQi3nio9tIgv3U5C0mVDdZC7cpcQEDZXvq8inrHYghLVwuNABRqrMW5tzAv88Vy77Sg==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
@ -1075,25 +1075,25 @@ packages:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
'@typescript-eslint/types@6.21.0':
|
||||
resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
|
||||
engines: {node: ^16.0.0 || >=18.0.0}
|
||||
|
||||
'@typescript-eslint/types@7.7.0':
|
||||
resolution: {integrity: sha512-G01YPZ1Bd2hn+KPpIbrAhEWOn5lQBrjxkzHkWvP6NucMXFtfXoevK82hzQdpfuQYuhkvFDeQYbzXCjR1z9Z03w==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
|
||||
'@typescript-eslint/typescript-estree@6.21.0':
|
||||
resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
|
||||
engines: {node: ^16.0.0 || >=18.0.0}
|
||||
'@typescript-eslint/types@7.7.1':
|
||||
resolution: {integrity: sha512-AmPmnGW1ZLTpWa+/2omPrPfR7BcbUU4oha5VIbSbS1a1Tv966bklvLNXxp3mrbc+P2j4MNOTfDffNsk4o0c6/w==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
|
||||
'@typescript-eslint/typescript-estree@7.7.0':
|
||||
resolution: {integrity: sha512-8p71HQPE6CbxIBy2kWHqM1KGrC07pk6RJn40n0DSc6bMOBBREZxSDJ+BmRzc8B5OdaMh1ty3mkuWRg4sCFiDQQ==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
peerDependencies:
|
||||
typescript: '*'
|
||||
peerDependenciesMeta:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
'@typescript-eslint/typescript-estree@7.7.0':
|
||||
resolution: {integrity: sha512-8p71HQPE6CbxIBy2kWHqM1KGrC07pk6RJn40n0DSc6bMOBBREZxSDJ+BmRzc8B5OdaMh1ty3mkuWRg4sCFiDQQ==}
|
||||
'@typescript-eslint/typescript-estree@7.7.1':
|
||||
resolution: {integrity: sha512-CXe0JHCXru8Fa36dteXqmH2YxngKJjkQLjxzoj6LYwzZ7qZvgsLSc+eqItCrqIop8Vl2UKoAi0StVWu97FQZIQ==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
peerDependencies:
|
||||
typescript: '*'
|
||||
@ -1107,14 +1107,14 @@ packages:
|
||||
peerDependencies:
|
||||
eslint: ^8.56.0
|
||||
|
||||
'@typescript-eslint/visitor-keys@6.21.0':
|
||||
resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
|
||||
engines: {node: ^16.0.0 || >=18.0.0}
|
||||
|
||||
'@typescript-eslint/visitor-keys@7.7.0':
|
||||
resolution: {integrity: sha512-h0WHOj8MhdhY8YWkzIF30R379y0NqyOHExI9N9KCzvmu05EgG4FumeYa3ccfKUSphyWkWQE1ybVrgz/Pbam6YA==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
|
||||
'@typescript-eslint/visitor-keys@7.7.1':
|
||||
resolution: {integrity: sha512-gBL3Eq25uADw1LQ9kVpf3hRM+DWzs0uZknHYK3hq4jcTPqVCClHGDnB6UUUV2SFeBeA4KWHWbbLqmbGcZ4FYbw==}
|
||||
engines: {node: ^18.18.0 || >=20.0.0}
|
||||
|
||||
'@ungap/structured-clone@1.2.0':
|
||||
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
|
||||
|
||||
@ -1277,11 +1277,8 @@ packages:
|
||||
resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
|
||||
engines: {node: '>= 8.10.0'}
|
||||
|
||||
classnames@2.5.1:
|
||||
resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
|
||||
|
||||
clsx@2.1.0:
|
||||
resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
|
||||
clsx@2.1.1:
|
||||
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
color-convert@1.9.3:
|
||||
@ -2282,10 +2279,6 @@ packages:
|
||||
minimatch@3.1.2:
|
||||
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
|
||||
|
||||
minimatch@9.0.3:
|
||||
resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
|
||||
engines: {node: '>=16 || 14 >=14.17'}
|
||||
|
||||
minimatch@9.0.4:
|
||||
resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
|
||||
engines: {node: '>=16 || 14 >=14.17'}
|
||||
@ -3507,7 +3500,7 @@ snapshots:
|
||||
'@mui/types': 7.2.14(@types/react@18.2.79)
|
||||
'@mui/utils': 5.15.14(@types/react@18.2.79)(react@18.2.0)
|
||||
'@popperjs/core': 2.11.8
|
||||
clsx: 2.1.0
|
||||
clsx: 2.1.1
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
@ -3524,7 +3517,7 @@ snapshots:
|
||||
'@mui/system': 5.15.15(@emotion/react@11.11.4(@types/react@18.2.79)(react@18.2.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.79)(react@18.2.0))(@types/react@18.2.79)(react@18.2.0))(@types/react@18.2.79)(react@18.2.0)
|
||||
'@mui/types': 7.2.14(@types/react@18.2.79)
|
||||
'@mui/utils': 5.15.14(@types/react@18.2.79)(react@18.2.0)
|
||||
clsx: 2.1.0
|
||||
clsx: 2.1.1
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
@ -3560,7 +3553,7 @@ snapshots:
|
||||
'@mui/styled-engine': 5.15.14(@emotion/react@11.11.4(@types/react@18.2.79)(react@18.2.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.79)(react@18.2.0))(@types/react@18.2.79)(react@18.2.0))(react@18.2.0)
|
||||
'@mui/types': 7.2.14(@types/react@18.2.79)
|
||||
'@mui/utils': 5.15.14(@types/react@18.2.79)(react@18.2.0)
|
||||
clsx: 2.1.0
|
||||
clsx: 2.1.1
|
||||
csstype: 3.1.3
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
@ -3896,10 +3889,10 @@ snapshots:
|
||||
|
||||
'@types/uuid@9.0.8': {}
|
||||
|
||||
'@typescript-eslint/eslint-plugin@7.7.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
|
||||
'@typescript-eslint/eslint-plugin@7.7.0(@typescript-eslint/parser@7.7.1(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
|
||||
dependencies:
|
||||
'@eslint-community/regexpp': 4.10.0
|
||||
'@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
|
||||
'@typescript-eslint/parser': 7.7.1(eslint@8.57.0)(typescript@5.4.5)
|
||||
'@typescript-eslint/scope-manager': 7.7.0
|
||||
'@typescript-eslint/type-utils': 7.7.0(eslint@8.57.0)(typescript@5.4.5)
|
||||
'@typescript-eslint/utils': 7.7.0(eslint@8.57.0)(typescript@5.4.5)
|
||||
@ -3916,12 +3909,12 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5)':
|
||||
'@typescript-eslint/parser@7.7.1(eslint@8.57.0)(typescript@5.4.5)':
|
||||
dependencies:
|
||||
'@typescript-eslint/scope-manager': 6.21.0
|
||||
'@typescript-eslint/types': 6.21.0
|
||||
'@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5)
|
||||
'@typescript-eslint/visitor-keys': 6.21.0
|
||||
'@typescript-eslint/scope-manager': 7.7.1
|
||||
'@typescript-eslint/types': 7.7.1
|
||||
'@typescript-eslint/typescript-estree': 7.7.1(typescript@5.4.5)
|
||||
'@typescript-eslint/visitor-keys': 7.7.1
|
||||
debug: 4.3.4
|
||||
eslint: 8.57.0
|
||||
optionalDependencies:
|
||||
@ -3929,16 +3922,16 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/scope-manager@6.21.0':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 6.21.0
|
||||
'@typescript-eslint/visitor-keys': 6.21.0
|
||||
|
||||
'@typescript-eslint/scope-manager@7.7.0':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 7.7.0
|
||||
'@typescript-eslint/visitor-keys': 7.7.0
|
||||
|
||||
'@typescript-eslint/scope-manager@7.7.1':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 7.7.1
|
||||
'@typescript-eslint/visitor-keys': 7.7.1
|
||||
|
||||
'@typescript-eslint/type-utils@7.7.0(eslint@8.57.0)(typescript@5.4.5)':
|
||||
dependencies:
|
||||
'@typescript-eslint/typescript-estree': 7.7.0(typescript@5.4.5)
|
||||
@ -3951,18 +3944,18 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/types@6.21.0': {}
|
||||
|
||||
'@typescript-eslint/types@7.7.0': {}
|
||||
|
||||
'@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.5)':
|
||||
'@typescript-eslint/types@7.7.1': {}
|
||||
|
||||
'@typescript-eslint/typescript-estree@7.7.0(typescript@5.4.5)':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 6.21.0
|
||||
'@typescript-eslint/visitor-keys': 6.21.0
|
||||
'@typescript-eslint/types': 7.7.0
|
||||
'@typescript-eslint/visitor-keys': 7.7.0
|
||||
debug: 4.3.4
|
||||
globby: 11.1.0
|
||||
is-glob: 4.0.3
|
||||
minimatch: 9.0.3
|
||||
minimatch: 9.0.4
|
||||
semver: 7.6.0
|
||||
ts-api-utils: 1.3.0(typescript@5.4.5)
|
||||
optionalDependencies:
|
||||
@ -3970,10 +3963,10 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/typescript-estree@7.7.0(typescript@5.4.5)':
|
||||
'@typescript-eslint/typescript-estree@7.7.1(typescript@5.4.5)':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 7.7.0
|
||||
'@typescript-eslint/visitor-keys': 7.7.0
|
||||
'@typescript-eslint/types': 7.7.1
|
||||
'@typescript-eslint/visitor-keys': 7.7.1
|
||||
debug: 4.3.4
|
||||
globby: 11.1.0
|
||||
is-glob: 4.0.3
|
||||
@ -3999,16 +3992,16 @@ snapshots:
|
||||
- supports-color
|
||||
- typescript
|
||||
|
||||
'@typescript-eslint/visitor-keys@6.21.0':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 6.21.0
|
||||
eslint-visitor-keys: 3.4.3
|
||||
|
||||
'@typescript-eslint/visitor-keys@7.7.0':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 7.7.0
|
||||
eslint-visitor-keys: 3.4.3
|
||||
|
||||
'@typescript-eslint/visitor-keys@7.7.1':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 7.7.1
|
||||
eslint-visitor-keys: 3.4.3
|
||||
|
||||
'@ungap/structured-clone@1.2.0': {}
|
||||
|
||||
'@vitejs/plugin-react@4.2.1(vite@5.2.9(@types/node@20.12.7)(less@4.2.0))':
|
||||
@ -4212,9 +4205,7 @@ snapshots:
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.3
|
||||
|
||||
classnames@2.5.1: {}
|
||||
|
||||
clsx@2.1.0: {}
|
||||
clsx@2.1.1: {}
|
||||
|
||||
color-convert@1.9.3:
|
||||
dependencies:
|
||||
@ -5437,10 +5428,6 @@ snapshots:
|
||||
dependencies:
|
||||
brace-expansion: 1.1.11
|
||||
|
||||
minimatch@9.0.3:
|
||||
dependencies:
|
||||
brace-expansion: 2.0.1
|
||||
|
||||
minimatch@9.0.4:
|
||||
dependencies:
|
||||
brace-expansion: 2.0.1
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { getNormalizedDateString, getDateWithOffset } from "@/helpers/datetime";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
@ -47,7 +47,7 @@ const ActivityCalendar = (props: Props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames("w-36 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
|
||||
<div className={clsx("w-36 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
|
||||
{days.map((day, index) => {
|
||||
const date = getNormalizedDateString(
|
||||
getDateWithOffset(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`),
|
||||
@ -58,7 +58,7 @@ const ActivityCalendar = (props: Props) => {
|
||||
return day ? (
|
||||
<Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"w-4 h-4 text-[9px] rounded-md flex justify-center items-center border border-transparent",
|
||||
getCellAdditionalStyles(count, maxCount),
|
||||
isToday && "border-gray-600 dark:!border-gray-500",
|
||||
@ -71,7 +71,7 @@ const ActivityCalendar = (props: Props) => {
|
||||
) : (
|
||||
<div
|
||||
key={`${date}-${index}`}
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"shrink-0 opacity-30 w-4 h-4 rounded-md flex justify-center items-center border border-transparent",
|
||||
getCellAdditionalStyles(count, maxCount),
|
||||
)}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { CssVarsProvider } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { Provider } from "react-redux";
|
||||
@ -56,8 +56,8 @@ const BaseDialog: React.FC<Props> = (props: Props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames("dialog-wrapper", className)} onMouseDown={handleSpaceClicked}>
|
||||
<div ref={dialogContainerRef} className={classNames("dialog-container")} onMouseDown={(e) => e.stopPropagation()}>
|
||||
<div className={clsx("dialog-wrapper", className)} onMouseDown={handleSpaceClicked}>
|
||||
<div ref={dialogContainerRef} className={clsx("dialog-container")} onMouseDown={(e) => e.stopPropagation()}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import SearchBar from "@/components/SearchBar";
|
||||
import UsersSection from "./UsersSection";
|
||||
|
||||
@ -9,7 +9,7 @@ interface Props {
|
||||
const ExploreSidebar = (props: Props) => {
|
||||
return (
|
||||
<aside
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start",
|
||||
props.className,
|
||||
)}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import SearchBar from "@/components/SearchBar";
|
||||
import UserStatisticsView from "@/components/UserStatisticsView";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
@ -13,7 +13,7 @@ const HomeSidebar = (props: Props) => {
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start",
|
||||
props.className,
|
||||
)}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { activityServiceClient } from "@/grpcweb";
|
||||
@ -73,7 +73,7 @@ const MemoCommentMessage = ({ inbox }: Props) => {
|
||||
return (
|
||||
<div className="w-full flex flex-row justify-start items-start gap-3">
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"shrink-0 mt-2 p-2 rounded-full border",
|
||||
inbox.status === Inbox_Status.UNREAD
|
||||
? "border-blue-600 text-blue-600 bg-blue-50 dark:bg-zinc-800"
|
||||
@ -85,7 +85,7 @@ const MemoCommentMessage = ({ inbox }: Props) => {
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
|
||||
inbox.status !== Inbox_Status.UNREAD && "opacity-60",
|
||||
)}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { activityServiceClient } from "@/grpcweb";
|
||||
@ -58,7 +58,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
|
||||
return (
|
||||
<div className="w-full flex flex-row justify-start items-start gap-3">
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"shrink-0 mt-2 p-2 rounded-full border",
|
||||
inbox.status === Inbox_Status.UNREAD
|
||||
? "border-blue-600 text-blue-600 bg-blue-50 dark:bg-zinc-800"
|
||||
@ -70,7 +70,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
|
||||
inbox.status !== Inbox_Status.UNREAD && "opacity-60",
|
||||
)}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import toast from "react-hot-toast";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import Icon from "@/components/Icon";
|
||||
@ -108,7 +108,7 @@ const MemoActionMenu = (props: Props) => {
|
||||
return (
|
||||
<Dropdown>
|
||||
<MenuButton slots={{ root: "div" }}>
|
||||
<span className={classNames("flex justify-center items-center rounded-full hover:opacity-70", props.className)}>
|
||||
<span className={clsx("flex justify-center items-center rounded-full hover:opacity-70", props.className)}>
|
||||
<Icon.MoreVertical className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
|
||||
</span>
|
||||
</MenuButton>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Checkbox } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import copy from "copy-to-clipboard";
|
||||
import hljs from "highlight.js";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
@ -65,11 +65,9 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
|
||||
</div>
|
||||
|
||||
<div className="overflow-auto">
|
||||
<pre
|
||||
className={classNames(wrap ? "whitespace-pre-wrap" : "no-wrap overflow-auto", "w-full p-2 bg-amber-50 dark:bg-zinc-700 relative")}
|
||||
>
|
||||
<pre className={clsx(wrap ? "whitespace-pre-wrap" : "no-wrap overflow-auto", "w-full p-2 bg-amber-50 dark:bg-zinc-700 relative")}>
|
||||
<code
|
||||
className={classNames(`language-${formatedLanguage}`, "block text-sm leading-5")}
|
||||
className={clsx(`language-${formatedLanguage}`, "block text-sm leading-5")}
|
||||
dangerouslySetInnerHTML={{ __html: highlightedCode }}
|
||||
></code>
|
||||
</pre>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useEffect } from "react";
|
||||
import MemoResourceListView from "@/components/MemoResourceListView";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
@ -53,7 +53,7 @@ const EmbeddedResource = ({ resourceId, params: paramsStr }: Props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames("max-w-full", getAdditionalClassNameWithParams(params))}>
|
||||
<div className={clsx("max-w-full", getAdditionalClassNameWithParams(params))}>
|
||||
<MemoResourceListView resources={[resource]} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Props {
|
||||
@ -10,10 +10,10 @@ const Spoiler: React.FC<Props> = ({ content }: Props) => {
|
||||
|
||||
return (
|
||||
<span
|
||||
className={classNames("inline cursor-pointer select-none", isRevealed ? "" : "bg-gray-200 dark:bg-zinc-700")}
|
||||
className={clsx("inline cursor-pointer select-none", isRevealed ? "" : "bg-gray-200 dark:bg-zinc-700")}
|
||||
onClick={() => setIsRevealed(!isRevealed)}
|
||||
>
|
||||
<span className={classNames(isRevealed ? "opacity-100" : "opacity-0")}>{content}</span>
|
||||
<span className={clsx(isRevealed ? "opacity-100" : "opacity-0")}>{content}</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useContext } from "react";
|
||||
import { useFilterStore } from "@/store/module";
|
||||
import { RendererContext } from "./types";
|
||||
@ -26,7 +26,7 @@ const Tag: React.FC<Props> = ({ content }: Props) => {
|
||||
|
||||
return (
|
||||
<span
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"inline-block w-auto text-blue-600 dark:text-blue-400",
|
||||
context.disableFilter ? "" : "cursor-pointer hover:opacity-80",
|
||||
)}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Checkbox } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { repeat } from "lodash-es";
|
||||
import { useContext, useState } from "react";
|
||||
import { useMemoStore } from "@/store/v1";
|
||||
@ -58,7 +58,7 @@ const TaskList: React.FC<Props> = ({ index, indent, complete, children }: Props)
|
||||
<div className="w-7 h-6 flex justify-center items-center">
|
||||
<Checkbox size="sm" checked={checked} disabled={context.readonly} onChange={(e) => handleCheckboxChange(e.target.checked)} />
|
||||
</div>
|
||||
<div className={classNames(complete && "line-through opacity-80")}>
|
||||
<div className={clsx(complete && "line-through opacity-80")}>
|
||||
{children.map((child, index) => (
|
||||
<Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
|
||||
))}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { memo, useEffect, useRef, useState } from "react";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import { useMemoStore } from "@/store/v1";
|
||||
@ -71,7 +71,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
|
||||
<div className={`w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-400 ${className || ""}`}>
|
||||
<div
|
||||
ref={memoContentContainerRef}
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"w-full max-w-full word-break text-base leading-snug space-y-2 whitespace-pre-wrap",
|
||||
showCompactMode && "line-clamp-6",
|
||||
)}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import Fuse from "fuse.js";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import getCaretCoordinates from "textarea-caret";
|
||||
@ -110,7 +110,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
|
||||
<div
|
||||
key={tag}
|
||||
onMouseDown={() => autocomplete(tag)}
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800",
|
||||
i === selected ? "bg-zinc-300 dark:bg-zinc-600" : "",
|
||||
)}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { last } from "lodash-es";
|
||||
import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
|
||||
import { NodeType, OrderedListNode, TaskListNode, UnorderedListNode } from "@/types/node";
|
||||
@ -178,7 +178,7 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"flex flex-col justify-start items-start relative w-full h-auto max-h-[256px] bg-inherit dark:text-gray-300",
|
||||
className,
|
||||
)}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useEffect } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { useFilterStore } from "@/store/module";
|
||||
@ -27,7 +27,7 @@ const MemoFilter = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
`w-full flex flex-row justify-start items-start flex-wrap gap-2 text-sm leading-7 dark:text-gray-400`,
|
||||
props.className,
|
||||
)}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { memo, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
@ -77,7 +77,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"group relative flex flex-col justify-start items-start w-full px-4 py-3 mb-2 gap-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700",
|
||||
props.showPinned && memo.pinned && "border-gray-200 border dark:border-zinc-700",
|
||||
className,
|
||||
@ -126,7 +126,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
|
||||
</div>
|
||||
{!isInMemoDetailPage && (
|
||||
<Link
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"flex flex-row justify-start items-center hover:opacity-70",
|
||||
commentAmount === 0 && "invisible group-hover:visible",
|
||||
)}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useState } from "react";
|
||||
import useWindowScroll from "react-use/lib/useWindowScroll";
|
||||
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
|
||||
@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-900 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
|
||||
offsetTop > 0 && "shadow-md",
|
||||
className,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useEffect } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
@ -122,17 +122,14 @@ const Navigation = (props: Props) => {
|
||||
|
||||
return (
|
||||
<header
|
||||
className={classNames(
|
||||
"w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar",
|
||||
className,
|
||||
)}
|
||||
className={clsx("w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar", className)}
|
||||
>
|
||||
<UserBanner collapsed={collapsed} />
|
||||
<div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
|
||||
{navLinks.map((navLink) => (
|
||||
<NavLink
|
||||
className={({ isActive }) =>
|
||||
classNames(
|
||||
clsx(
|
||||
"px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-400 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
|
||||
collapsed ? "" : "w-full px-4",
|
||||
isActive ? "bg-white drop-shadow-sm dark:bg-zinc-800 border-gray-200 dark:border-zinc-700" : "border-transparent",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Dropdown, Menu, MenuButton } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useRef, useState } from "react";
|
||||
import useClickAway from "react-use/lib/useClickAway";
|
||||
import Icon from "@/components/Icon";
|
||||
@ -74,10 +74,7 @@ const ReactionSelector = (props: Props) => {
|
||||
<Dropdown open={open} onOpenChange={(_, isOpen) => setOpen(isOpen)}>
|
||||
<MenuButton slots={{ root: "div" }}>
|
||||
<span
|
||||
className={classNames(
|
||||
"h-7 w-7 flex justify-center items-center rounded-full border dark:border-zinc-700 hover:opacity-70",
|
||||
className,
|
||||
)}
|
||||
className={clsx("h-7 w-7 flex justify-center items-center rounded-full border dark:border-zinc-700 hover:opacity-70", className)}
|
||||
>
|
||||
<Icon.SmilePlus className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
|
||||
</span>
|
||||
@ -89,7 +86,7 @@ const ReactionSelector = (props: Props) => {
|
||||
return (
|
||||
<span
|
||||
key={reactionType}
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"inline-flex w-auto cursor-pointer rounded text-lg px-1 text-gray-500 dark:text-gray-400 hover:opacity-80",
|
||||
hasReacted(reactionType) && "bg-blue-100 dark:bg-zinc-800",
|
||||
)}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { memoServiceClient } from "@/grpcweb";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import { useMemoStore } from "@/store/v1";
|
||||
@ -97,7 +97,7 @@ const ReactionView = (props: Props) => {
|
||||
return (
|
||||
<Tooltip title={stringifyUsers(users, reactionType)} placement="top">
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"h-7 border px-2 py-0.5 rounded-full font-memo flex flex-row justify-center items-center gap-1 dark:border-zinc-700",
|
||||
currentUser && "cursor-pointer",
|
||||
hasReaction && "bg-blue-100 border-blue-200 dark:bg-zinc-900",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import { Resource } from "@/types/proto/api/v1/resource_service";
|
||||
import { getResourceType, getResourceUrl } from "@/utils/resource";
|
||||
@ -16,7 +16,7 @@ const ResourceIcon = (props: Props) => {
|
||||
const { resource } = props;
|
||||
const resourceType = getResourceType(resource);
|
||||
const resourceUrl = getResourceUrl(resource);
|
||||
const className = classNames("w-full h-auto", props.className);
|
||||
const className = clsx("w-full h-auto", props.className);
|
||||
const strokeWidth = props.strokeWidth;
|
||||
|
||||
const previewResource = () => {
|
||||
@ -25,7 +25,7 @@ const ResourceIcon = (props: Props) => {
|
||||
|
||||
if (resourceType === "image/*") {
|
||||
return (
|
||||
<SquareDiv className={classNames(className, "flex items-center justify-center overflow-clip")}>
|
||||
<SquareDiv className={clsx(className, "flex items-center justify-center overflow-clip")}>
|
||||
<img
|
||||
className="min-w-full min-h-full object-cover border rounded dark:border-none"
|
||||
src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
|
||||
@ -63,7 +63,7 @@ const ResourceIcon = (props: Props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div onClick={previewResource} className={classNames(className, "max-w-[4rem] opacity-50")}>
|
||||
<div onClick={previewResource} className={clsx(className, "max-w-[4rem] opacity-50")}>
|
||||
{getResourceIcon()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import TagsSection from "../HomeSidebar/TagsSection";
|
||||
import SearchBar from "../SearchBar";
|
||||
|
||||
@ -9,7 +9,7 @@ interface Props {
|
||||
const TimelineSidebar = (props: Props) => {
|
||||
return (
|
||||
<aside
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start",
|
||||
props.className,
|
||||
)}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface Props {
|
||||
avatarUrl?: string;
|
||||
@ -8,7 +8,7 @@ interface Props {
|
||||
const UserAvatar = (props: Props) => {
|
||||
const { avatarUrl, className } = props;
|
||||
return (
|
||||
<div className={classNames(`w-8 h-8 overflow-clip rounded-xl`, className)}>
|
||||
<div className={clsx(`w-8 h-8 overflow-clip rounded-xl`, className)}>
|
||||
<img
|
||||
className="w-full h-auto shadow min-w-full min-h-full object-cover dark:opacity-80"
|
||||
src={avatarUrl || "/full-logo.webp"}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { authServiceClient } from "@/grpcweb";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
@ -30,7 +30,7 @@ const UserBanner = (props: Props) => {
|
||||
<Dropdown>
|
||||
<MenuButton disabled={!user} slots={{ root: "div" }}>
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"py-1 my-1 w-auto flex flex-row justify-start items-center cursor-pointer rounded-2xl border border-transparent text-gray-800 dark:text-gray-400",
|
||||
collapsed ? "px-1" : "px-3",
|
||||
)}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { Visibility } from "@/types/proto/api/v1/memo_service";
|
||||
import Icon from "./Icon";
|
||||
|
||||
@ -21,7 +21,7 @@ const VisibilityIcon = (props: Props) => {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <VIcon className={classNames("w-4 h-auto text-gray-500 dark:text-gray-400")} />;
|
||||
return <VIcon className={clsx("w-4 h-auto text-gray-500 dark:text-gray-400")} />;
|
||||
};
|
||||
|
||||
export default VisibilityIcon;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useRef, useState, useEffect } from "react";
|
||||
|
||||
interface Props {
|
||||
@ -21,7 +21,7 @@ const OverflowTip = ({ children, className }: Props) => {
|
||||
|
||||
return (
|
||||
<Tooltip title={children} placement="top" arrow disableHoverListener={!isOverflowed}>
|
||||
<div ref={textElementRef} className={classNames("truncate", className)}>
|
||||
<div ref={textElementRef} className={clsx("truncate", className)}>
|
||||
{children}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button, IconButton, Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { Suspense, useEffect } from "react";
|
||||
import { Outlet, useLocation } from "react-router-dom";
|
||||
import useLocalStorage from "react-use/lib/useLocalStorage";
|
||||
@ -32,23 +32,18 @@ const HomeLayout = () => {
|
||||
|
||||
return (
|
||||
<div className="w-full min-h-full">
|
||||
<div
|
||||
className={classNames(
|
||||
"w-full transition-all mx-auto flex flex-row justify-center items-start",
|
||||
collapsed ? "sm:pl-16" : "sm:pl-56",
|
||||
)}
|
||||
>
|
||||
<div className={clsx("w-full transition-all mx-auto flex flex-row justify-center items-start", collapsed ? "sm:pl-16" : "sm:pl-56")}>
|
||||
{sm && (
|
||||
<div
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
"group flex flex-col justify-start items-start fixed top-0 left-0 select-none border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2",
|
||||
collapsed ? "w-16 px-2" : "w-56 px-4",
|
||||
)}
|
||||
>
|
||||
<Navigation className="!h-auto" collapsed={collapsed} />
|
||||
<div className={classNames("w-full grow h-auto flex flex-col justify-end", collapsed ? "items-center" : "items-start")}>
|
||||
<div className={clsx("w-full grow h-auto flex flex-col justify-end", collapsed ? "items-center" : "items-start")}>
|
||||
<div
|
||||
className={classNames("hidden py-3 group-hover:flex flex-col justify-center items-center")}
|
||||
className={clsx("hidden py-3 group-hover:flex flex-col justify-center items-center")}
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
>
|
||||
{!collapsed ? (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Empty from "@/components/Empty";
|
||||
import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar";
|
||||
@ -61,8 +61,8 @@ const Explore = () => {
|
||||
<ExploreSidebarDrawer />
|
||||
</MobileHeader>
|
||||
)}
|
||||
<div className={classNames("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
|
||||
<div className={classNames(md ? "w-[calc(100%-15rem)]" : "w-full")}>
|
||||
<div className={clsx("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
|
||||
<div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
|
||||
<div className="flex flex-col justify-start items-start w-full max-w-full">
|
||||
<MemoFilter className="px-2 pb-2" />
|
||||
{sortedMemos.map((memo) => (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import Empty from "@/components/Empty";
|
||||
import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
|
||||
@ -75,8 +75,8 @@ const Home = () => {
|
||||
<HomeSidebarDrawer />
|
||||
</MobileHeader>
|
||||
)}
|
||||
<div className={classNames("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
|
||||
<div className={classNames(md ? "w-[calc(100%-15rem)]" : "w-full")}>
|
||||
<div className={clsx("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
|
||||
<div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
|
||||
<MemoEditor className="mb-2" cacheKey="home-memo-editor" onEditPrevious={handleEditPrevious} />
|
||||
<div className="flex flex-col justify-start items-start w-full max-w-full">
|
||||
<MemoFilter className="px-2 pb-2" />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button, Divider, IconButton } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import { Fragment, useEffect, useRef, useState } from "react";
|
||||
import ActivityCalendar from "@/components/ActivityCalendar";
|
||||
import Empty from "@/components/Empty";
|
||||
@ -125,8 +125,8 @@ const Timeline = () => {
|
||||
<TimelineSidebarDrawer />
|
||||
</MobileHeader>
|
||||
)}
|
||||
<div className={classNames("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
|
||||
<div className={classNames(md ? "w-[calc(100%-15rem)]" : "w-full")}>
|
||||
<div className={clsx("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
|
||||
<div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
|
||||
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
|
||||
<div className="relative w-full flex flex-row justify-between items-center">
|
||||
<div>
|
||||
@ -149,9 +149,9 @@ const Timeline = () => {
|
||||
|
||||
{groupedByMonth.map((group, index) => (
|
||||
<Fragment key={group.month}>
|
||||
<div className={classNames("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
|
||||
<div className={classNames("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2")}>
|
||||
<div className={classNames("w-full flex flex-col")}>
|
||||
<div className={clsx("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
|
||||
<div className={clsx("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2")}>
|
||||
<div className={clsx("w-full flex flex-col")}>
|
||||
<span className="font-medium text-3xl leading-tight mb-1">
|
||||
{new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })}
|
||||
</span>
|
||||
@ -160,11 +160,11 @@ const Timeline = () => {
|
||||
<ActivityCalendar month={group.month} data={group.data} onClick={(date) => setSelectedDay(date)} />
|
||||
</div>
|
||||
|
||||
<div className={classNames("w-full flex flex-col justify-start items-start")}>
|
||||
<div className={clsx("w-full flex flex-col justify-start items-start")}>
|
||||
{group.memos.map((memo, index) => (
|
||||
<div
|
||||
key={`${memo.name}-${memo.displayTime}`}
|
||||
className={classNames("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
|
||||
className={clsx("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
|
||||
>
|
||||
<MemoView className="!border max-w-full !border-gray-100 dark:!border-zinc-700" memo={memo} />
|
||||
<div className="absolute -left-2 sm:left-2 top-4 h-full">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user