[Solução] Card devidamente editado

index.tsx do Card:

import React from 'react';
import styled from 'styled-components';
import Favoritos from './Assets/Favoritos.svg';
import Sacola from './Assets/Sacola.svg';

export interface CardProps {
  titulo: string;
  subtitulo: string;
  descricao: string;
  autor: string;
  descricaoPreco: string;
  preco: string;
  botaoComprar: string;
}

const CardStyles = styled.div`
  background: #ffffff;
  border-radius: 10px;
  padding: 24px 32px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  color: #eb9b00;
  font-family: Arial, Helvetica, sans-serif;
  width: 500px;
  header {
    display: flex;
    justify-content: space-between;
  }
  footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  ul {
    list-style-type: none;
    display: flex;
  }
  li {
    padding: 0 8px;
  }
`;

const CardTitulo = styled.h1`
  color: #eb9b00;
  font-size: 32px;
  font-weight: 700;
`;

const CardSubtitulo = styled.h3`
  color: #002f52;
  font-size: 18px;
  font-weight: 700;
`;

const CardDesc = styled.p`
  font-size: 14px;
  color: #000000;
`;

const CardPreco = styled.h1`
  font-size: 36px;
  font-weight: 700;
  color: #002f52;
`;

const CardButton = styled.button`
  width: 170px;
  background: #eb9b00;
  border: none;
  color: #ffffff;
  padding: 16px 24px;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  &:hover {
    background: #B87900;
  }
`;

export const Card = ({
  titulo,
  subtitulo,
  descricao,
  autor,
  descricaoPreco,
  preco,
  botaoComprar,
}: CardProps) => {
  return (
      <CardStyles>
        <header>
          <CardTitulo>{titulo}</CardTitulo>
          <ul>
              <li><img src={Sacola}/></li>
              <li><img src={Favoritos}/></li>
          </ul>
        </header>
          <CardSubtitulo>{subtitulo}</CardSubtitulo>
          <CardDesc>{descricao}</CardDesc>
          <CardDesc>{autor}</CardDesc>
        <footer>
          <div>
            <CardDesc>{descricaoPreco}</CardDesc>
            <CardPreco>{preco}</CardPreco>
          </div>
          <div>
            <CardButton>{botaoComprar}</CardButton>
          </div>
        </footer>
      </CardStyles>
  );
};

Card.stories.tsx:

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

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

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

export const CardComponent = Template.bind({});
  
  CardComponent.args = {
    titulo: 'Título legal',
    subtitulo: 'Subtitulo Top',
    descricao: 'Imagine aqui uma descrição bacana',
    autor: 'Por: Lorem Ipsum',
    descricaoPreco: 'A partir de:',
    preco: 'R$ 29,90',
    botaoComprar: 'Comprar'
  } as CardProps;

Olá, Nicholas! Tudo bem?

Parabéns pela dedicação em se desafiar! Fazendo isso, você impulsiona a evolução do seu aprendizado. Além disso, agradecemos muito por compartilhar com a gente, pois com certeza irá incentivar outros estudantes.

Caso tenha dúvidas, conte com o auxílio do fórum!

Um abraço e bons estudos!