[Solução] Modal feito

index.tsx do Modal:

import React, { ReactNode } from 'react';
import styled from 'styled-components';

export interface ModalProps {
  children: ReactNode;
  titulo: string;
  button: string;
  fechar: () => void;
  aberta: boolean;
}

const FundoModal = styled.div`
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(101, 101, 101, 0.85);
  width: 978px;
  max-width: 100%;
`;

const JanelaModal = styled.div`
  font-family: sans-serif;
  position: fixed;
  padding: 64px;
  box-shadow: 4px 4px 24px -4px rgba(0, 0, 0, 0.15);
  border-radius: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    background: #eb9b00;
    border: none;
    color: #ffffff;
    padding: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    &:hover {
      background: #b87900;
    }
    }
`

const ModalTitulo = styled.h1`
  color: #eb9b00;
  font-size: 32px;
  font-weight: 700;
  font-family: sans-serif;
`;

const ButtonStyle = styled.button`
  color: #002f52;
  background: transparent;
  border: none;
  cursor: pointer;
`;

export const Modal = ({ children, titulo, button, aberta, fechar }: ModalProps) => {
  if (!aberta) {
    return <></>;
  }

  return (
    <>
      <FundoModal onClick={fechar} />
      <JanelaModal>
        <header>
          <ModalTitulo>{titulo}</ModalTitulo>
          <ButtonStyle onClick={fechar}>X</ButtonStyle>
        </header>
        <div>{children}</div>
        <footer>{button}</footer>
      </JanelaModal>
    </>
  );
};

Modal.stories.tsx:

import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Modal, ModalProps } from '../src';
import React from 'react';

export default {
  title: 'Componentes/Modal',
  component: Modal
} as ComponentMeta<typeof Modal>

const Template: ComponentStory<typeof Modal> = ( args ) => <Modal {...args} />;

export const ModalComponent = Template.bind({});

ModalComponent.args = {
  aberta: true,
  titulo: 'Texto Maneiro',
  button: 'Confirmar',
  children: <h3>Testando o Children do modal</h3>
} as ModalProps;

Oii, Nicholas. Tudo bem?

Parabéns pela dedicação nos estudos!

É praticando que você fixa bem o conhecimento. E, muito obrigada por compartilhar com a gente, com certeza irá incentivar outros estudantes.

Lembre-se de que, além de compartilhar aqui no fórum, você também pode marcar a Alura nas redes sociais para que mais pessoas possam ver seu trabalho.

A Alura tem perfis em várias redes sociais, você pode encontrá-los aqui.

Um abraço e bons estudos.