Create/Implement Icon Registry, Create/Update API search page #42

BorDevTech · 2026-01-15T22:43:51Z

This pull request introduces several improvements and refactors across multiple pages and API routes, focusing on code consistency, UI enhancements, and better resource management. The most significant changes include UI updates for the Contact and Services pages, improved icon usage, and the addition of a new resources file for API search functionality.

UI and Component Improvements

Refactored the Contact page (app/(Pages)/contact/page.tsx) to use consistent import styles, improved the rendering of social links and contact information by introducing the custom Icon component, and enhanced accessibility and layout for both desktop and mobile views. [1] [2] [3] [4] [5] [6] [7] [8] [9]
Updated the Services page (app/(Pages)/services/page.tsx) to use Chakra UI's SimpleGrid for better responsive layouts, streamlined the rendering of service and support cards, and improved the structure and readability of the page. [1] [2] [3] [4] [5]
Modernized the Home page (app/page.tsx) by updating import styles, replacing the icon in the "Learn More" button with the custom Icon component, and improving text formatting for clarity and consistency. [1] [2]

API and Resource Management

Added a new resources.json file (app/(API Routes)/api/search/resources.json) containing various resource links for re-entry, employment, housing, and crisis management, supporting API-based resource searches.
Introduced comments and documentation in API route files to clarify their purpose, including a catch-all search route and a dynamic state resource route. (app/(API Routes)/api/search/route.tsR1-R8, app/(API Routes)/api/search/[state]/route.tsR1)
Updated the file path construction in the blog search API route (app/(API Routes)/api/blog/search/route.ts) to remove the unnecessary "src" directory, improving compatibility with deployment environments.

…IconName for icon prop and improve code consistency

…g consistency and maintainability

…r icon props, enhancing consistency and maintainability across the application

…onality; update existing search route with comments for clarity

…ayout structure; integrate Icon component for consistency

Copilot

Pull request overview

This pull request introduces a centralized icon registry system and refactors icon usage throughout the application. The changes aim to standardize how icons are referenced and rendered across pages and components, moving from direct component imports to a string-based registry lookup system.

Changes:

Created a new icon registry system with a centralized Icon component that uses string-based icon names instead of direct component references
Refactored multiple data files and components to use the new IconName type instead of React.ComponentType or ReactNode
Updated Contact, Services, and Home pages to use the new Icon component
Added experimental optimization for Chakra UI package imports in Next.js config

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
next.config.ts	Adds experimental package import optimization for Chakra UI
data/services.ts	Updates icon references from component imports to string-based IconName type
data/get-involved.tsx	Refactors icon type from ReactNode to IconName
data/empowerment.tsx	Changes icon type to use string-based IconName
data/contact.tsx	Updates SocialLink interface to use IconName for platform field
components/ui/icons/index.ts	Changes from named exports to direct re-exports of React Icons
components/ui/icons/icon.tsx	Creates new Icon wrapper component for centralized icon rendering
components/ui/icons/icon-registry.tsx	Establishes centralized icon registry mapping string names to components
components/services/support-card.tsx	Updates to use new Icon component with name prop
components/services/service-card.tsx	Refactors to use Icon component and adds Chakra UI Card styling
components/services/faq-item.tsx	Updates to use Icon component for Plus/Minus icons
components/home/feature-card.tsx	Changes icon prop type to IconName and uses Icon component
components/common/iconbutton.tsx	Adds new (unused) IconButton component
components/common/footer.tsx	Updates all icon usage to new Icon component with string names
app/page.tsx	Refactors to use Icon component for ArrowRight icons
app/(Pages)/services/page.tsx	Adds SimpleGrid for responsive layout and removes duplicate sections
app/(Pages)/contact/page.tsx	Updates to use Icon component for social links and adds IconButton usage

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

data/get-involved.tsx

data/empowerment.tsx

Copilot · 2026-01-15T22:48:19Z

components/services/service-card.tsx

+            top={255}
+          />
+          <Heading as={"h4"}>{title}</Heading>
+          <h4>{title}</h4>


Duplicate title rendering. The title is rendered twice on consecutive lines - once as a Chakra UI Heading component and once as a plain h4 element. Remove the duplicate h4 element on line 40.

