From 166cf0348bf9d2b60959e05caf6db6005c63e66e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Cunha?= <jp5183179@gmail.com>
Date: Fri, 10 Nov 2023 15:33:23 +0000
Subject: [PATCH 1/9] my first commit

---
 src/components/avatar/avatar.css        |  4 ++++
 src/components/avatar/avatar.js         | 15 +++++++++++++
 src/components/avatar/avatar.stories.ts | 29 ++++++++++++++++++++++++
 src/components/card/card.css            |  9 ++++++++
 src/components/card/card.js             | 27 ++++++++++++++++++++++
 src/components/card/card.stories.ts     | 30 +++++++++++++++++++++++++
 6 files changed, 114 insertions(+)
 create mode 100644 src/components/avatar/avatar.css
 create mode 100644 src/components/avatar/avatar.js
 create mode 100644 src/components/avatar/avatar.stories.ts
 create mode 100644 src/components/card/card.css
 create mode 100644 src/components/card/card.js
 create mode 100644 src/components/card/card.stories.ts

diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
new file mode 100644
index 0000000..8c754b3
--- /dev/null
+++ b/src/components/avatar/avatar.css
@@ -0,0 +1,4 @@
+img {
+    width: 50px;
+    height: 50px;
+}
\ No newline at end of file
diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
new file mode 100644
index 0000000..fbed0f1
--- /dev/null
+++ b/src/components/avatar/avatar.js
@@ -0,0 +1,15 @@
+import "./avatar.css"
+
+
+/**
+ * @typedef {Object} AvatarProps
+ * @property {string} AvatarProps.imgSrc - some description here
+ * @property {string} AvatarProps.descricao - some description here
+ * 
+ * @param {AvatarProps} props
+ */
+export function avatar({imgSrc, descricao}) {
+  return ` href
+      <img src="${imgSrc}" class="avatar" alt="${descricao}" />
+  `
+}
\ No newline at end of file
diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts
new file mode 100644
index 0000000..f95f1f3
--- /dev/null
+++ b/src/components/avatar/avatar.stories.ts
@@ -0,0 +1,29 @@
+import type { StoryObj, Meta } from '@storybook/html';
+import {avatar} from './avatar';
+import type {AvatarProps} from './avatar';
+
+
+// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+const meta = {
+  title: 'App/Avatar',
+  tags: ['autodocs'],
+  render: (args) => {
+    return avatar(args);
+  },
+  argTypes: {
+    imgSrc: {description: 'endereço para a imgaem do logo'},
+    descricao: {description: 'descrição da imagem do logo'}
+  }
+} satisfies Meta<AvatarProps>;
+
+export default meta;
+type Story = StoryObj;
+
+// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+export const Primary: Story = {
+  args: {
+    link: 'github.com', 
+    imgSrc: 'https://avatars.githubusercontent.com/u/132667649?v=4', 
+    descricao: 'Octocat from Github '
+  }
+};
diff --git a/src/components/card/card.css b/src/components/card/card.css
new file mode 100644
index 0000000..418c42f
--- /dev/null
+++ b/src/components/card/card.css
@@ -0,0 +1,9 @@
+
+
+.card img {
+    
+}
+
+.card body {
+    
+}
\ No newline at end of file
diff --git a/src/components/card/card.js b/src/components/card/card.js
new file mode 100644
index 0000000..2feb3a6
--- /dev/null
+++ b/src/components/card/card.js
@@ -0,0 +1,27 @@
+
+import { avatar } from "../avatar/avatar"
+import "./card.css"
+
+
+/**
+ * @typedef {object} CardProps
+ * @property {string} CardProps.nome
+ * @property {string} CardProps.cargo
+ * @property {string} CardProps.img
+ * 
+ * @param {CardProps} props
+ */
+export function card({nome, cargo, img}) {
+    
+    return `<div class="card">
+        <div class="header">
+        ${avatar({imgSrc: img, descricao: 'profile picture from ' + nome})}
+        </div>
+    
+        <div class="body">
+        <p>Nome: ${nome}</p>
+        <p>Nome: ${cargo}</p>
+        </div>
+    </div>`
+}
+  
diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts
new file mode 100644
index 0000000..d1b08f6
--- /dev/null
+++ b/src/components/card/card.stories.ts
@@ -0,0 +1,30 @@
+import type { StoryObj, Meta } from '@storybook/html';
+
+import { CardProps, card } from './card';
+
+// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+const meta = {
+  title: 'App/Card',
+  tags: ['autodocs'],
+  render: (args) => {
+    return card(args);
+  },
+  argTypes: {
+
+    nome: {description: 'nome do profile'},
+    cargo: {description: 'cargo do profile'},
+    img: {description: 'endereço para a imgaem do logo'},
+  }
+} satisfies Meta<CardProps>;
+
+export default meta;
+type Story = StoryObj;
+
+// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+export const Primary: Story = {
+  args: {
+   nome: 'João Pedro',
+   cargo: 'Student Full Stack Developer',
+   img: 'https://avatars.githubusercontent.com/u/132667649?v=4',
+  }
+};
\ No newline at end of file

