Create src/components/SitemapDiagram.tsx

[otto-jacob]

Summary:

Create a React component for src/components/SitemapDiagram.tsx. Here are the instructions:

Issue: Create SitemapDiagram.tsx React component for displaying sitemap diagram

Background

We need to create a new React component called SitemapDiagram.tsx that will be responsible for displaying the sitemap diagram of a project. This component will be used on the project sitemap page to provide a visual representation of the files in the project directory. The component should be written in TypeScript using ES6 syntax, such as arrow functions, and styled using Tailwind CSS.

Task

Create a new React component called SitemapDiagram.tsx in the src/components directory. This component should accept a single prop called sitemapItems of type ProjectSitemap[] (imported from the types.ts file).

Instructions

1. In the src/components directory, create a new file called SitemapDiagram.tsx.

2. Import the necessary dependencies at the top of the file:

   import React from 'react';
   import { ProjectSitemap } from '~/types';

3. Define the Props interface for this component:

   interface Props {
    sitemapItems: ProjectSitemap[];
   }

4. Create the SitemapDiagram functional component with the following structure:

   const SitemapDiagram: React.FC<Props> = ({ sitemapItems }) => {
    // Component logic and rendering
   };
   
   export default SitemapDiagram;

5. Inside the component, map over the sitemapItems prop to create an array of JSX elements representing each file in the sitemap. Each element should include the file name, file description, and an optional Figma URL if provided. Style the elements using Tailwind CSS classes.

   const sitemapElements = sitemapItems.map((item) => (
    <div key={item.id} className="bg-white p-4 rounded-md shadow-md mb-4">
      <h3 className="text-lg font-semibold mb-2">{item.fileName}</h3>
      <p className="text-sm text-gray-600 mb-2">{item.fileDescription}</p>
      {item.figmaUrl && (
        <a
          href={item.figmaUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="text-blue-500 text-sm hover:underline"
        >
          View Figma design
        </a>
      )}
    </div>
   ));

6. Render the sitemapElements array inside a wrapping div element with appropriate styling. If there are no sitemap items, display a message indicating that no items have been added yet.

   return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {sitemapElements.length > 0 ? (
        sitemapElements
      ) : (
        <p className="text-gray-500">No sitemap items have been added yet.</p>
      )}
    </div>
   );

7. Make sure to use only Tailwind CSS classes for styling and do not import any CSS files directly or create custom CSS classes.

Testing

Once the component is created, import it into the project sitemap page and pass the sitemapItems prop with sample data to ensure it renders correctly and displays the sitemap diagram as expected.

Acceptance Criteria

• The SitemapDiagram.tsx component is created in the src/components directory.
• The component accepts a sitemapItems prop of type ProjectSitemap[].
• The component maps over the sitemapItems prop and creates an array of JSX elements representing each file in the sitemap.
• The component renders the sitemap diagram using Tailwind CSS for styling.
• The component displays a message if there are no sitemap items.
• The component is tested and works as expected on the project sitemap page.

[otto-jacob]

Hello human! 👋

This PR was created by Otto to address the issue Create src/components/SitemapDiagram.tsx

Next Steps

1. Please review the PR carefully. Auto-generated code can and will contain subtle bugs and mistakes.

2. If you identify code that needs to be changed, please reject the PR with a specific reason. Be as detailed as possible in your comments. Otto will take these comments, make changes to the code and push up changes. Please note that this process will take a few minutes.

3. Once the code looks good, approve the PR and merge the code.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
otto-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 7, 2023 4:54pm