Suggested change

<h4>{title}</h4>

Copilot · 2026-01-15T22:48:19Z

app/(Pages)/contact/page.tsx


+                      <Icon name={link.platform} size={10} />


Duplicate Icon components. The same icon is rendered twice on consecutive lines (82 and 84) within the IconButton. Remove the duplicate Icon on line 84.

Suggested change

<Icon name={link.platform} size={10} />

Copilot · 2026-01-15T22:48:20Z

app/(Pages)/contact/page.tsx

+            <div>
+              {socialLinks.map((link) => (
+                <a
+                  key={link.platform}
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`Visit our ${link.platform} page`}
+                >
+                  <Icon name={link.platform} size={10} />
+                  <span>{link.platform}</span>
+                </a>
+              ))}
+            </div>


Duplicate social links sections. The social links are rendered in two separate sections (lines 50-63 and lines 64-89) with different styling but the same content. This appears to be leftover code from refactoring. Remove the duplicate section that is not intended to be displayed.

Suggested change

<div>

{socialLinks.map((link) => (

<a

key={link.platform}

href={link.url}

target="_blank"

rel="noopener noreferrer"

aria-label={`Visit our ${link.platform} page`}

>

<Icon name={link.platform} size={10} />

<span>{link.platform}</span>

</a>

))}

</div>

Copilot · 2026-01-15T22:48:21Z

components/common/iconbutton.tsx

+//Create a reusable IconButton component that takes in link, platform, url, and icon as props and renders an anchor tag with the provided icon.
+//  & React.ComponentProps<typeof ChakraIcon>
+
+export default function IconButton({
+  link,
+  platform,
+  url,
+  icon,
+}: {
+  link: string;
+  platform: string;
+  url: string;
+  icon: React.ReactNode;
+}) {


Unused component and parameter. This IconButton component is never imported or used anywhere in the codebase. Additionally, the link parameter in the function signature is defined but never used in the component body. Either remove this entire file if it's not needed, or remove the unused link parameter if the component will be used in the future.

components/ui/icons/icon-registry.ts

app/(Pages)/contact/page.tsx

Copilot · 2026-01-15T22:48:22Z

components/ui/icons/icon.tsx

+import { Icon as ChakraIcon } from "@chakra-ui/react";
+
+export type IconName = keyof typeof iconRegistry;
+
+type IconProps = {
+  name: IconName;
+  size?: number;
+  color?: string;
+} & React.ComponentProps<typeof ChakraIcon>;


Duplicate type export. The IconName type is exported in both icon.tsx (line 5) and icon-registry.tsx (line 30). This creates a duplicate export that could lead to confusion. Remove the export from icon.tsx and import it from icon-registry.tsx instead to maintain a single source of truth.

Suggested change

import { Icon as ChakraIcon } from "@chakra-ui/react";

export type IconName = keyof typeof iconRegistry;

type IconProps = {

name: IconName;

size?: number;

color?: string;

} & React.ComponentProps<typeof ChakraIcon>;

import type { IconName } from "./icon-registry";

import { Icon as ChakraIcon } from "@chakra-ui/react";

type IconProps = {

name: IconName;

size?: number;

color?: string;

} & React.ComponentProps<typeof ChakraIcon>;

app/(Pages)/contact/page.tsx

…e; update social links rendering and integrate Chakra UI components for consistency; enhance resource data structure in JSON; update dependencies to latest versions.

…ce form submission feedback with toaster notifications; improve layout and reset functionality.

… Chakra UI integration; remove old Search component for improved structure and maintainability.

…ion; integrate team member cards and enhance layout with Chakra UI components.

…lity

BorDevTech · 2026-01-20T04:43:20Z

@copilot re-review

Copilot · 2026-01-20T04:43:30Z

@BorDevTech I've opened a new pull request, #43, to work on those changes. Once the pull request is ready, I'll request review from you.

[WIP] Implement icon registry and update API search page

Copilot

Pull request overview

Copilot reviewed 27 out of 33 changed files in this pull request and generated 17 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

data/get-involved.tsx

components/home/feature-card.tsx

components/common/iconbutton.tsx

Copilot · 2026-01-20T04:50:49Z

components/ui/icons/icon.tsx

+import { iconRegistry } from "./icon-registry";
+import { Icon as ChakraIcon } from "@chakra-ui/react";
+
+export type IconName = keyof typeof iconRegistry;
+


The type IconName is duplicated here and also exported from icon-registry.tsx. This creates ambiguity about which import to use. Consider removing this duplicate type definition and importing IconName from icon-registry instead to maintain a single source of truth.

Suggested change

import { iconRegistry } from "./icon-registry";

import { Icon as ChakraIcon } from "@chakra-ui/react";

export type IconName = keyof typeof iconRegistry;

import { iconRegistry, IconName } from "./icon-registry";

import { Icon as ChakraIcon } from "@chakra-ui/react";

Copilot · 2026-01-20T04:50:49Z

app/(Pages)/contact/page.tsx

+  Image as ChakraImage,
+  Card,
+} from "@chakra-ui/react";
+import { poppins } from "../../../components/ui/fonts";


