Refactor and enhance Services and SupportCard components#50
Refactor and enhance Services and SupportCard components#50
Conversation
…ra UI, add image support, and enhance service options with new images and descriptions
…pdate layout with new SectionTemplate, and include new image for services
There was a problem hiding this comment.
Pull request overview
This PR refactors the Services and SupportCard components to use Chakra UI layout components, adds image support to cards, and introduces a new "Volunteer" support option. The refactoring consolidates the previously separate volunteer section into the support options grid, creating a more consistent user experience.
Changes:
- Added
iconLink,image, andimageAltproperties to Service and SupportOption interfaces - Refactored ServiceCard and SupportCard components to display images and make icons clickable links
- Added a new "Volunteer" support option to replace the standalone volunteer section
- Updated the services page layout to use SectionTemplate consistently
Reviewed changes
Copilot reviewed 4 out of 7 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Added Next.js development type paths for better TypeScript support |
| data/services.ts | Added iconLink, image, and imageAlt properties to interfaces; added new Volunteer support option |
| components/services/support-card.tsx | Refactored to display images and make icons clickable with external links |
| components/services/service-card.tsx | Refactored to display images and make icons clickable with external links |
| app/(Pages)/services/page.tsx | Removed standalone volunteer section, wrapped support options in SectionTemplate |
| public/assets/services/1112.jpg | Added image file (not currently referenced in code) |
| public/Image-1-1.jpg | Image file used elsewhere in the application |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <ChakraLink asChild> | ||
| <NextLink | ||
| href={iconLink} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Icon | ||
| name={icon} | ||
| bg={"teal.focusRing"} | ||
| borderRadius={"lg"} | ||
| p={4} | ||
| boxSize={14} | ||
| position={"absolute"} | ||
| right={10} | ||
| top={255} | ||
| /> | ||
| </NextLink> | ||
| </ChakraLink> |
There was a problem hiding this comment.
The icon link lacks accessible text. While the icon is wrapped in a link, screen reader users won't know what the link does. Consider adding an aria-label attribute to the NextLink component (e.g., aria-label="Learn more about {title}") or using a visually-hidden text span to describe the link's purpose.
| title: "Partnership Opportunities", | ||
| description: | ||
| "We welcome partnerships with businesses, educational institutions, state agencies, and other nonprofits. Join us in creating meaningful change through collaborative projects and shared resources.", | ||
| image: "/assets/services/partnership.jpg", |
There was a problem hiding this comment.
The image file "/assets/services/partnership.jpg" referenced here does not exist in the public directory. This will cause a broken image in the UI when the Partnership Opportunities card is rendered.
| image: "/assets/services/partnership.jpg", | |
| image: "/assets/services/volunteer.jpg", |
| position={"absolute"} | ||
| right={10} | ||
| top={255} | ||
| /> |
There was a problem hiding this comment.
There is trailing whitespace after the closing angle bracket on this line. This should be removed to maintain code cleanliness.
| import { IconName } from "../ui/icons/icon-registry"; | ||
| import { Icon } from "../ui/icons/icon"; | ||
| import { Card, Image as ChakraImage, Heading } from "@chakra-ui/react"; | ||
| import { Link as ChakraLink, SimpleGrid } from "@chakra-ui/react"; |
There was a problem hiding this comment.
SimpleGrid is imported but never used in this component. This import should be removed to keep the code clean and avoid unused dependencies.
| import { Link as ChakraLink, SimpleGrid } from "@chakra-ui/react"; | |
| import { Link as ChakraLink } from "@chakra-ui/react"; |
| import { IconName } from "../ui/icons/icon-registry"; | ||
| import { Icon } from "../ui/icons/icon"; | ||
| import { Card, Image as ChakraImage, Heading } from "@chakra-ui/react"; | ||
| import { Link as ChakraLink, SimpleGrid } from "@chakra-ui/react"; |
There was a problem hiding this comment.
SimpleGrid is imported but never used in this component. This import should be removed to keep the code clean and avoid unused dependencies.
| import { Link as ChakraLink, SimpleGrid } from "@chakra-ui/react"; | |
| import { Link as ChakraLink } from "@chakra-ui/react"; |
| import { Card, Image as ChakraImage, Heading } from "@chakra-ui/react"; | ||
| import { Link as ChakraLink, SimpleGrid } from "@chakra-ui/react"; | ||
|
|
||
|
|
There was a problem hiding this comment.
There is an extra blank line here that should be removed for consistency with the rest of the codebase. The import section should not have multiple consecutive blank lines.
|
|
||
|
|
||
|
|
||
| </section> | ||
| <section> |
There was a problem hiding this comment.
This empty section element serves no purpose and should be removed. It contains only whitespace and no content, adding unnecessary markup to the page structure.
| </section> | |
| <section> |
| <ChakraImage asChild borderTopRadius={8}> | ||
| <Image src={image} alt={imageAlt} width={384} height={286} /> | ||
| </ChakraImage> | ||
| <Card.Body height={400}> | ||
| <ChakraLink asChild> | ||
| <NextLink | ||
| href={iconLink} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Icon | ||
| name={icon} | ||
| bg={"teal.focusRing"} | ||
| borderRadius={"lg"} | ||
| p={4} | ||
| boxSize={14} | ||
| position={"absolute"} | ||
| right={10} | ||
| top={255} | ||
| /> | ||
| </NextLink> | ||
| </ChakraLink> | ||
| <Heading as={"h4"}>{title}</Heading> | ||
| <Card.Description>{description}</Card.Description> | ||
| </Card.Body> | ||
| </Card.Root> |
There was a problem hiding this comment.
The indentation is inconsistent here. The ChakraImage component and Card.Body should be indented at the same level as siblings within Card.Root. Currently, they have extra indentation (10 spaces instead of 6), which is inconsistent with the indentation pattern used in the rest of the codebase.
| <ChakraImage asChild borderTopRadius={8}> | |
| <Image src={image} alt={imageAlt} width={384} height={286} /> | |
| </ChakraImage> | |
| <Card.Body height={400}> | |
| <ChakraLink asChild> | |
| <NextLink | |
| href={iconLink} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| <Icon | |
| name={icon} | |
| bg={"teal.focusRing"} | |
| borderRadius={"lg"} | |
| p={4} | |
| boxSize={14} | |
| position={"absolute"} | |
| right={10} | |
| top={255} | |
| /> | |
| </NextLink> | |
| </ChakraLink> | |
| <Heading as={"h4"}>{title}</Heading> | |
| <Card.Description>{description}</Card.Description> | |
| </Card.Body> | |
| </Card.Root> | |
| <ChakraImage asChild borderTopRadius={8}> | |
| <Image src={image} alt={imageAlt} width={384} height={286} /> | |
| </ChakraImage> | |
| <Card.Body height={400}> | |
| <ChakraLink asChild> | |
| <NextLink | |
| href={iconLink} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| <Icon | |
| name={icon} | |
| bg={"teal.focusRing"} | |
| borderRadius={"lg"} | |
| p={4} | |
| boxSize={14} | |
| position={"absolute"} | |
| right={10} | |
| top={255} | |
| /> | |
| </NextLink> | |
| </ChakraLink> | |
| <Heading as={"h4"}>{title}</Heading> | |
| <Card.Description>{description}</Card.Description> | |
| </Card.Body> | |
| </Card.Root> |
| position={"absolute"} | ||
| right={10} | ||
| top={255} | ||
| /> |
There was a problem hiding this comment.
There is trailing whitespace after the closing angle bracket on this line. This should be removed to maintain code cleanliness.
Update layout with Chakra UI, add image support, and introduce new properties for enhanced service options. Include new images and descriptions to improve user engagement.