import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { Badge, ListGroup, Nav, NavItem, NavLink, TabContent, TabPane, } from "reactstrap"; import { useAvatarStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; import { AvatarLoading } from "../Loading"; export default observer(() => { const { lasts5K, lasts7K, lasts9K, lasts10K, lasts14K, lasts24K, lasts48K, isLasts5KLoading, isLasts7KLoading, isLasts9KLoading, isLasts10KLoading, isLasts14KLoading, isLasts24KLoading, isLasts48KLoading, lastsTabPosition, setLastsTabPosition, } = useAvatarStore(); const { t } = useTranslation(); const { avatarID } = useAvatarStore(); const getProperties = (i: number) => ({ className: lastsTabPosition === i ? "active route" : "route", onClick: () => { setLastsTabPosition(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> <NavItem> <NavLink {...getProperties(3)}>⑩K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(4)}>⑭K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(5)}>24</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(6)}>48</NavLink> </NavItem> </Nav> <TabContent activeTab={lastsTabPosition}> <TabPane tabId={0}> <ListGroup> <Badge color="primary">{t("avatarLastsText")}</Badge> {isLasts5KLoading ? ( <AvatarLoading /> ) : ( lasts5K.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> <Badge color="primary">{t("avatarLastsText")}</Badge> {isLasts7KLoading ? ( <AvatarLoading /> ) : ( lasts7K.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> <Badge color="primary">{t("avatarLastsText")}</Badge> {isLasts9KLoading ? ( <AvatarLoading /> ) : ( lasts9K.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={3}> <ListGroup> <Badge color="primary">{t("avatarLastsText")}</Badge> {isLasts10KLoading ? ( <AvatarLoading /> ) : ( lasts10K.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={4}> <ListGroup> <Badge color="primary">{t("avatarLastsText")}</Badge> {isLasts14KLoading ? ( <AvatarLoading /> ) : ( lasts14K.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={5}> <ListGroup> <Badge color="primary">{t("avatarLastsText")}</Badge> {isLasts24KLoading ? ( <AvatarLoading /> ) : ( lasts24K.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={6}> <ListGroup> <Badge color="primary">{t("avatarLastsText")}</Badge> {isLasts48KLoading ? ( <AvatarLoading /> ) : ( lasts48K.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> </> ); });