Remove deprecated image files and update image imports in antifp and eap pages for improved maintainability and consistency.
This commit is contained in:
@@ -5,6 +5,15 @@ import Button from '~/components/ui/Button.astro';
|
||||
import ImageModal from '~/components/ui/ImageModal.astro';
|
||||
import type { Testimonials as Props } from '~/types';
|
||||
import DefaultImage from '~/assets/images/default.png';
|
||||
import Image from '~/components/common/Image.astro';
|
||||
import SN_Logo2 from '~/assets/images/certificates/SN_Logo2.webp';
|
||||
import CertifiedNexthinkProfessionalinApplicationExperienceManagement from '~/assets/images/certificates/CertifiedNexthinkProfessionalinApplicationExperienceManagement.webp';
|
||||
import NexthinkAdministrator from '~/assets/images/certificates/NexthinkAdministrator.webp';
|
||||
import NexthinkAssociate from '~/assets/images/certificates/NexthinkAssociate.webp';
|
||||
import CrucialConversations_FMD_logo from '~/assets/images/certificates/CrucialConversations_FMD-logo.webp';
|
||||
import PCEP from '~/assets/images/certificates/PCEP.webp';
|
||||
import MicrosoftCertifiedAssociateBadge from '~/assets/images/certificates/microsoft-certified-associate-badge.webp';
|
||||
import MicrosoftCertifiedFundamentalsBadge from '~/assets/images/certificates/microsoft-certified-fundamentals-badge.webp';
|
||||
|
||||
// Function to get the correct image path for a testimonial
|
||||
const getImagePath = (image: unknown) => {
|
||||
@@ -47,39 +56,70 @@ const {
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
||||
{
|
||||
testimonials &&
|
||||
testimonials.map(({ linkUrl, name, issueDate, description, image }) => (
|
||||
<div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
|
||||
<div class="flex items-center mb-3">
|
||||
<div
|
||||
class="h-12 w-12 mr-3 flex-shrink-0 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center overflow-hidden cursor-pointer"
|
||||
onclick={`window.openImageModal('${getImagePath(image)}', ${JSON.stringify(name || "Certification badge")})`}
|
||||
>
|
||||
<img
|
||||
src={getImagePath(image)}
|
||||
alt={getImageAlt(image, name || "Certification badge")}
|
||||
class="h-10 w-10 object-contain transition-transform duration-300 hover:scale-110"
|
||||
/>
|
||||
testimonials.map(({ linkUrl, name, issueDate, description, image }) => {
|
||||
let imageSrc = null;
|
||||
switch (image.src) {
|
||||
case '/images/certificates/SN_Logo2.webp':
|
||||
imageSrc = SN_Logo2;
|
||||
break;
|
||||
case '/images/certificates/CertifiedNexthinkProfessionalinApplicationExperienceManagement.webp':
|
||||
imageSrc = CertifiedNexthinkProfessionalinApplicationExperienceManagement;
|
||||
break;
|
||||
case '/images/certificates/NexthinkAdministrator.webp':
|
||||
imageSrc = NexthinkAdministrator;
|
||||
break;
|
||||
case '/images/certificates/NexthinkAssociate.webp':
|
||||
imageSrc = NexthinkAssociate;
|
||||
break;
|
||||
case '/images/certificates/CrucialConversations_FMD-logo.webp':
|
||||
imageSrc = CrucialConversations_FMD_logo;
|
||||
break;
|
||||
case '/images/certificates/PCEP.webp':
|
||||
imageSrc = PCEP;
|
||||
break;
|
||||
case '/images/certificates/microsoft-certified-associate-badge.webp':
|
||||
imageSrc = MicrosoftCertifiedAssociateBadge;
|
||||
break;
|
||||
case '/images/certificates/microsoft-certified-fundamentals-badge.webp':
|
||||
imageSrc = MicrosoftCertifiedFundamentalsBadge;
|
||||
break;
|
||||
default:
|
||||
imageSrc = image.src;
|
||||
}
|
||||
return (
|
||||
<div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
|
||||
<div class="flex items-center mb-3">
|
||||
<div
|
||||
class="h-12 w-12 mr-3 flex-shrink-0 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center overflow-hidden cursor-pointer"
|
||||
onclick={`window.openImageModal('${typeof imageSrc === 'object' && imageSrc.src ? imageSrc.src : imageSrc}', ${JSON.stringify(name || "Certification badge")})`}
|
||||
>
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={name || "Certification badge"}
|
||||
class="h-10 w-10 object-contain transition-transform duration-300 hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
<a href={linkUrl} target="_blank" rel="noopener noreferrer" class="flex-1">
|
||||
<div>
|
||||
{name && <p class="text-sm font-semibold line-clamp-2">{name}</p>}
|
||||
{issueDate && <p class="text-sm text-muted">{issueDate}</p>}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<a href={linkUrl} target="_blank" rel="noopener noreferrer" class="flex-1">
|
||||
<div>
|
||||
{name && <p class="text-sm font-semibold line-clamp-2">{name}</p>}
|
||||
{issueDate && <p class="text-sm text-muted">{issueDate}</p>}
|
||||
|
||||
<a href={linkUrl} target="_blank" rel="noopener noreferrer" class="block">
|
||||
<div class="text-sm text-muted overflow-hidden">
|
||||
<div class="relative">
|
||||
<div class="max-h-[7.5rem] hover:max-h-[400px] transition-all duration-500 ease-cert overflow-hidden">
|
||||
{description}
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0 h-6 pointer-events-none hover:opacity-0 transition-opacity duration-500" style="transform: translateY(6px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a href={linkUrl} target="_blank" rel="noopener noreferrer" class="block">
|
||||
<div class="text-sm text-muted overflow-hidden">
|
||||
<div class="relative">
|
||||
<div class="max-h-[7.5rem] hover:max-h-[400px] transition-all duration-500 ease-cert overflow-hidden">
|
||||
{description}
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0 h-6 pointer-events-none hover:opacity-0 transition-opacity duration-500" style="transform: translateY(6px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user