feat: add card component

src/components/card/index.tsx

@@ -0,0 +1,44 @@
+import { FiTrash2 } from 'react-icons/fi';
+
+import Button from '../button';
+
+import {
+  Buttons,
+  Container,
+  Content,
+  Image,
+  Price,
+  Prices,
+  Title,
+} from './style';
+
+interface CardProps {
+  thumbnail?: string;
+}
+
+export default function Card({ thumbnail }: CardProps) {
+  return (
+    <Container onClick={() => console.log('Card clicked!')}>
+      <Image src={thumbnail} alt="" srcSet={thumbnail} />
+      <Content>
+        <Title>Product</Title>
+        <Prices>
+          <Price>100</Price>
+          <Price>40</Price>
+        </Prices>
+      </Content>
+      <Buttons style={{ justifyContent: 'flex-end' }}>
+        <Button color="#F80059">
+          <FiTrash2 color="#FFF" />
+        </Button>
+        <Button
+          onClick={(e) => {
+            console.log('Button clicked!');
+          }}
+        >
+          Editar
+        </Button>
+      </Buttons>
+    </Container>
+  );
+}

src/components/card/style.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06);
+  max-width: 360px;
+  padding: 16px;
+`;
+export const Image = styled.img`
+  border-radius: 8px;
+  object-fit: cover;
+  height: 240px;
+  width: 100%;
+`;
+export const Title = styled.p`
+  font-style: normal;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 100%;
+`;
+export const Content = styled.div``;
+export const Footer = styled.div``;
+export const Prices = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+export const Price = styled.span`
+  &::before {
+    content: 'R$ ';
+    color: 'green';
+    font-weight: 600;
+  }
+`;
+export const Buttons = styled.div`
+  display: flex;
+  gap: 8px;
+`;