Merge pull request #21 from 3timeslazy/fix-false

Fix conditional rendering
This commit is contained in:
Jordan Roher 2024-01-10 08:19:22 -08:00 committed by GitHub
commit be711e32ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 7 deletions

View File

@ -9,7 +9,10 @@ export const Header = function (props: IProps) {
const { icon, title } = props; const { icon, title } = props;
return ` return `
<div class="p-2 xl:p-4 flex flex-nowrap justify-center items-center gap-2 xl:flex-wrap"> <div class="p-2 xl:p-4 flex flex-nowrap justify-center items-center gap-2 xl:flex-wrap">
${!is.null(icon) && `<img src="${icon}" alt="${title || ""}" class="inline-block w-16 h-16" />`} ${!is.null(icon) ?
(`<img src="${icon}" alt="${title || ""}" class="inline-block w-16 h-16" />`) :
``
}
<h1>${title}</h1> <h1>${title}</h1>
</div> </div>
`; `;

View File

@ -30,24 +30,24 @@ function Service(props: IServiceProps) {
return ` return `
<li class="p-4 flex gap-4"> <li class="p-4 flex gap-4">
${ ${
!is.null(icon) && !is.null(icon) ?
` `
<span class="flex-shrink-0 flex"> <span class="flex-shrink-0 flex">
${Icon({ name, icon, uri, index, iconColor, iconBG, iconBubble, iconAspect, newWindow })} ${Icon({ name, icon, uri, index, iconColor, iconBG, iconBubble, iconAspect, newWindow })}
</span> </span>
` ` : ``
} }
<div> <div>
<h3 class="text-lg mt-1 font-semibold line-clamp-1"> <h3 class="text-lg mt-1 font-semibold line-clamp-1">
${Anchor({ uri, newWindow, children: name })} ${Anchor({ uri, newWindow, children: name })}
</h3> </h3>
${ ${
!is.null(description) && !is.null(description) ?
` `
<p class="text-sm text-black/50 dark:text-white/50 line-clamp-1"> <p class="text-sm text-black/50 dark:text-white/50 line-clamp-1">
${Anchor({ uri, newWindow, children: description })} ${Anchor({ uri, newWindow, children: description })}
</p> </p>
` ` : ``
} }
</div> </div>
</li> </li>

View File

@ -49,12 +49,12 @@ export const IndexPage = function (props: IProps): string {
<div class="min-h-screen"> <div class="min-h-screen">
<div class="${pageWrapperClassName}"> <div class="${pageWrapperClassName}">
${ ${
SHOWHEADER && SHOWHEADER ?
` `
<div class="${headerClassName}"> <div class="${headerClassName}">
${Header({ icon, title })} ${Header({ icon, title })}
</div> </div>
` ` : ``
} }
<div class="${serviceCatalogListWrapperClassName}"> <div class="${serviceCatalogListWrapperClassName}">
${ServiceCatalogList({ catalogs: myServices })} ${ServiceCatalogList({ catalogs: myServices })}