Merge pull request #102 from ktz-dev/themecard_size_limit

feat: Giving length limits to ThemeCards

src/components/theme-card.tsx

@@ -11,6 +11,10 @@ export default function ThemeCard({
 }: {
   theme: ZenTheme;
 }) {
+
+  const maxNameLen = 50;
+  const maxDescLen = 100;
+
   return (
     <ThemeCardWrapper onClick={(event) => {
       if (event.target instanceof HTMLAnchorElement) return;
@@ -18,7 +22,7 @@ export default function ThemeCard({
     }} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
       <Image src={theme.image} alt={theme.name} width={500} height={500} quality={100}
       className="w-full h-32 object-cover rounded-lg border shadow" />
-      <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name}</h2>
+      <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>
       <div className="flex mt-2">
         {theme.homepage && (
           <>
@@ -34,7 +38,10 @@ export default function ThemeCard({
           Author
         </a>
       </div>
-      <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
-    </ThemeCardWrapper>
+      <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">
+        {theme.description.substring(0, maxDescLen).trim() +
+          (theme.description.length > maxDescLen ? "..." : "")}
+      </p>
+    </ThemeCardWrapepr>
   );
 }