glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-09-10 20:08:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Release Status in MangaCard Badge

Browse Source
This commit is contained in:
glax
2025-09-05 00:47:12 +02:00
parent 9aca50aa15
commit 26ff7a7cea
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
tranga-website/src/Components/Mangas/MangaCard.tsx
View File

@@ -1,16 +1,9 @@
import { import {Badge, Card, CardContent, CardCover, ColorPaletteProp, Skeleton, Typography,} from '@mui/joy'
Badge, import {EventHandler, ReactNode, useContext} from 'react'
Card,
CardContent,
CardCover,
Skeleton,
Typography,
} from '@mui/joy'
import { EventHandler, ReactNode, useContext } from 'react'
import './MangaCard.css' import './MangaCard.css'
import MangaConnectorIcon from './MangaConnectorIcon.tsx' import MangaConnectorIcon from './MangaConnectorIcon.tsx'
import { Manga, MinimalManga } from '../../api/data-contracts.ts' import {Manga, MangaReleaseStatus, MinimalManga} from '../../api/data-contracts.ts'
import { ApiContext } from '../../contexts/ApiContext.tsx' import {ApiContext} from '../../contexts/ApiContext.tsx'
export default function MangaCard(props: MangaCardProps): ReactNode { export default function MangaCard(props: MangaCardProps): ReactNode {
const Api = useContext(ApiContext) const Api = useContext(ApiContext)
@@ -23,6 +16,7 @@ export default function MangaCard(props: MangaCardProps): ReactNode {
/> />
))} ))}
className={'manga-card-badge'} className={'manga-card-badge'}
color={releaseColor(props.manga?.releaseStatus??MangaReleaseStatus.Unreleased)}
> >
<Card className={'manga-card'} onClick={props.onClick}> <Card className={'manga-card'} onClick={props.onClick}>
<CardCover className={'manga-card-cover'}> <CardCover className={'manga-card-cover'}>
@@ -55,3 +49,14 @@ export interface MangaCardProps {
const stringWithRandomLength = (): string => { const stringWithRandomLength = (): string => {
return 'wow' return 'wow'
} }
const releaseColor = (status : MangaReleaseStatus) : ColorPaletteProp => {
switch (status) {
case MangaReleaseStatus.Cancelled: return 'danger';
case MangaReleaseStatus.Completed: return 'success';
case MangaReleaseStatus.Unreleased: return 'neutral';
case MangaReleaseStatus.Continuing: return 'primary';
case MangaReleaseStatus.OnHiatus: return 'neutral';
default: return 'neutral';
}
}