Components

What is a component?

A component is a reusable piece of code that can be used to build elements of a user interface. Components can be as simple as a button or as complex as a form. Components can be used to build other components, which can be used to build other components, and so on. This is what makes components so powerful and flexible.

We highly recommend using components in your projects. They can help you build your user interface faster, make your code more maintainable, and improve the overall user experience.

How do I create a component?

Creating a component is simple. There's also a vscode shortcut to create a new component. Create a new file in the src/components directory and name it ComponentName.tsx. Once done open the file and start typing mtd-new-component and hit tab. This will create a new component's boilerplate code for you.

The code snipped is stored in the ui.code-snippets file in the .vscode directory.

To see all the available code snippets, type mtd and hit tab. This will show you all the available code snippets.

Here's an example of a simple component:

// Project Effort Summary Component, renders the effort summary of a project, overall and per member.
import React, { useState } from "react";
import { Box, Typography } from "@mui/material";
 
interface ProjectEffortSummaryProps {
  title?: string;
  flag?: boolean;
  type?: "variant 1" | "variant 2";
}
 
const ProjectEffortSummary = ({
  title = "Copy",
  flag = false,
  type = "text",
}: ProjectEffortSummaryProps) => {
  const [someState, setSomeState] = useState(false);
 
  return (
    <Box>
      <Typography variant="h6" gutterBottom>
        Your component goes here
      </Typography>
    </Box>
  );
};
 
export default ProjectEffortSummary;