Creating a new component

In this guide, we will walk you through the process of creating a new React component in the Blueprint project.

1. Create the component file: Navigate to the appropriate directory within your app (e.g., apps/foundation/src/components) and create a new file for your component (e.g., SampleComponent.tsx). If the component is specific to a feature, navigate to the feature directory (e.g., apps/foundation/src/features/sampleFeature/components).

2. Write the component code: Implement your component using React and TypeScript. Here is a basic example:

   interface SampleComponentProps {
       title: string;
   }
   
   const SampleComponent = ({ title }: SampleComponentProps) => {
       return <div>{title}</div>;
   };
   
   export default SampleComponent;

3. Use the component: Import and use your new component within your app as needed.

   import SampleComponent from './components/SampleComponent';
   
   const SampleDestinationComponent = () => {
       return (
           <div>
               <SampleComponent title="Sample title" />
           </div>
       );
   };
   
   export default SampleDestinationComponent;

By following these steps, you can create and integrate new components into your Foundation app.