Release Status in MangaCard Badge

tranga-website/src/Components/Mangas/MangaCard.tsx

@@ -1,15 +1,8 @@
-import {
+import {Badge, Card, CardContent, CardCover, ColorPaletteProp, Skeleton, Typography,} from '@mui/joy'
-    Badge,
-    Card,
-    CardContent,
-    CardCover,
-    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 {Manga, MangaReleaseStatus, MinimalManga} from '../../api/data-contracts.ts'
 import {ApiContext} from '../../contexts/ApiContext.tsx'
 
 export default function MangaCard(props: MangaCardProps): ReactNode {
@@ -23,6 +16,7 @@ export default function MangaCard(props: MangaCardProps): ReactNode {
                 />
             ))}
             className={'manga-card-badge'}
+            color={releaseColor(props.manga?.releaseStatus??MangaReleaseStatus.Unreleased)}
         >
             <Card className={'manga-card'} onClick={props.onClick}>
                 <CardCover className={'manga-card-cover'}>
@@ -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';
+    }
+}