From c0c734dbd5583d8705becc913247c4971bc96700 Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Sun, 29 Aug 2021 21:46:20 +0430
Subject: [PATCH] better text view

---
 src/components/manga/MangaCard.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/manga/MangaCard.tsx b/src/components/manga/MangaCard.tsx
index b4966031..de3fa46c 100644
--- a/src/components/manga/MangaCard.tsx
+++ b/src/components/manga/MangaCard.tsx
@@ -38,6 +38,8 @@ const useStyles = makeStyles({
         bottom: 0,
         padding: '0.5em',
         color: 'white',
+        fontSize: '1.05rem',
+        textShadow: '0px 0px 3px #000000',
     },
     image: {
         height: '100%',
@@ -50,6 +52,17 @@ const useStyles = makeStyles({
     },
 });
 
+const truncateText = (str: string, maxLength: number) => {
+    const ending = '...';
+    // trim the string to the maximum length
+    const trimmedString = str.substr(0, maxLength - ending.length);
+
+    if (trimmedString.length < str.length) {
+        return trimmedString + ending;
+    }
+    return str;
+};
+
 interface IProps {
     manga: IMangaCard
 }
@@ -75,7 +88,9 @@ const MangaCard = React.forwardRef((props: IProps, ref) => {
                                 imgClassName={classes.image}
                             />
                             <div className={classes.gradient} />
-                            <Typography className={classes.title} variant="h5" component="h2">{title}</Typography>
+                            <Typography className={classes.title}>
+                                {truncateText(title, 61)}
+                            </Typography>
                         </div>
                     </CardActionArea>
                 </Card>