From 4546778b94134c8f61a63bc119704caad6d808ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Cunha?= <jp5183179@gmail.com>
Date: Fri, 10 Nov 2023 15:35:01 +0000
Subject: [PATCH 2/9] my second commit

---
 src/components/logo/logo.css        | 5 +++++
 src/components/logo/logo.stories.ts | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/logo/logo.css b/src/components/logo/logo.css
index c7a5316..fc1d2c4 100644
--- a/src/components/logo/logo.css
+++ b/src/components/logo/logo.css
@@ -1,4 +1,9 @@
 
 a.logo > img {
   width: 50px;
+}
+
+img {
+  border-radius: 50px;
+  border: 5px solid red;
 }
\ No newline at end of file
diff --git a/src/components/logo/logo.stories.ts b/src/components/logo/logo.stories.ts
index c18868d..f9b9176 100644
--- a/src/components/logo/logo.stories.ts
+++ b/src/components/logo/logo.stories.ts
@@ -24,7 +24,7 @@ type Story = StoryObj;
 export const Primary: Story = {
   args: {
     link: 'github.com', 
-    imgSrc: 'https://github.githubassets.com/assets/mona-loading-dark-7701a7b97370.gif', 
+    imgSrc: 'https://avatars.githubusercontent.com/u/132667649?v=4', 
     descricao: 'Octocat from Github '
   }
 };

From 04b9509c6921b42d4d576f20542ed155306cca91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Cunha?= <jp5183179@gmail.com>
Date: Fri, 17 Nov 2023 14:19:31 +0000
Subject: [PATCH 3/9] corrigindo nome do cargo

---
 .gitpod.yml                 | 11 +++++++++++
 src/components/card/card.js |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .gitpod.yml

diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 0000000..9e083d8
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: npm install && npm run build
+    command: npm run dev
+
+
diff --git a/src/components/card/card.js b/src/components/card/card.js
index 2feb3a6..c835eaf 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -20,7 +20,7 @@ export function card({nome, cargo, img}) {
     
         <div class="body">
         <p>Nome: ${nome}</p>
-        <p>Nome: ${cargo}</p>
+        <p>Cargo: ${cargo}</p>
         </div>
     </div>`
 }

From 1117f7ad11e345a85e4439b55b28b1a90f38dd48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Cunha?= <jp5183179@gmail.com>
Date: Fri, 17 Nov 2023 14:55:19 +0000
Subject: [PATCH 4/9] Removendo Href

---
 src/components/avatar/avatar.js     | 2 +-
 src/components/card/card.stories.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
index fbed0f1..695ca68 100644
--- a/src/components/avatar/avatar.js
+++ b/src/components/avatar/avatar.js
@@ -9,7 +9,7 @@ import "./avatar.css"
  * @param {AvatarProps} props
  */
 export function avatar({imgSrc, descricao}) {
-  return ` href
+  return `
       <img src="${imgSrc}" class="avatar" alt="${descricao}" />
   `
 }
\ No newline at end of file
diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts
index d1b08f6..b1174c2 100644
--- a/src/components/card/card.stories.ts
+++ b/src/components/card/card.stories.ts
@@ -13,7 +13,7 @@ const meta = {
 
     nome: {description: 'nome do profile'},
     cargo: {description: 'cargo do profile'},
-    img: {description: 'endereço para a imgaem do logo'},
+    img: {description: 'endereço para a imagem do logo'},
   }
 } satisfies Meta<CardProps>;
 

From 2e723588cd6c28c4d0cf4966b6948cebafca51dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Cunha?= <jp5183179@gmail.com>
Date: Wed, 22 Nov 2023 05:52:49 +0000
Subject: [PATCH 5/9] criando card

