Skip to content

N
Neos
Commit 93a8d403 authored by timel's avatar timel
Browse files
Options

feat: basic drag and drop in deck build

parent df7a8c3b
Hide whitespace changes
Inline Side-by-side
Showing with 291 additions and 64 deletions
package-lock.json
View file @ 93a8d403
...@@ -30,6 +30,8 @@ ...@@ -30,6 +30,8 @@
"overlayscrollbars-react": "^0.5.1", "overlayscrollbars-react": "^0.5.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-animated-numbers": "^0.16.0", "react-animated-numbers": "^0.16.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-draggable": "^4.4.5", "react-draggable": "^4.4.5",
"react-router-dom": "^6.10.0", "react-router-dom": "^6.10.0",
...@@ -3100,6 +3102,21 @@ ...@@ -3100,6 +3102,21 @@
"react-dom": ">=16.9.0" "react-dom": ">=16.9.0"
} }
}, },
"node_modules/@react-dnd/asap": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
"integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
},
"node_modules/@react-dnd/invariant": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
"integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
},
"node_modules/@react-dnd/shallowequal": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
},
"node_modules/@react-spring/animated": { "node_modules/@react-spring/animated": {
"version": "9.7.2", "version": "9.7.2",
"resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.2.tgz", "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.2.tgz",
...@@ -7924,6 +7941,16 @@ ...@@ -7924,6 +7941,16 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/dnd-core": {
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
"integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
"dependencies": {
"@react-dnd/asap": "^5.0.1",
"@react-dnd/invariant": "^4.0.1",
"redux": "^4.2.0"
}
},
"node_modules/dns-equal": { "node_modules/dns-equal": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
...@@ -10930,6 +10957,14 @@ ...@@ -10930,6 +10957,14 @@
"node": ">=4.0.0" "node": ">=4.0.0"
} }
}, },
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/home-or-tmp": { "node_modules/home-or-tmp": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
...@@ -21292,6 +21327,43 @@ ...@@ -21292,6 +21327,43 @@
"which": "bin/which" "which": "bin/which"
} }
}, },
"node_modules/react-dnd": {
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
"integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
"dependencies": {
"@react-dnd/invariant": "^4.0.1",
"@react-dnd/shallowequal": "^4.0.1",
"dnd-core": "^16.0.1",
"fast-deep-equal": "^3.1.3",
"hoist-non-react-statics": "^3.3.2"
},
"peerDependencies": {
"@types/hoist-non-react-statics": ">= 3.3.1",
"@types/node": ">= 12",
"@types/react": ">= 16",
"react": ">= 16.14"
},
"peerDependenciesMeta": {
"@types/hoist-non-react-statics": {
"optional": true
},
"@types/node": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/react-dnd-html5-backend": {
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
"integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
"dependencies": {
"dnd-core": "^16.0.1"
}
},
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "18.2.0", "version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
...@@ -22953,6 +23025,14 @@ ...@@ -22953,6 +23025,14 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/redux": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/regenerate": { "node_modules/regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
...@@ -30753,6 +30833,21 @@ ...@@ -30753,6 +30833,21 @@
"rc-util": "^5.29.2" "rc-util": "^5.29.2"
} }
}, },
"@react-dnd/asap": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
"integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
},
"@react-dnd/invariant": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
"integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
},
"@react-dnd/shallowequal": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
},
"@react-spring/animated": { "@react-spring/animated": {
"version": "9.7.2", "version": "9.7.2",
"resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.2.tgz", "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.2.tgz",
...@@ -34543,6 +34638,16 @@ ...@@ -34543,6 +34638,16 @@
"path-type": "^4.0.0" "path-type": "^4.0.0"
} }
}, },
"dnd-core": {
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
"integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
"requires": {
"@react-dnd/asap": "^5.0.1",
"@react-dnd/invariant": "^4.0.1",
"redux": "^4.2.0"
}
},
"dns-equal": { "dns-equal": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
...@@ -36844,6 +36949,14 @@ ...@@ -36844,6 +36949,14 @@
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==" "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
}, },
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"home-or-tmp": { "home-or-tmp": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
...@@ -44870,6 +44983,26 @@ ...@@ -44870,6 +44983,26 @@
} }
} }
}, },
"react-dnd": {
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
"integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
"requires": {
"@react-dnd/invariant": "^4.0.1",
"@react-dnd/shallowequal": "^4.0.1",
"dnd-core": "^16.0.1",
"fast-deep-equal": "^3.1.3",
"hoist-non-react-statics": "^3.3.2"
}
},
"react-dnd-html5-backend": {
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
"integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
"requires": {
"dnd-core": "^16.0.1"
}
},
"react-dom": { "react-dom": {
"version": "18.2.0", "version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
...@@ -46148,6 +46281,14 @@ ...@@ -46148,6 +46281,14 @@
"strip-indent": "^3.0.0" "strip-indent": "^3.0.0"
} }
}, },
"redux": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
"requires": {
"@babel/runtime": "^7.9.2"
}
},
"regenerate": { "regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
src/ui/BuildDeck/index.module.scss
View file @ 93a8d403
...@@ -88,6 +88,7 @@ ...@@ -88,6 +88,7 @@
} }
.card { .card {
cursor: move;
width: 100%; width: 100%;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
aspect-ratio: var(--card-ratio); aspect-ratio: var(--card-ratio);
......
src/ui/BuildDeck/index.tsx
View file @ 93a8d403
...@@ -15,10 +15,12 @@ import { ...@@ -15,10 +15,12 @@ import {
Space, Space,
type ThemeConfig, type ThemeConfig,
} from "antd"; } from "antd";
import { memo, useEffect, useState } from "react"; import { memo, useEffect, useRef, useState } from "react";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { LoaderFunction } from "react-router-dom"; import { LoaderFunction } from "react-router-dom";
import { v4 as v4uuid } from "uuid"; import { v4 as v4uuid } from "uuid";
import { useSnapshot } from "valtio"; import { proxy, useSnapshot } from "valtio";
import { subscribeKey } from "valtio/utils"; import { subscribeKey } from "valtio/utils";
import { type CardMeta, searchCards } from "@/api"; import { type CardMeta, searchCards } from "@/api";
...@@ -64,40 +66,42 @@ export const Component: React.FC = () => { ...@@ -64,40 +66,42 @@ export const Component: React.FC = () => {
const [selectedDeck, setSelectedDeck] = useState<IDeck>(deckStore.decks[0]); const [selectedDeck, setSelectedDeck] = useState<IDeck>(deckStore.decks[0]);
return ( return (
<ConfigProvider theme={theme}> <DndProvider backend={HTML5Backend}>
<Background /> <ConfigProvider theme={theme}>
<div className={styles.layout} style={{ width: "100%" }}> <Background />
<div className={styles.sider}> <div className={styles.layout} style={{ width: "100%" }}>
<ScrollableArea className={styles["deck-select-container"]}> <div className={styles.sider}>
<DeckSelect <ScrollableArea className={styles["deck-select-container"]}>
decks={snapDecks.decks} <DeckSelect
selected={selectedDeck.deckName} decks={snapDecks.decks}
onSelect={(name) => selected={selectedDeck.deckName}
setSelectedDeck(deckStore.get(name) ?? deckStore.decks[0]) onSelect={(name) =>
} setSelectedDeck(deckStore.get(name) ?? deckStore.decks[0])
onDelete={(id) => console.log(id)} }
onDownload={(id) => console.log(id)} onDelete={(id) => console.log(id)}
onAdd={() => console.log("add")} onDownload={(id) => console.log(id)}
/> onAdd={() => console.log("add")}
</ScrollableArea> />
<CardDetail code={123} open={false} onClose={() => {}} /> </ScrollableArea>
</div> <CardDetail code={123} open={false} onClose={() => {}} />
<div className={styles.content}>
<div className={styles.deck}>
<DeckEditor deck={selectedDeck} onSave={() => {}} />
</div> </div>
<div className={styles.select}> <div className={styles.content}>
{sqlite.progress === 1 ? ( <div className={styles.deck}>
<CardSelect /> <DeckEditor deck={selectedDeck} onSave={() => {}} />
) : ( </div>
<div className={styles.container}> <div className={styles.select}>
<Loading /> {sqlite.progress === 1 ? (
</div> <CardSelect />
)} ) : (
<div className={styles.container}>
<Loading />
</div>
)}
</div>
</div> </div>
</div> </div>
</div> </ConfigProvider>
</ConfigProvider> </DndProvider>
); );
}; };
Component.displayName = "Build"; Component.displayName = "Build";
...@@ -107,14 +111,9 @@ const DeckEditor: React.FC<{ ...@@ -107,14 +111,9 @@ const DeckEditor: React.FC<{
deck: IDeck; deck: IDeck;
onSave: (deck: IDeck) => void; onSave: (deck: IDeck) => void;
}> = ({ deck, onSave }) => { }> = ({ deck, onSave }) => {
const [editingDeck, setEditingDeck] = useState<EditingDeck>({ const snapEditDeck = useSnapshot(editDeckStore);
deckName: deck.deckName,
main: [],
extra: [],
side: [],
});
useEffect(() => { useEffect(() => {
iDeckToEditingDeck(deck).then(setEditingDeck); iDeckToEditingDeck(deck).then(editDeckStore.set);
}, [deck]); }, [deck]);
return ( return (
<div className={styles.container}> <div className={styles.container}>
...@@ -125,9 +124,12 @@ const DeckEditor: React.FC<{ ...@@ -125,9 +124,12 @@ const DeckEditor: React.FC<{
prefix={<EditOutlined />} prefix={<EditOutlined />}
style={{ width: 400 }} style={{ width: 400 }}
onChange={(e) => onChange={(e) =>
setEditingDeck({ ...editingDeck, deckName: e.target.value }) editDeckStore.set({
...editDeckStore,
deckName: e.target.value,
})
} }
value={editingDeck.deckName} value={snapEditDeck.deckName}
/> />
<Space style={{ marginRight: 6 }}> <Space style={{ marginRight: 6 }}>
<Button type="text" size="small" icon={<DeleteOutlined />}> <Button type="text" size="small" icon={<DeleteOutlined />}>
...@@ -140,7 +142,7 @@ const DeckEditor: React.FC<{ ...@@ -140,7 +142,7 @@ const DeckEditor: React.FC<{
type="text" type="text"
size="small" size="small"
icon={<CheckOutlined />} icon={<CheckOutlined />}
onClick={() => onSave(editingDeckToIDeck(editingDeck))} onClick={() => onSave(editingDeckToIDeck(editDeckStore))}
> >
保存 保存
</Button> </Button>
...@@ -148,13 +150,7 @@ const DeckEditor: React.FC<{ ...@@ -148,13 +150,7 @@ const DeckEditor: React.FC<{
</Space> </Space>
<ScrollableArea className={styles["deck-zone"]}> <ScrollableArea className={styles["deck-zone"]}>
{(["main", "extra", "side"] as const).map((type) => ( {(["main", "extra", "side"] as const).map((type) => (
<div key={type} className={styles[type]}> <DeckZone key={type} type={type} />
<div className={styles["card-continer"]}>
{editingDeck[type].map((item) => (
<Card value={item} key={v4uuid()} />
))}
</div>
</div>
))} ))}
</ScrollableArea> </ScrollableArea>
</div> </div>
...@@ -220,21 +216,108 @@ const CardSelect: React.FC = () => { ...@@ -220,21 +216,108 @@ const CardSelect: React.FC = () => {
); );
}; };
/** 正在组卡的zone，包括main/extra/side */
const DeckZone: React.FC<{
type: "main" | "extra" | "side";
}> = ({ type }) => {
const cards = useSnapshot(editDeckStore)[type];
const [_, dropRef] = useDrop({
accept: ["Card"], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组
// 里面的值就是useDrag所定义的type
// 当拖拽物在这个拖放区域放下时触发,这个item就是拖拽物的item（拖拽物携带的数据）
drop: ({
value,
source,
}: {
value: CardMeta;
source: "main" | "extra" | "side" | "search";
}) => {
editDeckStore.add(type, value);
if (source !== "search") {
editDeckStore.remove(source, value);
}
},
});
return (
<div className={styles[type]} ref={dropRef}>
<div className={styles["card-continer"]}>
{cards.map((item, i) => (
<Card value={item} key={i} source={type} />
))}
</div>
</div>
);
};
/** 搜索区的搜索结果，使用memo避免重复渲染 */ /** 搜索区的搜索结果，使用memo避免重复渲染 */
const SearchResults: React.FC<{ const SearchResults: React.FC<{
results: CardMeta[]; results: CardMeta[];
}> = memo(({ results }) => ( }> = memo(({ results }) => {
<div className={styles["search-cards"]}> const [_, dropRef] = useDrop({
{results.map((item) => ( accept: ["Card"], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组
<Card value={item} key={v4uuid()} /> // 里面的值就是useDrag所定义的type
))} // 当拖拽物在这个拖放区域放下时触发,这个item就是拖拽物的item（拖拽物携带的数据）
</div> drop: ({
)); value,
source,
}: {
value: CardMeta;
source: "main" | "extra" | "side" | "search";
}) => {
if (source !== "search") {
editDeckStore.remove(source, value);
}
},
});
return (
<div className={styles["search-cards"]} ref={dropRef}>
{results.map((item) => (
<Card value={item} key={v4uuid()} source="search" />
))}
</div>
);
});
/** 本组件内使用的单张卡片，增加了文字在图片下方 */ /** 本组件内使用的单张卡片，增加了文字在图片下方 */
const Card: React.FC<{ value: CardMeta }> = memo(({ value }) => ( const Card: React.FC<{
<div className={styles.card}> value: CardMeta;
<div className={styles.cardname}>{value.text.name}</div> source: "main" | "extra" | "side" | "search";
<YgoCard className={styles.cardcover} code={value.id} /> }> = memo(({ value, source }) => {
</div> const ref = useRef<HTMLDivElement>(null);
)); const [{ isDragging }, drag] = useDrag({
type: "Card",
item: { value, source },
collect: (monitor: any) => ({
isDragging: monitor.isDragging(),
}),
});
drag(ref);
return (
<div className={styles.card} ref={ref}>
<div className={styles.cardname}>{value.text.name}</div>
<YgoCard className={styles.cardcover} code={value.id} />
</div>
);
});
const editDeckStore = proxy({
deckName: "",
main: [] as CardMeta[],
extra: [] as CardMeta[],
side: [] as CardMeta[],
add(type: "main" | "extra" | "side", card: CardMeta) {
editDeckStore[type].push(card);
},
remove(type: "main" | "extra" | "side", card: CardMeta) {
const index = editDeckStore[type].findIndex((item) => item.id === card.id);
if (index !== -1) {
editDeckStore[type].splice(index, 1);
}
},
set(deck: EditingDeck) {
editDeckStore.deckName = deck.deckName;
editDeckStore.main = deck.main;
editDeckStore.extra = deck.extra;
editDeckStore.side = deck.side;
},
}) satisfies EditingDeck;
src/ui/Layout/index.tsx
View file @ 93a8d403
import { Avatar } from "antd"; import { Avatar } from "antd";
import classNames from "classnames";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { import {
type LoaderFunction, type LoaderFunction,
...@@ -19,7 +20,6 @@ import { ...@@ -19,7 +20,6 @@ import {
initSqlite, initSqlite,
initWASM, initWASM,
} from "./utils"; } from "./utils";
import classNames from "classnames";
const NeosConfig = useConfig(); const NeosConfig = useConfig();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment