Let's create a React File Manager Chapter V: Creating FileManager Component Skelton

After we created our FileManager Component, now let's create our component skelton.

FileManager Skelton

As we can see in the cover image, the file manager will contain two big sections, the toolbar section and body section.

Body section will also contain two parts, sidebar section where we display list of directories and content where we display the current directory folders and files.

// FileManager.tsx
import { Grid, Modal } from "@mantine/core";
import { FileManagerProps } from "./FileManager.types";

export default function FileManager({ open, onClose }: FileManagerProps) {
  return (
    <>
      <Modal size="xl" opened={open} onClose={onClose}>
        <Toolbar />
        <Grid>
          <Grid.Col span={3}>
            <Sidebar />
          </Grid.Col>
          <Grid.Col>
            <Content />
          </Grid.Col>
        </Grid>
      </Modal>
    </>
  );
}

We added Toolbar component alongside with Grid to split the body into two parts, the first part will be the Sidebar which will take only 3 spans (25% of total width) and the second part will be the Content.

Now let's create the three components, each component will have its own directory so we can expand it later and split it into smaller components.

The structure of directories will be like this

Now our FileManager component will contain the following code

import { Grid, Modal } from "@mantine/core";
import Content from "./Content";
import { FileManagerProps } from "./FileManager.types";
import Sidebar from "./Sidebar";
import Toolbar from "./Toolbar";

export default function FileManager({ open, onClose }: FileManagerProps) {
  return (
    <>
      <Modal size="xl" opened={open} onClose={onClose}>
        <Toolbar />
        <Grid>
          <Grid.Col span={3}>
            <Sidebar />
          </Grid.Col>
          <Grid.Col span={9}>
            <Content />
          </Grid.Col>
        </Grid>
      </Modal>
    </>
  );
}

Now when you open the file manager, you'll see this.

A little bit of enhancing UI, we'll wrap the three components with Card to have some nice shadows.

// Toolbar.tsx
import { Card } from "@mantine/core";

export default function Toolbar() {
  return (
    <>
      <Card shadow="sm">
        <div>Toolbar</div>
      </Card>
    </>
  );
}

The others(Content and Sidebar) follow as well.

Now it will look like:

Let's add a BodyWrapper around the grid to give a little margin, create FileManager.styles.ts file beside FileManager.tsx.

import styled from "@emotion/styled";

export const BodyWrapper = styled.div`
  label: BodyWrapper;
  margin-top: 1rem;
`;

Bonus Tip: Adding label to your styled component will append it in the class name, this will help us identify which element in the dom belongs to what styled components when you inspect elements.

Now let's import it in our FileManager component.

import { Grid, Modal } from "@mantine/core";
import Content from "./Content";
import { BodyWrapper } from "./FileManager.styles";
import { FileManagerProps } from "./FileManager.types";
import Sidebar from "./Sidebar";
import Toolbar from "./Toolbar";

export default function FileManager({ open, onClose }: FileManagerProps) {
  return (
    <>
      <Modal size="xl" opened={open} onClose={onClose}>
        <Toolbar />
        <BodyWrapper>
          <Grid>
            <Grid.Col span={3}>
              <Sidebar />
            </Grid.Col>
            <Grid.Col span={9}>
              <Content />
            </Grid.Col>
          </Grid>
        </BodyWrapper>
      </Modal>
    </>
  );
}

Much better!

In the next topic we'll start the real work, as we'll add logic to our component and start using our FileManager class as well.

Article Repository

You can see chapter files in Github Repository

Don't forget the main branch has the latest updated code.

Salam.