Unused import poppins.

Suggested change

import { poppins } from "../../../components/ui/fonts";

app/(Pages)/resources/page.tsx

components/contact/contact-form.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…management

…ith ChakraImage for better integration

… implement strong typing in TypeScript, and enhance search functionality with region and category filters using Chakra UI components.

…ports in ContactForm, and streamline FeatureCard component imports

Copilot

Pull request overview

Copilot reviewed 31 out of 36 changed files in this pull request and generated 8 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-20T14:55:48Z

components/common/iconbutton.tsx

+// Create a reusable IconButton component that takes in link, platform, url, and icon as props and renders an anchor tag with the provided icon.
+//  & React.ComponentProps<typeof ChakraIcon>
+
+export default function IconButton({
+  link,
+  platform,
+  url,
+  icon,
+}: {
+  link: string;
+  platform: string;
+  url: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`Visit our ${platform} page`}
+    >
+      {icon}
+    </a>
+  );
+}


The IconButton component is created but not used anywhere in the codebase. Consider removing this file or implementing its usage if it was intended for the icon refactor.

Suggested change

// Create a reusable IconButton component that takes in link, platform, url, and icon as props and renders an anchor tag with the provided icon.

// & React.ComponentProps<typeof ChakraIcon>

export default function IconButton({

link,

platform,

url,

icon,

}: {

link: string;

platform: string;

url: string;

icon: React.ReactNode;

}) {

return (

<a

href={url}

target="_blank"

rel="noopener noreferrer"

aria-label={`Visit our ${platform} page`}

>

{icon}

</a>

);

}

// This file previously contained an IconButton React component that was not used

// anywhere in the codebase. It has been removed to eliminate dead code.

// Explicitly mark this file as a module with no exports.

export {};

Copilot · 2026-01-20T14:55:49Z

components/common/iconbutton.tsx

