- Change your life while changing the world! Lead ambitious - agile teams designed to engage new learners and solve real - problems, all with guidance and support from people who have - walked the same path. -
-- You'll gain the soft skills needed to land more senior - roles in your career while managing projects and making - lifelong friends. Join a growing network of software - professionals working to build something great, together. -
- - } - titleUnderlineColor={theme.colors.ACCENT_2} - imageSrc={manGlassesImage} - imageOutlineColor={theme.colors.NEUTRAL_1} - /> - -- We build awesome things, and you can join us! -
{" "} -The Dev Launchers Project Ethos:
--
-
- Keep it exciting, always -
- - Encourage people at all levels and from all backgrounds to - learn technical skills - -
- - When given the chance, experiment with groundbreaking - technology. - -
- Make the world better -
+
+
+ );
+};
+
+export default CardImagePair;
diff --git a/apps/website/src/components/modules/Home/Sections/Carousel.tsx b/apps/website/src/components/modules/Home/Sections/Carousel.tsx
new file mode 100644
index 000000000..9206143fa
--- /dev/null
+++ b/apps/website/src/components/modules/Home/Sections/Carousel.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselNext,
+ CarouselPrevious,
+} from '@devlaunchers/components/components/Carousel/Carousel';
+
+const testimonials = [
+ {
+ content:
+ 'I joined Dev launchers as a volunteer and it helped me to polish my skills and the experience of working as a team. I was able to showcase my volunteer works in interviews which helped me to land on a new position with a company in a short span of time. Dev launchers provides people from diverse backgrounds the skills and resources necessary to succeed in their careers. I am happy that I made a wise choice by considering volunteer at Dev launchers. You will be surprised at just how much you can gain from taking the plunge.',
+ author: 'Hredhya M.',
+ role: 'Previous Lead',
+ },
+ {
+ content:
+ "Dev Launchers is a great organization to volunteer with, and I would recommend it to anyone looking for an opportunity to learn new things, grow your skills and experience in Tech and work with great people all around the world. I've been volunteering for 9 months now and it has been a great experience. Members are very collaborative, kind and polite. Whoever wants to learn new stuff, join teams full of great people and work on open source projects that has real impact this is the place for that! One of the best decisions I've ever made.",
+ author: 'Julie M.',
+ role: 'Previous Lead',
+ },
+ {
+ content:
+ 'Dev Launchers is an excellent organization, which helps the development of both participants and volunteers alike. The management is flexible, competent, open to ideas, and has plenty of knowledge to share. The culture is fantastic, and each meeting is productive and fun.',
+ author: 'Mohammedi A.',
+ role: 'Previous Member',
+ },
+ {
+ content:
+ 'Dev Launchers is an excellent organization, which helps the development of both participants and volunteers alike. The management is flexible, competent, open to ideas, and has plenty of knowledge to share. The culture is fantastic, and each meeting is productive and fun.',
+ author: 'James D.',
+ role: 'Previous Member',
+ },
+];
+
+const TestimonialCarousel = () => {
+ return (
+
+ 
+
+
+
+
+
+
+ {title}
++ {description} +
+
+
+ {btnText}
+
+ {/* Fade effect containers */}
+
+
+
+ {/* Main carousel container */}
+
+ );
+};
+
+export default TestimonialCarousel;
diff --git a/apps/website/src/components/modules/Home/Sections/Community.tsx b/apps/website/src/components/modules/Home/Sections/Community.tsx
new file mode 100644
index 000000000..076a3869f
--- /dev/null
+++ b/apps/website/src/components/modules/Home/Sections/Community.tsx
@@ -0,0 +1,42 @@
+import TestimonialCarousel from './Carousel';
+import React from 'react';
+import { Section } from './Section';
+import { styles } from '../styles';
+import { sections } from './sections';
+
+const stats = [
+ {
+ number: '200+',
+ description: "Alumni and members who've been part of our journey",
+ },
+ { number: '8+', description: 'Countries represented in our community' },
+ { number: '5', description: 'Continents united through technology' },
+];
+
+const CommunitySection = () => (
+
+
+
+ {testimonials.map((testimonial, index) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+ + {testimonial.content} +
+
+
+
+ {testimonial.author[0]}
+
+
+
+ + {testimonial.author} +
++ {testimonial.role} +
+
+
+
+
+ {sections.community.title}
++ {sections.community.description} +
+
+ {stats.map((stat, index) => (
+
+
+
+ ))}
+
+
+ {stat.number}
+
+
+ + {stat.description} +
+
+
+ {sections.donate.title}
++ {sections.donate.description} +
+
+
+
+
+
+
+
+ {sections.features.title}
++ {sections.features.description} +
+
+ {features.map((item, index) => (
+
+
+
+ + {sections.hero.title} +
+{sections.hero.description}
+
+
+
+
+
+
+
+ {sections.hero.label}
+
+ 
+ 
+ 
+
+
+
+
+
+
+ {sections.join.title}
+{sections.join.description}
+
+
+
+
+
+
+
+ + {sections.opportunities.title} +
++ {sections.opportunities.description} +
+
+ {opportunities.map((item, index) => (
+
+
+
+ {sections.build.title}
+{sections.build.description}
+
+
+
+
+
+
+
+ {techStack.map(({ name, alt, link, color, Icon }) => (
+
+ {Icon}
+ {name}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/apps/website/src/pages/about.js b/apps/website/src/pages/about.js
new file mode 100644
index 000000000..8edd87439
--- /dev/null
+++ b/apps/website/src/pages/about.js
@@ -0,0 +1,374 @@
+import { Donate } from '../../../website/src/components/modules/Home/Sections';
+import Head from 'next/head';
+
+export default function About() {
+ return (
+ <>
+
+
+
+ + Fuel the Future +
++ Help Dev Launchers provide resources and opportunity for developers, + creatives, and innovators from diverse backgrounds to gain the + skills and knowledge necessary to launch their careers to the next + level. +
+
+
+ + Support Our Mission +
++ Dev Launchers is a 501(c)(3) nonprofit intent on empowering diverse + creatives, innovators, and leaders. We're working on touching as + many lives as we possibly can, and need your help to make that + happen. Any amount helps! +
+ +
+
+ + Partner with Us +
++ At Dev Launchers, we believe in the power of collaboration to create + transformative experiences. Join us in our mission to bridge + opportunity gaps in the tech industry by becoming a partner. Your + involvement can help provide essential resources, mentorship, and + opportunities to those who are eager to learn and grow in their + careers. Whether you are a company, a professional group, or an + individual with a passion for technology and education, your support + is crucial in building a more inclusive and diverse tech community. +
+ +
+
+ + Become a Mentor +
++ Share your expertise and inspire tech enthusiasts at every career + stage by becoming a mentor at Dev Launchers. As a mentor, you play a + crucial role in helping our diverse members navigate the + complexities of technology and design, guiding them to the next + level in their careers. Your involvement not only shapes their + professional journey but also enhances your leadership and teaching + skills within a collaborative and supportive environment. Whether + you're leading workshops or guiding a team, your contribution helps + turn potential into significant career growth. Join us to foster a + space where every interaction is an opportunity for mutual learning + and every challenge a chance to advance together. +
+ +
+
+ + Our Mission +
++ At Dev Launchers, we empower individuals to excel in their tech + careers at every stage of their journey. We believe that + technology careers should be accessible to everyone, regardless of + their background or starting point. +
+
+
+ + Our Story +
++ Founded in 2019 in Austin, Texas, Dev Launchers began as a + Saturday program teaching coding and game development to local + teenagers. What started as a small group of passionate volunteers + at the Austin Central Library has grown into a global community of + developers, designers, and technology enthusiasts. When the world + shifted in 2020, so did we – transitioning to a fully online + platform that opened our doors to members worldwide. This pivot + allowed us to expand our mission beyond geographical boundaries + and age restrictions, creating a truly inclusive space for anyone + interested in technology. Today, Dev Launchers operates with 6 + dedicated teams and over 50 active members across the globe, from + the United States to Australia, united by our mission to + democratize access to technology careers and launch our members to + the next level in their careers through experience and community. +
+
+
+
+ + What We Do +
+ +
+
+
+
+ + Create +
++ We're developing a platform to foster new projects, where ideas + come to life through collaboration and shared learning. Our + members work on real-world projects, gaining practical + experience in software development, design, and project + management. +
+
+
+ + Connect +
++ We build professional networks and forge friendships across the + globe. Our community spans multiple continents, bringing + together diverse perspectives and experiences. We believe great + accomplishments come from teamwork. +
+
+
+ + Grow +
++ We mentor new members, encourage leadership development, and + expand our community. Learning from mistakes is part of our + journey, and we celebrate both the successes and the learning + opportunities along the way. +
+
+
+ + Have Fun! +
++ We believe that engagement is the gateway to learning, and + learning should be enjoyable. While we tackle challenging + problems, we maintain an environment that promotes creativity, + curiosity, and enjoyment. +
+
+
+
+ + Our Values +
++ At Dev Launchers, our values shape how we work, learn, and grow + together. We believe that the best experiences come from combining + excitement and intention - making learning fun while staying + committed to continuous improvement. We foster deep connections + and emphasize teamwork, knowing that our greatest achievements + come from working together. Our community is built on the + foundation of mutual support, where asking for help is celebrated + and every success is shared. +
+
+
+
+
+ + Excitement +
++ Excitement drives engagement and fuels learning. When you're + genuinely excited about what you're creating, learning happens + naturally. We create an environment where curiosity is + celebrated and enthusiasm is contagious. +
+
+
+ + Intention +
++ Success isn't about being the smartest or the most talented – + it's about showing up every day with purpose and dedication. We + approach challenges methodically, knowing that persistent, + intentional effort leads to breakthrough solutions. +
+
+
+ + Connection +
++ In our community, reaching out for help is a sign of strength, + not weakness. Strong connections form the foundation of + effective learning and innovation. We celebrate collaboration + and understand that our diverse perspectives make us stronger + together. +
+
+
+ + Building +
++ Progress isn't always linear, and success looks different for + everyone. We encourage thoughtful self-assessment and believe in + setting meaningful, personal benchmarks for growth. Through + iterative development, we build both our projects and ourselves. +
+
+
+ + Teamwork +
++ Individual achievements are team victories. We foster an + environment where success is shared and celebrated collectively. + Respect isn't just an ideal – it's woven into how we collaborate + and support each other every day. +
+
+
+ + Leadership +
++ Leadership isn't about titles; it's about taking initiative and + responsibility. Whether you're mentoring others, leading a + project, or suggesting improvements, we encourage everyone to + step into leadership roles and make positive changes. +
+
+
+
+ + Partner with Us +
++ At Dev Launchers, we believe in the power of collaboration to + create transformative experiences. Join us in our mission to + bridge opportunity gaps in the tech industry by becoming a + partner. Your involvement can help provide essential resources, + mentorship, and opportunities to those who are eager to learn and + grow in their careers. Whether you are a company, a professional + group, or an individual with a passion for technology and + education, your support is crucial in building a more inclusive + and diverse tech community. +
+
+
+
+
+ + Our Partners and Sponsors +
+
+
+
+
+ + Powered by Leading Technology Companies +
++ Dev Launchers is proud to be supported by grants from industry + leaders who share our vision of making technology careers + accessible to everyone. Through the generous support of Google + and Microsoft, we're able to expand our reach and enhance our + programs while maintaining our commitment to providing free, + high-quality technology education and project-based learning + opportunities. +
+
+
+ + Community Partnerships +
++ Our roots in the Austin community run deep, starting with our + founding partnership with the Austin Public Library. This + collaboration helped launch our initial programming and + continues to inspire our mission of democratizing access to + technology education. We're also proud to partner with + organizations like Aseprite and Krafties, who help us provide + our members with the tools and resources they need to bring + their creative visions to life. +
+
+
+ + Building Together +
++ These partnerships represent more than just financial support – + they're relationships that help us create meaningful + opportunities for our community. Our partners share our + commitment to making technology education accessible to + everyone, supporting diverse talent in the tech industry, + creating hands-on learning opportunities, building pathways to + technology careers, and fostering an inclusive tech community. + Together with our partners, we're working to break down barriers + and create a more equitable tech ecosystem where everyone has + the opportunity to learn, grow, and succeed. +
+
+
+
+ + Our Teams +
++ {' '} + Our organization is entirely powered by our volunteer members + dedicated to launching their own careers as well as supporting + others building our collective, supportive and innovative + community. +
+
+
+
+
+ + Dev Recruit +
++ {' '} + Our internal recruitment platform that powers our teams through + providing recruitment management and support. +
+
+
+ + IdeaSpace +
++ Turn dreams into software ideas, a place to discover new ideas + or workshop your ideas and turn them into reality. +
+
+
+ + Platform +
++ {' '} + Our core development team that supports our community platform + through full-stack developed assets. +
+
+
+ + User Profile +
++ Powering the profile features and enabling connection and + collaboration support for our membership community. +
+
+
+ + AI Ally +
++ {' '} + Leveraging AI capabilities to improve our internal processes and + member workflow. +
+
+
+ + Universal Design +
++ {' '} + Building and maintaining our design system and brand identity + for the organization while providing assets and framework to + power our teams creativity to build unlocked +
+
+
+ + Collaborate with Us +
++ Collaborate with us to build real-world projects and gain + invaluable experience. Whether you're a beginner or a seasoned + professional your journey starts here! +
+
+
+ + Choose Your Journey +
++ Our community is diverse, and so are the ways you can join us. We + understand that everyone has different goals and availability, + which is why we offer a variety of membership pathways to support + each member uniquely. Select your path at Dev Launchers with our + tailored membership levels. We have a place for you whether you + want to grow independently in our Orbit, transition between levels + as a Traveler, or empower our core initiatives. +
+
+
+
+
+ + Orbit +
++ Engage with our community at your own pace, access resources, + and join our network. +
+
+
+ + Traveler +
++ Dive deeper with flexible project participation and special + events that suit your schedule. +
+
+
+ + Core +
++ Take a central role in our projects, working regularly as a + team member or leader on impactful software projects. This + path accelerates your growth through hands-on, + cross-functional team experiences. +
+
+
+ + Create your Profile +
++ Create your profile and connect with like-minded individuals in + our vibrant community. Engage with other members, share your + journey, and find partners for your next project. Networking at + Dev Launchers opens doors to opportunities and collaborations. +
+ +
+
+ + Learn with Resources +
++ Utilize our comprehensive library of resources, templates, and + tools to enhance your skillset. From beginner to advanced levels, + our learning materials are designed to support your growth in the + most dynamic industries. +
+ +
+
+ + Dream with IdeaSpace +
++ Members brainstorm, propose, and workshop on software project + ideas. Got a groundbreaking idea? Bring it to our community and + see it take shape! +
+ +
+
+ + Join with Dev Recruit +
++ Looking to dive deeper into tech and gain practical experience? + Explore our Dev Recruit platform for available opportunities + designed to hone your skills through intensive and collaborative + project work. Gain hands-on experience under the guidance of our + seasoned mentors and prepare for a career in technology. +
+ +
+ 
+
+
+
+
+);
+
+const PaginatedGrid = ({ items, itemsPerPage = 4 }) => {
+ const [currentPage, setCurrentPage] = useState(1);
+ const totalPages = Math.ceil(items.length / itemsPerPage);
+ const startIndex = (currentPage - 1) * itemsPerPage;
+ const endIndex = startIndex + itemsPerPage;
+ const currentItems = items.slice(startIndex, endIndex);
+ const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+
+ return (
+ + {title} +
++ {description || 'No description available.'} +
+
+ Learn More
+
+
+
+
+
+ {currentPage > 1 && (
+ <>
+
+ {
+ e.preventDefault();
+ setCurrentPage(1);
+ }}
+ />
+
+
+ {
+ e.preventDefault();
+ setCurrentPage((prev) => prev - 1);
+ }}
+ />
+
+
+ )}
+
+ {pages.map((page) => (
+
+ {
+ e.preventDefault();
+ setCurrentPage(page);
+ }}
+ >
+ {page}
+
+
+ ))}
+
+ {currentPage < totalPages && (
+ <>
+
+ {
+ e.preventDefault();
+ setCurrentPage((prev) => prev + 1);
+ }}
+ />
+
+
+ {
+ e.preventDefault();
+ setCurrentPage(totalPages);
+ }}
+ />
+
+
+ )}
+
+
+ )}
+
+ );
+};
+
+export default function Resources() {
+ const { learnPageData, createPageData } = useSheetsContext();
+
+ return (
+ <>
+
+
+ {currentItems.map((item, index) => (
+
+
+ {totalPages > 1 && (
+
+
+ + Resources for Growth +
++ Embark on a path to expanding your technological prowess. Whether + you are just starting or looking to refine specific skills, our + curated resources are here to guide you every step of the way. + Dive into a comprehensive collection of tools, tutorials, and + hands-on projects designed to enhance your understanding and + practical knowledge. +
+
+
+ + Resources by Category +
++ Explore a diverse array of resources organized by category to find + exactly what you need to progress. From coding tools and design + software to advanced tutorials, our categories are designed to + cater to learners at all levels. +
+
+
+
+
+ Development
+
+
+ Design
+
+
+ Research
+
+
+ Project Management
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Development +
+-
+
-
+
+ Dev Launchers Development Docs
+
+
+ Comprehensive resource for development practices and + guidelines at Dev Launchers. +
+
+ -
+
+ Dev Launchers Github Repository
+
+
+ Central repository for all code and development projects + managed by Dev Launchers. +
+
+ -
+
+ VS Code
+
+
+ A lightweight but powerful source code editor that runs + on your desktop and is available for Windows, macOS, and + Linux. +
+
+ -
+
+ Tailwind CSS Docs
+
+
+ Official documentation for installing and using Tailwind + CSS, a utility-first CSS framework. +
+
+
+
+ + Design +
+-
+
-
+
+ Dev Launchers Design Docs
+
+
+ A guide to the design principles and practices adopted + by Dev Launchers for creating engaging user interfaces + and experiences. +
+
+ -
+
+ Figma
+
+
+ A web-based interface design tool that allows real-time + collaboration among teams for building interactive and + professional designs. +
+
+ -
+
+ Atomic Design by Brad Frost
+
+
+ A methodology for creating design systems composed of + atoms, molecules, and organisms to build robust user + interfaces. +
+
+ -
+
+ Dev Launchers Universal Design System
+
+
+ This resource showcases the Universal Design System + utilized by Dev Launchers, featuring standardized UI + components and design tokens. +
+
+
+
+ + Research +
+-
+
-
+
+ Dev Launchers Research Docs
+
+
+ Essential reading for understanding the research + processes and methodologies utilized by Dev Launchers. +
+
+ -
+
+ Nielsen Norman Group Research Methods
+
+
+ An essential collection of user research methodologies + and best practices offered by the Nielsen Norman Group, + a leader in the UX field. +
+
+ -
+
+ The UX Research Field Guide
+ {' '}
+
+ A comprehensive guide to doing UX research by User + Interviews +
+
+ -
+
+ Hotjar
+
+
+ Hotjar offers tools to visualize user behavior on your + site through heatmaps, session recordings, and surveys, + enabling deeper insights into user interactions and + experiences. +
+
+
+
+ + Project Management +
+-
+
-
+
+ Dev Launchers Project Management Docs
+
+
+ A resource for project managers at Dev Launchers, + detailing workflows, strategies, and tools for effective + project oversight and completion. +
+
+ -
+
+ Github Projects
+ {' '}
+
+ Learn about Github Projects; an adaptable, flexible tool + for planning and tracking work on GitHub. +
+
+ -
+
+ Project Management Guide by Atlassian
+ {' '}
+
+ An extensive guide to project management from basics to + strategy breakdowns by Atlassian +
+
+ -
+
+ Project Management Templates and Insights
+ {' '}
+
+ A curated selection of industry-vetted Project + Management Institute templates, guides, and more to help + you grow and maximize project success +
+
+
+
+
+ + Learning and Games +
++ Learn Code and Design using these games to build conceptual + learning to prepare for creating software projects and + applications +
+
+
+
+ {Object.keys(learnPageData).map((category) => (
+
+ {category}
+
+ ))}
+
+ {Object.entries(learnPageData).map(([category, sections]) => (
+
+ {Object.entries(sections).map(
+ ([sectionTitle, categories]) => (
+
+ ))}
+
+
+
+
+ )
+ )}
+ + {sectionTitle} +
+ {Object.entries(categories).map( + ([categoryTitle, items]) => ( +
+
+ )
+ )}
+
+
+
+ + Create with Templates +
++ Ready to test your skills? These templates are great ways to get + started and reinforce your learning +
+
+
+
+ {Object.keys(createPageData).map((category) => (
+
+ {category}
+
+ ))}
+
+ {Object.entries(createPageData).map(([category, sections]) => (
+
+ {Object.entries(sections).map(
+ ([sectionTitle, categories]) => (
+
+ ))}
+
+
+
+
+ )
+ )}
+ + {sectionTitle} +
+ {Object.entries(categories).map( + ([categoryTitle, items]) => ( +
+
+ )
+ )}
+
+
+ + Create and Collaborate +
++ Join us in real cross-functional teams to apply your skills to + real world applications +
+
+
+ Join Today
+
+
+
+ {children}
+
+
+
+
+ );
+});
+CarouselContent.displayName = 'CarouselContent';
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
-
-
- {name}
+ &
- Omit & {
- /**
- * The buttons that activate its associated content. Dev Note: USE Trigger COMPONENT FOR BETTER ACCESSIBILITY
- */
- triggers: ReactNode;
- /**
- * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.
- */
- defaultValue?: string;
- /**
- * Contains the content associated with each trigger. Dev Note: USE Content COMPONENT FOR BETTER ACCESSIBILITY
- */
- children: ReactNode;
- /**
- * Event handler called when the value changes.
- */
- onValueChange?: (value: string) => void;
- /**
- * The controlled value of the tab to activate. Should be used in conjunction with onValueChange.
- */
- value?: string;
- /**
- * When true, keyboard navigation will loop from last tab to first, and vice versa.
- */
- loop?: boolean;
- };
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
-/**
- * @description A set of layered sections of content—known as tab panels—that are displayed one at a time.
- * https://www.radix-ui.com/primitives/docs/components/tabs/1.0.4
- */
-const Tabs = ({
- loop = true,
- triggers,
- activationMode,
- defaultValue,
- onValueChange,
- value,
- children,
- ...props
-}: TabsProps) => {
- return (
-
-
- {triggers}
-
- {children}
-
- );
-};
-export default Tabs;
+import { cn } from '../../../utils/classesMerger';
-const TriggerStyles = tv({
- base: 'inline-flex h-11 w-64 flex-shrink-0 items-center justify-center gap-2 py-3 font-nunito-sans text-[1rem] font-normal text-[#888888] hover:bg-[#f9f9f9] data-[state=active]:border-b-2 data-[state=active]:border-solid data-[state=active]:border-[#3350e5] data-[state=active]:font-bold data-[state=active]:text-[#000000]',
-});
+const Tabs = TabsPrimitive.Root;
-export const Trigger: FC = ({
- className,
- ...props
-}) => {
- const styles = TriggerStyles({ className });
- return ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
-
-
-
-
- CREATE
-
-
-
-
- LEARN
+
+
- {actionTexts[action]}
-
- {target}
-
+
+
diff --git a/packages/UI/src/components/molecules/Tab/Tab.tsx b/packages/UI/src/components/molecules/Tab/Tab.tsx
index 843cab1f8..98d58e00d 100644
--- a/packages/UI/src/components/molecules/Tab/Tab.tsx
+++ b/packages/UI/src/components/molecules/Tab/Tab.tsx
@@ -1,79 +1,55 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
-import { type FC, type ReactNode } from 'react';
-import { tv } from 'tailwind-variants';
+'use client';
-type TabsProps = Omit<
- RadixTabs.TabsProps,
- 'asChild' | 'defaultValue' | 'content' | 'onValueChange'
-> &
- Omit
+
-
+ {name}
+
+ {actionTexts[action]}
+
+ {target}
- {message}
+{message}
+