From e9d53131e8c0a6ff42eacb4612869d753e162566 Mon Sep 17 00:00:00 2001 From: BorDevTech Date: Thu, 15 Jan 2026 07:29:22 -0500 Subject: [PATCH 01/29] Add experimental configuration for optimizing Chakra UI package imports --- next.config.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/next.config.ts b/next.config.ts index 8288bc4..a66ee15 100644 --- a/next.config.ts +++ b/next.config.ts @@ -4,6 +4,9 @@ const nextConfig: NextConfig = { /* config options here */ // output: 'standalone', + experimental: { + optimizePackageImports: ["@chakra-ui/react"], + }, }; export default nextConfig; From 4b1b1ce0058cd11054bd1706d104194c38755eb9 Mon Sep 17 00:00:00 2001 From: BorDevTech Date: Thu, 15 Jan 2026 07:29:41 -0500 Subject: [PATCH 02/29] Add icon registry and icon component for improved icon management --- components/ui/icons/icon-registry.tsx | 30 +++++++++++++++++++++++++++ components/ui/icons/icon.tsx | 24 +++++++++++++++++++++ components/ui/icons/index.ts | 28 +++++++------------------ 3 files changed, 61 insertions(+), 21 deletions(-) create mode 100644 components/ui/icons/icon-registry.tsx create mode 100644 components/ui/icons/icon.tsx diff --git a/components/ui/icons/icon-registry.tsx b/components/ui/icons/icon-registry.tsx new file mode 100644 index 0000000..a85ad8d --- /dev/null +++ b/components/ui/icons/icon-registry.tsx @@ -0,0 +1,30 @@ +// icon-registry.ts +import * as Icons from "./index"; + +export const iconRegistry = { + Cube: Icons.FaCube, + Plug: Icons.FaPlug, + UsersCog: Icons.FaUsersCog, + Newspaper: Icons.FaRegNewspaper, + Users: Icons.FaUsers, + Gem: Icons.FaRegGem, + ArrowRight: Icons.FaLongArrowAltRight, + Minus: Icons.FaMinus, + Plus: Icons.FaPlus, + MapPin: Icons.FaMapPin, + Facebook: Icons.FaFacebook, + FB: Icons.FaFacebook, + LinkedIn: Icons.FaLinkedin, + YouTube: Icons.FaYoutube, + Instagram: Icons.FaInstagram, + Phone: Icons.FaPhoneAlt, + Mail: Icons.FaEnvelope, + AngleRight: Icons.FaAngleRight, + BookOpen: Icons.FaBookOpen, + Megaphone: Icons.FaBullhorn, + Network: Icons.FaNetworkWired, + HandHoldingHeart: Icons.FaHandHoldingHeart, + Handshake: Icons.FaHandshake, + Donate: Icons.FaDonate, +}; +export type IconName = keyof typeof iconRegistry; diff --git a/components/ui/icons/icon.tsx b/components/ui/icons/icon.tsx new file mode 100644 index 0000000..d182966 --- /dev/null +++ b/components/ui/icons/icon.tsx @@ -0,0 +1,24 @@ +"use client"; +import { iconRegistry } from "./icon-registry"; +import { Icon as ChakraIcon } from "@chakra-ui/react"; + +export type IconName = keyof typeof iconRegistry; + +type IconProps = { + name: IconName; + size?: number; + color?: string; +} & React.ComponentProps; + +export function Icon({ name, ...props }: IconProps) { + const Component = iconRegistry[name]; + if (!Component) return null; + return ( + + ); +} diff --git a/components/ui/icons/index.ts b/components/ui/icons/index.ts index 53548dc..78d01b5 100644 --- a/components/ui/icons/index.ts +++ b/components/ui/icons/index.ts @@ -1,4 +1,4 @@ -import { +export { FaCube, FaPlug, FaUsersCog, @@ -16,24 +16,10 @@ import { FaPhoneAlt, FaEnvelope, FaAngleRight, + FaBookOpen, + FaBullhorn, + FaNetworkWired, + FaHandHoldingHeart, + FaHandshake, + FaDonate, } from "react-icons/fa"; - -export { - FaCube as CubeIcon, - FaPlug as PlugIcon, - FaUsersCog as UsersCogIcon, - FaRegNewspaper as NewspaperIcon, - FaUsers as UsersIcon, - FaRegGem as GemIcon, - FaLongArrowAltRight as ArrowRightIcon, - FaMinus as MinusIcon, - FaPlus as PlusIcon, - FaMapPin as MapPinIcon, - FaFacebook as FB, - FaLinkedin as LinkedIn, - FaYoutube as YouTube, - FaInstagram as Instagram, - FaPhoneAlt as PhoneIcon, - FaEnvelope as MailIcon, - FaAngleRight as AngleRightIcon, -}; From 52349968ec72d34a31e914ea15d36e0904acde45 Mon Sep 17 00:00:00 2001 From: BorDevTech Date: Thu, 15 Jan 2026 07:31:10 -0500 Subject: [PATCH 03/29] Add reusable IconButton component for enhanced link management --- components/common/iconbutton.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 components/common/iconbutton.tsx diff --git a/components/common/iconbutton.tsx b/components/common/iconbutton.tsx new file mode 100644 index 0000000..30ef065 --- /dev/null +++ b/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 + +export default function IconButton({ + link, + platform, + url, + icon, +}: { + link: string; + platform: string; + url: string; + icon: React.ReactNode; +}) { + return ( + + {icon} + + ); +} From 78d7a08e4d09df713e4830b2b52e83b7309de21e Mon Sep 17 00:00:00 2001 From: BorDevTech Date: Thu, 15 Jan 2026 07:31:42 -0500 Subject: [PATCH 04/29] Refactor FeatureCard, ServiceCard, and SupportCard components to use IconName for icon prop and improve code consistency --- components/home/feature-card.tsx | 32 +++++++++++------------ components/services/service-card.tsx | 38 +++++++++++++++++++++------- components/services/support-card.tsx | 9 ++++--- data/empowerment.tsx | 33 ++++++++++++------------ 4 files changed, 67 insertions(+), 45 deletions(-) diff --git a/components/home/feature-card.tsx b/components/home/feature-card.tsx index ddbc190..b33381f 100644 --- a/components/home/feature-card.tsx +++ b/components/home/feature-card.tsx @@ -1,33 +1,31 @@ -'use client' +"use client"; -import type { ReactNode } from 'react'; -import { Card, Avatar, Icon, Text } from '@chakra-ui/react'; - -import { poppins } from '../ui/fonts'; +import type { ReactNode } from "react"; +import { Card, Avatar, Text } from "@chakra-ui/react"; +import { Icon } from "../ui/icons/icon"; +import { poppins } from "../ui/fonts"; +import { IconName } from "../ui/icons/icon-registry"; type FeatureCardProps = { title: string; description: string; - icon: ReactNode; + icon: IconName; }; - export default function FeatureCard({ title, description, icon, }: FeatureCardProps) { - return ( - - - {icon} - + + + + + {title} - - {description} - + {description} - + ); -} \ No newline at end of file +} diff --git a/components/services/service-card.tsx b/components/services/service-card.tsx index 3096155..5625175 100644 --- a/components/services/service-card.tsx +++ b/components/services/service-card.tsx @@ -1,7 +1,11 @@ -import Image from 'next/image'; +"use client"; +import Image from "next/image"; +import { IconName } from "../ui/icons/icon-registry"; +import { Icon } from "../ui/icons/icon"; +import { Card, Image as ChakraImage, Heading } from "@chakra-ui/react"; interface ServiceCardProps { - icon: React.ComponentType; + icon: IconName; title: string; description: string; image: string; @@ -9,18 +13,34 @@ interface ServiceCardProps { } export default function ServiceCard({ - icon: Icon, + icon, title, description, image, imageAlt, }: ServiceCardProps) { return ( -
- -

{title}

-

{description}

- {imageAlt} -
+ + + {imageAlt} + + +
+ + {title} +

{title}

+

{description}

+
+ + ); } diff --git a/components/services/support-card.tsx b/components/services/support-card.tsx index d021769..36e5b87 100644 --- a/components/services/support-card.tsx +++ b/components/services/support-card.tsx @@ -1,17 +1,20 @@ +import { IconName } from "../ui/icons/icon"; +import { Icon } from "../ui/icons/icon"; + interface SupportCardProps { - icon: React.ComponentType; + icon: IconName; title: string; description: string; } export default function SupportCard({ - icon: Icon, + icon, title, description, }: SupportCardProps) { return (
- +
{title}

{description}

diff --git a/data/empowerment.tsx b/data/empowerment.tsx index 5af5fa1..1707ee0 100644 --- a/data/empowerment.tsx +++ b/data/empowerment.tsx @@ -1,35 +1,36 @@ -import { Users, BookOpen, Megaphone, Network } from 'lucide-react'; -import type { ReactNode } from 'react'; +import { Users, BookOpen, Megaphone, Network } from "lucide-react"; +import type { ReactNode } from "react"; +import { IconName } from "@/components/ui/icons/icon-registry"; export type Feature = { - icon: ReactNode; + icon: IconName; title: string; description: string; }; export const empowerment: Feature[] = [ { - icon: , - title: 'Educational Advancement', + icon: "BookOpen", + title: "Educational Advancement", description: - 'Deliver high-quality educational programs and conferences tailored to incarcerated and formerly incarcerated individuals, equipping them with essential skills for career success.', + "Deliver high-quality educational programs and conferences tailored to incarcerated and formerly incarcerated individuals, equipping them with essential skills for career success.", }, { - icon: , - title: 'Entrepreneurial Empowerment', + icon: "Users", + title: "Entrepreneurial Empowerment", description: - 'Develop and support entrepreneurship initiatives, providing business resources, mentorship, and guidance to foster self-employment and economic independence.', + "Develop and support entrepreneurship initiatives, providing business resources, mentorship, and guidance to foster self-employment and economic independence.", }, { - icon: , - title: 'Stigma Reduction & Advocacy', + icon: "Megaphone", + title: "Stigma Reduction & Advocacy", description: - 'Advocate for policies and cultural change through consulting services and partnerships, aiming to dismantle barriers and eliminate the stigma associated with incarceration.', + "Advocate for policies and cultural change through consulting services and partnerships, aiming to dismantle barriers and eliminate the stigma associated with incarceration.", }, { - icon: , - title: 'Community Building', + icon: "Network", + title: "Community Building", description: - 'Establish a supportive network for formerly incarcerated individuals, encouraging reintegration and connection through meaningful professional and social networks.', + "Establish a supportive network for formerly incarcerated individuals, encouraging reintegration and connection through meaningful professional and social networks.", }, -]; \ No newline at end of file +]; From 3854568be4776352ee8e22481217c6125dc2a8ed Mon Sep 17 00:00:00 2001 From: BorDevTech Date: Thu, 15 Jan 2026 07:32:04 -0500 Subject: [PATCH 05/29] Refactor FaqItem and services to use IconName for icon prop, enhancing consistency and maintainability --- components/services/faq-item.tsx | 10 ++--- data/services.ts | 74 ++++++++++++++++++-------------- 2 files changed, 46 insertions(+), 38 deletions(-) diff --git a/components/services/faq-item.tsx b/components/services/faq-item.tsx index 444ce4b..dc623ac 100644 --- a/components/services/faq-item.tsx +++ b/components/services/faq-item.tsx @@ -1,8 +1,8 @@ -'use client'; +"use client"; -import { useState } from 'react'; -import { PlusIcon, MinusIcon } from '../ui/icons'; -import { Button } from '@chakra-ui/react'; +import { useState } from "react"; +import { Button } from "@chakra-ui/react"; +import { Icon } from "../ui/icons/icon"; interface FaqItemProps { question: string; @@ -16,7 +16,7 @@ export default function FaqItem({ question, answer }: FaqItemProps) {
{isOpen &&

{answer}

}
diff --git a/data/services.ts b/data/services.ts index 17649e1..1da1327 100644 --- a/data/services.ts +++ b/data/services.ts @@ -1,7 +1,6 @@ -import { CubeIcon, PlugIcon, UsersCogIcon, NewspaperIcon, UsersIcon } from '@/components/ui/icons/index'; - +import { IconName } from "@/components/ui/icons/icon-registry"; export interface Service { - icon: React.ComponentType; + icon: IconName; title: string; description: string; image: string; @@ -9,7 +8,7 @@ export interface Service { } export interface SupportOption { - icon: React.ComponentType; + icon: IconName; title: string; description: string; } @@ -21,56 +20,65 @@ export interface FaqItem { export const services: Service[] = [ { - icon: CubeIcon, - title: 'Technical Assistance and Consulting for Colleges and Universities', - description: 'To provide consulting services to colleges and universities interested in establishing prison programs for incarcerated learners using micro-credentials and badging.', - image: '/assets/services/technical-assistance.jpg', - imageAlt: 'Technical Assistance', + icon: "Cube", + title: "Technical Assistance and Consulting for Colleges and Universities", + description: + "To provide consulting services to colleges and universities interested in establishing prison programs for incarcerated learners using micro-credentials and badging.", + image: "/assets/services/technical-assistance.jpg", + imageAlt: "Technical Assistance", }, { - icon: PlugIcon, - title: 'Stop the Stigma Conference', - description: 'To organize an annual conference that raises awareness and educates college students and community members about the issues surrounding incarceration and the importance of stopping the stigma.', - image: '/assets/services/stop-stigma.jpg', - imageAlt: 'Stop the Stigma Conference', + icon: "Plug", + title: "Stop the Stigma Conference", + description: + "To organize an annual conference that raises awareness and educates college students and community members about the issues surrounding incarceration and the importance of stopping the stigma.", + image: "/assets/services/stop-stigma.jpg", + imageAlt: "Stop the Stigma Conference", }, { - icon: UsersCogIcon, - title: 'Entrepreneurship Support for Formerly Incarcerated Individuals', - description: 'To provide support and resources to formerly incarcerated individuals who aspire to start their businesses', - image: '/assets/services/entrepreneurship.jpg', - imageAlt: 'Entrepreneurship Support', + icon: "UsersCog", + title: "Entrepreneurship Support for Formerly Incarcerated Individuals", + description: + "To provide support and resources to formerly incarcerated individuals who aspire to start their businesses", + image: "/assets/services/entrepreneurship.jpg", + imageAlt: "Entrepreneurship Support", }, ]; export const supportOptions: SupportOption[] = [ { - icon: NewspaperIcon, - title: 'Donate', - description: 'Your donation goes directly toward supporting our programs and services, creating a positive impact on the lives of justice-impacted individuals. Every contribution, big or small, makes a difference.', + icon: "Donate", + title: "Donate", + description: + "Your donation goes directly toward supporting our programs and services, creating a positive impact on the lives of justice-impacted individuals. Every contribution, big or small, makes a difference.", }, { - icon: UsersIcon, - 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.', + icon: "Users", + 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.", }, ]; export const faqItems: FaqItem[] = [ { - question: 'What is the vision of Mokse?', - answer: 'Mokse envisions a society where all individuals have equal opportunities to thrive, learn, and lead, free from the stigma and limitations associated with their pasts. We believe in empowering individuals to contribute positively to their communities.', + question: "What is the vision of Mokse?", + answer: + "Mokse envisions a society where all individuals have equal opportunities to thrive, learn, and lead, free from the stigma and limitations associated with their pasts. We believe in empowering individuals to contribute positively to their communities.", }, { - question: 'How can I get involved with Mokse?', - answer: 'There are several ways to get involved, including volunteering, attending our events, or supporting our programs. For additional information on volunteering email: volunteers@mokse.org.', + question: "How can I get involved with Mokse?", + answer: + "There are several ways to get involved, including volunteering, attending our events, or supporting our programs. For additional information on volunteering email: volunteers@mokse.org.", }, { - question: 'How does Mokse support formerly incarcerated individuals?', - answer: 'Mokse provides accessible education, entrepreneurial support, and empowerment resources designed to transform the lives of formerly incarcerated individuals, helping them achieve personal and professional growth.', + question: "How does Mokse support formerly incarcerated individuals?", + answer: + "Mokse provides accessible education, entrepreneurial support, and empowerment resources designed to transform the lives of formerly incarcerated individuals, helping them achieve personal and professional growth.", }, { - question: 'Where can I find more information about upcoming events?', - answer: 'You can find details about our upcoming events, including the Stop the Stigma Conference, on our website. We regularly update it with new information on conferences, workshops, and community initiatives.', + question: "Where can I find more information about upcoming events?", + answer: + "You can find details about our upcoming events, including the Stop the Stigma Conference, on our website. We regularly update it with new information on conferences, workshops, and community initiatives.", }, ]; From 60798ebf907d368b80758b45920bb155cc11165f Mon Sep 17 00:00:00 2001 From: BorDevTech Date: Thu, 15 Jan 2026 07:33:37 -0500 Subject: [PATCH 06/29] Refactor Services, Home, and Footer components to utilize IconName for icon props, enhancing consistency and maintainability across the application --- app/(Pages)/services/page.tsx | 127 +++---- app/page.tsx | 630 +++++++++++++++++++--------------- components/common/footer.tsx | 74 ++-- data/contact.tsx | 45 ++- data/get-involved.tsx | 23 +- 5 files changed, 479 insertions(+), 420 deletions(-) diff --git a/app/(Pages)/services/page.tsx b/app/(Pages)/services/page.tsx index 0536208..3ae04d6 100644 --- a/app/(Pages)/services/page.tsx +++ b/app/(Pages)/services/page.tsx @@ -47,92 +47,65 @@ export default function Services() { Whether you're seeking support for yourself or your organization, we invite you to learn more about our services and how we can help." > - {services.map((service) => ( - - ))} + + {services.map((service) => ( + + ))} + - - - -
-
-

Services

-

- At MOKSE, we offer a range of services designed to empower and - support our community -

-
- -
-

Take the Next Step Today!

-

- Whether you're seeking support for yourself or your - organization, we invite you to learn more about our services and how - we can help. -

-
- {services.map((service) => ( - - ))} -
-
- -
- Volunteer with us -
-

Make a Difference – Get Involved!

-

- Are you passionate about helping justice-impacted individuals? We - need compassionate volunteers to assist in various roles, - including mentorship, tutoring, and administrative support. -

+
+ Volunteer with us +
+

Make a Difference – Get Involved!

+

+ Are you passionate about helping justice-impacted individuals? + We need compassionate volunteers to assist in various roles, + including mentorship, tutoring, and administrative support. +

+ + + Get Involved + + +
+
+
+ + {supportOptions.map((option) => ( + + ))} + - Get Involved + Donate -
-
- -
-
- {supportOptions.map((option) => ( - - ))} -
- - - Donate - - -
- -
-

Find Out How MoKse Supports Change

-

Frequently Asked Questions

-
- {faqItems.map((item) => ( - - ))} -
-
-
- -