+  link,
+  platform,
+  url,
+  icon,
+}: {
+  link: string;


The link parameter is defined but never used in this component. Remove the unused parameter or implement its intended functionality.

Suggested change

link,

platform,

url,

icon,

}: {

link: string;

platform,

url,

icon,

}: {

Copilot · 2026-01-20T14:55:49Z

components/contact/contact-form.tsx

  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [status, setStatus] = useState<SubmissionStatus>({ type: null, message: '' });
+  const submitToasterId = "contact-form-submission";
+  const [showToast, setShowToast] = useState(false);


Unused variable declaration. The showToast state is set but never used. Remove this unused state or implement its intended functionality.

Copilot · 2026-01-20T14:55:49Z

components/contact/contact-form.tsx

+  const [toastMessage, setToastMessage] = useState({
+    error: () => "",
+    loading: () =>
+      toaster.loading({
+        id: submitToasterId,
+        title: "Submitting form",
+        description: "Please wait while we submit your message.",
+        type: "info",
+        closable: true,
+      }),
+    update: () => "",
+    updateSuccess: () =>
+      toaster.update(submitToasterId, {
+        title: "Form submitted",
+        description: "Your message has been sent successfully.",
+        type: "success",
+        duration: 3000,
+        closable: true,
+      }),
+    reset: () =>
+      toaster.create({
+        title: "Form reset",
+        description: "The contact form has been cleared.",
+        type: "info",
+        closable: true,
+      }),
+  });


The toastMessage object contains unused properties (error and update). These functions are defined but never called. Remove unused functions or implement their intended functionality.

components/ui/icons/icon.tsx

Copilot · 2026-01-20T14:55:50Z

app/(Pages)/resources/page.tsx

+import { Tooltip } from "@/components/ui/tooltip";
+export default function SearchResources() {
+  //Retrieve mock data from json file
+  const [searchlist, setSearchlist] = useState(null);


Unused variable setSearchlist.

Suggested change

const [searchlist, setSearchlist] = useState(null);

const [searchlist] = useState(null);

data/empowerment.tsx

data/get-involved.tsx

…r cleaner code

Copilot

Pull request overview

Copilot reviewed 31 out of 36 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-20T15:06:48Z

components/ui/icons/icon.tsx

+// export type IconName = keyof typeof iconRegistry;
+


Remove commented-out code. This export type comment should either be removed entirely or the actual export should be uncommented and used, but keeping commented code reduces code cleanliness.

Suggested change

// export type IconName = keyof typeof iconRegistry;

Copilot · 2026-01-20T15:06:49Z

components/services/support-card.tsx

@@ -1,17 +1,20 @@
+import { IconName } from "../ui/icons/icon";


Unused import. The IconName type is imported but never used in this file since the icon prop type is defined inline as icon: IconName.

Suggested change

import { IconName } from "../ui/icons/icon";

import type { IconName } from "../ui/icons/icon";

Copilot · 2026-01-20T15:06:49Z

components/common/iconbutton.tsx

@@ -0,0 +1,25 @@
+// Create a reusable IconButton component that takes in link, platform, url, and icon as props and renders an anchor tag with the provided icon.
+//  & React.ComponentProps<typeof ChakraIcon>


Remove commented-out code. Lines 1-4 contain a comment about the component's purpose, but the implementation doesn't match the described interface. Either update the comment to reflect the actual implementation or remove it entirely.

Suggested change

// & React.ComponentProps<typeof ChakraIcon>

Copilot · 2026-01-20T15:06:49Z

components/common/iconbutton.tsx

+  link: string;
+  platform: string;
+  url: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <a
+      href={url}


The link parameter is defined but never used in this component. Consider removing it from the props interface or using it for the href attribute if that was the intention.

Suggested change

link: string;

platform: string;

url: string;

icon: React.ReactNode;

}) {

return (

<a

href={url}

link?: string;

platform: string;

url: string;

icon: React.ReactNode;

}) {

return (

<a

href={link ?? url}

Copilot · 2026-01-20T15:06:49Z

components/contact/contact-form.tsx

  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [status, setStatus] = useState<SubmissionStatus>({ type: null, message: '' });
+  const submitToasterId = "contact-form-submission";
+  const [showToast, setShowToast] = useState(false);


Unused variable showToast.

Suggested change

const [showToast, setShowToast] = useState(false);

BorDevTech added 8 commits January 15, 2026 07:29

Add experimental configuration for optimizing Chakra UI package imports

e9d5313

Add icon registry and icon component for improved icon management

4b1b1ce

Add reusable IconButton component for enhanced link management

5234996

Refactor FeatureCard, ServiceCard, and SupportCard components to use …

78d7a08

…IconName for icon prop and improve code consistency

Refactor FaqItem and services to use IconName for icon prop, enhancin…

3854568

…g consistency and maintainability

Refactor Services, Home, and Footer components to utilize IconName fo…

60798eb

…r icon props, enhancing consistency and maintainability across the application

Add dynamic state resource route and resources JSON for search functi…

49f4b44

…onality; update existing search route with comments for clarity

Refactor Contact page to enhance social links rendering and improve l…

66bda47

…ayout structure; integrate Icon component for consistency

BorDevTech added the enhancement New feature or request label Jan 15, 2026

BorDevTech marked this pull request as ready for review January 15, 2026 22:44

Copilot AI review requested due to automatic review settings January 15, 2026 22:44

Copilot started reviewing on behalf of BorDevTech January 15, 2026 22:45 View session

Copilot AI reviewed Jan 15, 2026

View reviewed changes

BorDevTech added 6 commits January 19, 2026 07:34

Refactor Contact page and form for improved layout and user experienc…

0800a57

…e; update social links rendering and integrate Chakra UI components for consistency; enhance resource data structure in JSON; update dependencies to latest versions.

Refactor ContactForm component to integrate Chakra UI elements; enhan…

6abaa23

…ce form submission feedback with toaster notifications; improve layout and reset functionality.

Add blog and resource JSON files; implement new Search component with…

2ad87bf

… Chakra UI integration; remove old Search component for improved structure and maintainability.

re-address About Us page and update navbar links for improved navigat…

cc33567

…ion; integrate team member cards and enhance layout with Chakra UI components.

Add Search icon to icon registry and index for improved icon availabi…

4181406

…lity

Remove commented-out code blocks for cleaner Home component structure

dedc010

Initial plan

93206ef

Copilot AI mentioned this pull request Jan 20, 2026

[WIP] Implement icon registry and update API search page #43

Merged

9 tasks

Merge pull request #43 from codingUnited/copilot/sub-pr-42

a323949

[WIP] Implement icon registry and update API search page

BorDevTech marked this pull request as draft January 20, 2026 04:45

BorDevTech marked this pull request as ready for review January 20, 2026 04:45

BorDevTech requested a review from Copilot January 20, 2026 04:47

Copilot started reviewing on behalf of BorDevTech January 20, 2026 04:47 View session

Copilot AI reviewed Jan 20, 2026

View reviewed changes

Apply suggestion from @Copilot

2b78bf9

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

BorDevTech and others added 12 commits January 19, 2026 23:59

Apply suggestion from @Copilot

ad8fcbc

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

6018d93

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

5756e50

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

c42f1c8

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

82fe4d9

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

41235f6

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

ece20bc

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Copilot

d15cd94

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

re-address icon registry and update icon component for improved icon …

d119dac

…management

Refactor Contact page to improve structure; replace Image component w…

4dc114d

…ith ChakraImage for better integration

Refactor resource management: restructure mock data into JSON format,…

7e6f4f7

… implement strong typing in TypeScript, and enhance search functionality with region and category filters using Chakra UI components.

Refactor Contact page: clean up main tag formatting, remove unused im…

e4f90ac

…ports in ContactForm, and streamline FeatureCard component imports

BorDevTech requested a review from Copilot January 20, 2026 14:52

Copilot started reviewing on behalf of BorDevTech January 20, 2026 14:53 View session

Copilot AI reviewed Jan 20, 2026

View reviewed changes

Remove unused imports from empowerment and get-involved components fo…

a5ee55a

…r cleaner code

BorDevTech requested a review from Copilot January 20, 2026 15:03

Copilot started reviewing on behalf of BorDevTech January 20, 2026 15:04 View session

Copilot AI reviewed Jan 20, 2026

View reviewed changes

BorDevTech merged commit f9cad04 into master Jan 20, 2026
6 checks passed

BorDevTech mentioned this pull request Jan 21, 2026

Create/Style base pages in Chakra UI #29

Open

4 tasks

This was linked to issues Jan 22, 2026

Create/Style Resources Page for Database #48

Open

Re-Integrate Icons as Updateable Registry #49

Closed

	const [searchlist, setSearchlist] = useState(null);
	const [searchlist] = useState(null);

		@@ -1,17 +1,20 @@
		import { IconName } from "../ui/icons/icon";

	import { IconName } from "../ui/icons/icon";
	import type { IconName } from "../ui/icons/icon";

		@@ -0,0 +1,25 @@
		// Create a reusable IconButton component that takes in link, platform, url, and icon as props and renders an anchor tag with the provided icon.
		// & React.ComponentProps<typeof ChakraIcon>

Create/Implement Icon Registry, Create/Update API search page #42

Create/Implement Icon Registry, Create/Update API search page #42

Uh oh!

Conversation

BorDevTech commented Jan 15, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

BorDevTech commented Jan 20, 2026

Uh oh!

Copilot AI commented Jan 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 20, 2026