import { observer } from "mobx-react-lite"; import { ListGroup, Nav, NavItem, NavLink, TabContent, TabPane, } from "reactstrap"; import { useAvatarStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; import { NoteLoading } from "src/Loading"; export default observer(() => { const { abilities5K, abilities7K, abilities9K, isAbilities5KLoading, isAbilities7KLoading, isAbilities9KLoading, avatarID, abilitiesTabPosition, setAbilitiesTabPosition, } = useAvatarStore(); const getProperties = (i: number) => ({ className: abilitiesTabPosition === i ? "active route" : "route", onClick: () => { setAbilitiesTabPosition(i); }, }); return ( <> <Nav tabs> <NavItem> <NavLink {...getProperties(0)}>⑤K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(1)}>⑦K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(2)}>9K</NavLink> </NavItem> </Nav> <TabContent activeTab={abilitiesTabPosition}> <TabPane tabId={0}> <ListGroup> {isAbilities5KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( abilities5K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {isAbilities7KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( abilities7K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {isAbilities9KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( abilities9K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </TabPane> </TabContent> </> ); });