diff --git a/next.config.mjs b/next.config.mjs index 417488e..b7128d1 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -11,6 +11,7 @@ const nextConfig = { return config; }, images: { + unoptimized: true, remotePatterns: [ { protocol: 'https', diff --git a/playwright-tests/tests/navigation.page.spec.ts b/playwright-tests/tests/navigation.page.spec.ts index aa737c6..a835ccc 100644 --- a/playwright-tests/tests/navigation.page.spec.ts +++ b/playwright-tests/tests/navigation.page.spec.ts @@ -159,6 +159,7 @@ test.describe('Validate Navigation', () => { async ({ page }) => { await expect(page.getByRole('banner')).toHaveScreenshot( 'nav-mobile-closed.png', + { maxDiffPixels: 100 }, ); }, ); diff --git a/playwright-tests/utils/datafactory/nav.tests.ts b/playwright-tests/utils/datafactory/nav.tests.ts index da46b55..87bd325 100644 --- a/playwright-tests/utils/datafactory/nav.tests.ts +++ b/playwright-tests/utils/datafactory/nav.tests.ts @@ -57,7 +57,7 @@ export const aboutUsMenuItems = items.map(([name, url, text]) => ({ expectedText: text, })); const mentorshipItems = [ - ['Overview', '/'], + ['Overview', '/mentorship'], ['Mentors', '/mentorship/mentors'], ['Study Groups', '/mentorship/study-groups'], ['Resources', '/mentorship/resources'], diff --git a/src/components/MentorProfileCard.tsx b/src/components/MentorProfileCard.tsx index 1099d17..5cf706e 100644 --- a/src/components/MentorProfileCard.tsx +++ b/src/components/MentorProfileCard.tsx @@ -5,7 +5,7 @@ import StarIcon from '@mui/icons-material/Star'; import TwitterIcon from '@mui/icons-material/Twitter'; import { Box, Icon, Tab, Tabs, Typography } from '@mui/material'; import Image from 'next/image'; -import React, { useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { LinkButton } from '@components'; import { useIsMobile } from '@utils/theme-utils'; @@ -48,6 +48,8 @@ function TabPanel(props: TabPanelProps) { ); } +const FALLBACK_IMAGE = '/profile-illustration-female-fallback.jpg'; + export const MentorProfileCard: React.FC = ({ mentor, }) => { @@ -55,6 +57,12 @@ export const MentorProfileCard: React.FC = ({ const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue); const isMobile = useIsMobile(); + const [imgSrc, setImgSrc] = useState( + mentor.images[0]?.path || FALLBACK_IMAGE, + ); + const handleImageError = useCallback(() => { + setImgSrc(FALLBACK_IMAGE); + }, []); return ( = ({ }} >