Create Page Done Teams

[AyabongaQwabi]

GitHub Project Task: Convert PageDone Team Blocks to Dynamic React Components

---

Task Description

The developer will inspect [PageDone Team Blocks](https://pagedone.io/blocks/marketing/team) and convert selected HTML components into dynamic React components. The components must support theming, data, and other dynamic properties (...rest) to integrate seamlessly with the site configuration.

---

Checklist

1. Inspect PageDone Team Components

• Visit the URL and review the HTML structure of the Team blocks.
• Select three blocks to convert into React components: PageDoneTeam1, PageDoneTeam2, and PageDoneTeam3.

2. Create faqs.js

• Create a new file: src/components/content/faqs.js.
• Define the components PageDoneTeam1, PageDoneTeam2, and PageDoneTeam3.

3. Convert HTML to React Components

• Convert the PageDone HTML blocks into reusable React components.
• Components must accept the following props:
  • theme: Theming data loaded dynamically from the site configuration.
  • data: Dynamic fields such as user inputs or API responses.
  • ...rest: Additional configuration passed to the components.

4. Add Props and Theming Support

• Use theme for styling text and background colors (e.g., primaryColorCode, textColorCode).
• Ensure images are configurable via the img prop, allowing src and alt attributes to be passed dynamically.
• Configure other props like title, description, and team member data.

5. Update componentBuilders Map

• Add PageDoneTeam1, PageDoneTeam2, and PageDoneTeam3 to the componentBuilders map in src/components/content/generator.js.

6. Test Components

• Create examples of these components in src/pages/artifacts.js.
• Ensure components render correctly and support dynamic theming and data.

---

Code Examples

Component Example: PageDoneTeam1

import React from 'react';

export const PageDoneTeam1 = ({ theme, data, img, ...rest }) => {
  const { colors } = theme || {};
  const { title, description, members } = rest;

  return (
    <section className={`bg-${colors?.background || 'white'} p-6 rounded-lg`}>
      <h2 className={`text-${colors?.primaryText || 'gray-800'} text-xl font-bold`}>
        {title}
      </h2>
      <p className={`text-${colors?.secondaryText || 'gray-600'} mt-2`}>{description}</p>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
        {members?.map((member, index) => (
          <div key={index} className="flex flex-col items-center text-center">
            <img
              src={member.image || img?.src}
              alt={member.alt || img?.alt || 'Team Member'}
              className="w-24 h-24 rounded-full"
            />
            <h3 className={`text-${colors?.primaryText || 'gray-800'} mt-4`}>
              {member.name}
            </h3>
            <p className={`text-${colors?.secondaryText || 'gray-600'}`}>
              {member.position}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
};

---

Adding to componentBuilders

In src/components/content/generator.js:

import { PageDoneTeam1, PageDoneTeam2, PageDoneTeam3 } from './faqs';

export const componentBuilders = {
  PageDoneTeam1,
  PageDoneTeam2,
  PageDoneTeam3,
  // other components...
};

---

Example Configuration in artifacts.js

import React from 'react';
import { componentBuilders } from '@/components/content/generator';

const teamConfig = [
  {
    type: 'PageDoneTeam1',
    img: { src: '/path/to/image.jpg', alt: 'Team Member' },
    title: 'Meet Our Team',
    description: 'We’re a team of passionate professionals.',
    members: [
      { name: 'Aya', position: 'Dog Whisperer', image: '/images/aya.jpg' },
      { name: 'Matt', position: 'Coder Extraordinaire', image: '/images/sam.jpg' },
    ],
  },
];

const Artifacts = () => (
  <div>
    {teamConfig.map((config, index) => {
      const Component = componentBuilders[config.type];
      return <Component key={index} {...config} />;
    })}
  </div>
);

export default Artifacts;

---

Expected Deliverables

1. React components PageDoneTeam1, PageDoneTeam2, and PageDoneTeam3 in src/components/content/faqs.js.
2. Updated componentBuilders map in src/components/content/generator.js.
3. Example usage in artifacts.js demonstrating dynamic configuration.

Let me know if you need clarification or additional examples!