glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-06-06 04:13:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move Popup-Tags to MangaPopup.tsx

Browse Source
This commit is contained in:
glax 2025-05-19 19:29:42 +02:00
parent 724dc9b986
commit 6d8d0ec636
3 changed files with 7 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
tranga-website/src/Components/AuthorTag.tsx
View File

@ -1,10 +0,0 @@
import {Chip, ColorPaletteProp} from "@mui/joy";
import IAuthor from "../api/types/IAuthor.ts";
export default function AuthorTag({author, color} : {author: IAuthor, color?: ColorPaletteProp }) {
return (
<Chip variant={"outlined"} size={"md"} color={color??"primary"}>
{author.authorName ?? "Load Failed"}
</Chip>
);
}

10
tranga-website/src/Components/LinkTag.tsx
View File

@ -1,10 +0,0 @@
import {Chip, Link, ColorPaletteProp} from "@mui/joy";
import ILink from "../api/types/ILink.ts";
export default function LinkTag({link, color} : { link: ILink | undefined, color?: ColorPaletteProp }) {
return (
<Chip variant={"soft"} size={"sm"} color={color??"primary"}>
<Link sx={{textDecoration:"underline"}} level={"body-xs"} href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
</Chip>
);
}

12
tranga-website/src/Components/MangaPopup.tsx
View File

@ -3,8 +3,6 @@ import {Badge, Box, Chip, CircularProgress, Drawer, Input, Link, Skeleton, Stack
import {ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react"; import {ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
import {GetLatestChapterAvailable, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx"; import {GetLatestChapterAvailable, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
import {ApiUriContext, getData} from "../api/fetchApi.tsx"; import {ApiUriContext, getData} from "../api/fetchApi.tsx";
import AuthorTag from "./AuthorTag.tsx";
import LinkTag from "./LinkTag.tsx";
import MarkdownPreview from "@uiw/react-markdown-preview"; import MarkdownPreview from "@uiw/react-markdown-preview";
import {CardHeight} from "./Manga.tsx"; import {CardHeight} from "./Manga.tsx";
import IChapter from "../api/types/IChapter.ts"; import IChapter from "../api/types/IChapter.ts";
@ -73,10 +71,14 @@ export default function MangaPopup({manga, open, children} : {manga: IManga | nu
<Link href={manga?.websiteUrl} level={"h2"}> <Link href={manga?.websiteUrl} level={"h2"}>
{manga?.name} {manga?.name}
</Link> </Link>
<Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}> <Stack direction={"row"} flexWrap={"wrap"} useFlexGap={true} spacing={0.3} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
{manga?.authors?.map(author => <AuthorTag key={author.authorId} author={author} color={"success"} />)} {manga?.authors?.map(author => <Chip key={author.authorId} variant={"outlined"} size={"md"} color={"success"}>{author.authorName}</Chip>)}
{manga?.mangaTags?.map(tag => <Chip key={tag.tag} variant={"soft"} size={"md"} color={"primary"}>{tag.tag}</Chip>)} {manga?.mangaTags?.map(tag => <Chip key={tag.tag} variant={"soft"} size={"md"} color={"primary"}>{tag.tag}</Chip>)}
{manga?.links?.map(link => <LinkTag key={link.linkId} link={link} color={"warning"} />)} {manga?.links?.map(link =>
<Chip key={link.linkId} variant={"soft"} size={"md"} color={"warning"}>
<Link sx={{textDecoration:"underline"}} level={"body-xs"} href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
</Chip>
)}
</Stack> </Stack>
<MarkdownPreview source={manga?.description} style={{backgroundColor: "transparent", color: "var(--joy-palette-neutral-50)", maxHeight:CardHeight*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} /> <MarkdownPreview source={manga?.description} style={{backgroundColor: "transparent", color: "var(--joy-palette-neutral-50)", maxHeight:CardHeight*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
</Box> </Box>