joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #102 from ktz-dev/themecard_size_limit

Browse Source 
feat: Giving length limits to ThemeCards
This commit is contained in:
mauro 🤙
2024-08-26 14:09:05 +02:00
committed by GitHub
parent df7e40353c 6e7a63f619
commit cdc0506252
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/theme-card.tsx
View File

@@ -11,6 +11,10 @@ export default function ThemeCard({
}: { }: {
theme: ZenTheme; theme: ZenTheme;
}) { }) {
const maxNameLen = 50;
const maxDescLen = 100;
return ( return (
<ThemeCardWrapper onClick={(event) => { <ThemeCardWrapper onClick={(event) => {
if (event.target instanceof HTMLAnchorElement) return; 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 "> }} 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} <Image src={theme.image} alt={theme.name} width={500} height={500} quality={100}
className="w-full h-32 object-cover rounded-lg border shadow" /> 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"> <div className="flex mt-2">
{theme.homepage && ( {theme.homepage && (
<> <>
@@ -34,7 +38,10 @@ export default function ThemeCard({
Author Author
</a> </a>
</div> </div>
<p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p> <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">
</ThemeCardWrapper> {theme.description.substring(0, maxDescLen).trim() +
(theme.description.length > maxDescLen ? "..." : "")}
</p>
</ThemeCardWrapepr>
); );
} }