From 26ff7a7ceafb59fea7ca80772aee18dd77e64e83 Mon Sep 17 00:00:00 2001 From: glax Date: Fri, 5 Sep 2025 00:47:12 +0200 Subject: [PATCH] Release Status in MangaCard Badge --- .../src/Components/Mangas/MangaCard.tsx | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/tranga-website/src/Components/Mangas/MangaCard.tsx b/tranga-website/src/Components/Mangas/MangaCard.tsx index 8b42b8a..7ef2e6d 100644 --- a/tranga-website/src/Components/Mangas/MangaCard.tsx +++ b/tranga-website/src/Components/Mangas/MangaCard.tsx @@ -1,16 +1,9 @@ -import { - Badge, - Card, - CardContent, - CardCover, - Skeleton, - Typography, -} from '@mui/joy' -import { EventHandler, ReactNode, useContext } from 'react' +import {Badge, Card, CardContent, CardCover, ColorPaletteProp, Skeleton, Typography,} from '@mui/joy' +import {EventHandler, ReactNode, useContext} from 'react' import './MangaCard.css' import MangaConnectorIcon from './MangaConnectorIcon.tsx' -import { Manga, MinimalManga } from '../../api/data-contracts.ts' -import { ApiContext } from '../../contexts/ApiContext.tsx' +import {Manga, MangaReleaseStatus, MinimalManga} from '../../api/data-contracts.ts' +import {ApiContext} from '../../contexts/ApiContext.tsx' export default function MangaCard(props: MangaCardProps): ReactNode { const Api = useContext(ApiContext) @@ -23,6 +16,7 @@ export default function MangaCard(props: MangaCardProps): ReactNode { /> ))} className={'manga-card-badge'} + color={releaseColor(props.manga?.releaseStatus??MangaReleaseStatus.Unreleased)} > @@ -55,3 +49,14 @@ export interface MangaCardProps { const stringWithRandomLength = (): string => { 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'; + } +}