---
 src/components/card/card.css | 47 ++++++++++++++++++++++++++++++------
 src/components/card/card.js  |  6 ++---
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/card/card.css b/src/components/card/card.css
index 418c42f..32f23d0 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -1,9 +1,42 @@
 
+.container {
+    width: 200px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 20px;
+  }
 
-.card img {
-    
-}
-
-.card body {
-    
-}
\ No newline at end of file
+  .container:hover{
+    transform: scale(1.02);
+  }
+  
+  .header {
+    background-color: #00BFFF;
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .header img {
+    width: 100px;
+    height: 100px; 
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  
+  .body {
+    padding: 20px;
+  }
+  
+  .nome {
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    color: #4169E1;
+  }
+  
+  .cargo {
+    font-size: 14px;
+    color: #777;
+    text-align: center;
+  }
\ No newline at end of file
diff --git a/src/components/card/card.js b/src/components/card/card.js
index c835eaf..d843bd4 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -13,14 +13,14 @@ import "./card.css"
  */
 export function card({nome, cargo, img}) {
     
-    return `<div class="card">
+    return `<div class="container">
         <div class="header">
         ${avatar({imgSrc: img, descricao: 'profile picture from ' + nome})}
         </div>
     
         <div class="body">
-        <p>Nome: ${nome}</p>
-        <p>Cargo: ${cargo}</p>
+        <p class="nome"> ${nome}</p>
+        <p class="cargo"> ${cargo}</p>
         </div>
     </div>`
 }

From 93c5259f26ce6373949a9d5cc7f15007322086d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Cunha?= <jp5183179@gmail.com>
Date: Wed, 22 Nov 2023 06:00:56 +0000
Subject: [PATCH 6/9] removendo borda vermelha

---
 src/components/logo/logo.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/logo/logo.css b/src/components/logo/logo.css
index fc1d2c4..283201c 100644
--- a/src/components/logo/logo.css
+++ b/src/components/logo/logo.css
@@ -5,5 +5,4 @@ a.logo > img {
 
 img {
   border-radius: 50px;
-  border: 5px solid red;
 }
\ No newline at end of file

From a19dfe25e4098baaebc2b52d07456a7c9af0402c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Cunha?= <jp5183179@gmail.com>
Date: Wed, 22 Nov 2023 06:10:03 +0000
Subject: [PATCH 7/9] Alterando os nomes dos componntes: nome e cargo

---
 src/components/card/card.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts
index b1174c2..817318e 100644
--- a/src/components/card/card.stories.ts
+++ b/src/components/card/card.stories.ts
@@ -24,7 +24,7 @@ type Story = StoryObj;
 export const Primary: Story = {
   args: {
    nome: 'João Pedro',
-   cargo: 'Student Full Stack Developer',
+   cargo: 'Estudante Full Stack',
    img: 'https://avatars.githubusercontent.com/u/132667649?v=4',
   }
 };
\ No newline at end of file

From 2a5ce84835b2ce206993b86fa9b87575286bdb49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Cunha?= <jp5183179@gmail.com>
Date: Wed, 22 Nov 2023 06:11:30 +0000
Subject: [PATCH 8/9] alterando o background do card

---
 src/components/card/card.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/card/card.css b/src/components/card/card.css
index 32f23d0..f208476 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -5,6 +5,7 @@
     border-radius: 8px;
     overflow: hidden;
     margin: 20px;
+    background-color: #363636;
   }
 
   .container:hover{

From 8cc46ef7b29f92e9d352985806f07b2ede31db45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Cunha?= <jp5183179@gmail.com>
Date: Wed, 22 Nov 2023 06:13:38 +0000
Subject: [PATCH 9/9] =?UTF-8?q?corrigindo=20erro=20de=20digita=C3=A7=C3=A3?=
 =?UTF-8?q?o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/avatar/avatar.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts
index f95f1f3..fcc855c 100644
--- a/src/components/avatar/avatar.stories.ts
+++ b/src/components/avatar/avatar.stories.ts
@@ -11,7 +11,7 @@ const meta = {
     return avatar(args);
   },
   argTypes: {
-    imgSrc: {description: 'endereço para a imgaem do logo'},
+    imgSrc: {description: 'endereço para a imagem do logo'},
     descricao: {description: 'descrição da imagem do logo'}
   }
 } satisfies Meta<AvatarProps>;