popular mangas UI

webUI/react/src/components/MangaCard.tsx

@@ -41,7 +41,7 @@ interface IProps {
 export default function MangaCard(props: IProps) {
     const {
         manga: {
-            name, imageUrl,
+            title, thumbnailUrl,
         },
     } = props;
     const classes = useStyles();
@@ -53,12 +53,12 @@ export default function MangaCard(props: IProps) {
                     <CardMedia
                         className={classes.image}
                         component="img"
-                        alt="Nagatoro"
-                        image={imageUrl}
-                        title="Nagatoro"
+                        alt={title}
+                        image={thumbnailUrl}
+                        title={title}
                     />
                     <div className={classes.gradient} />
-                    <Typography className={classes.title} variant="h5" component="h2">{name}</Typography>
+                    <Typography className={classes.title} variant="h5" component="h2">{title}</Typography>
                 </div>
             </CardActionArea>
         </Card>

webUI/react/src/components/SourceCard.tsx

@@ -39,7 +39,7 @@ interface IProps {
 export default function SourceCard(props: IProps) {
     const {
         source: {
-            name, lang, iconUrl, supportsLatest,
+            id, name, lang, iconUrl, supportsLatest,
         },
     } = props;
 
@@ -66,7 +66,7 @@ export default function SourceCard(props: IProps) {
                 </div>
                 <div style={{ display: 'flex' }}>
                     {supportsLatest && <Button variant="outlined">Latest</Button>}
-                    <Button variant="outlined" style={{ marginLeft: 20 }}>Browse</Button>
+                    <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `sources/${id}/popular`; }}>Browse</Button>
                 </div>
             </CardContent>
         </Card>