Thiago/card

src/components/avatar/avatar.css

@@ -1,15 +1,4 @@
-img{
-    width: 120px;
-    height: 120px;
-        border-radius: 50%;
-       border: solid 3px white;
-        object-fit: cover;
-
-}
-
-.container{
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
+img.avatar {
+    border-radius: 50px;
+    width: 50px;
 }

src/components/avatar/avatar.stories.ts

@@ -1,9 +1,11 @@
 import type { StoryObj, Meta } from '@storybook/html';
-import { AvatarProps, avatar } from './index';
+
+import { avatar } from './index';
+import type {AvatarProps} from './index';
 
 // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 const meta = {
-  title: 'App/avatar',
+  title: 'App/Avatar',
   tags: ['autodocs'],
   render: (args) => {
     return avatar(args);
@@ -18,12 +20,9 @@ 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: { 
-    imgSrc: 'https://s2-g1.glbimg.com/gZrnzQkY70EZ2ZP0zwB689bUAak=/0x0:5184x3456/1008x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2020/9/e/EYKMBXR72tNdkUAgmZzQ/azul-caneta.jpg', 
-    descricao: 'Octocat from Github '
+export const meuperfil: Story = {
+  args: {
+    imgSrc: 'https://avatars.githubusercontent.com/u/133207241?v=4', 
+    descricao: 'Picture Profile '
   }
 };
-
-
-

src/components/avatar/index.js

@@ -1,15 +1,14 @@
-import "./avatar.css";
+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 }) {
+
+export function avatar({imgSrc, descricao}) {
   return `
-  <div class="container">
-      <img src="${imgSrc}" class="avatar" alt="${descricao}" />
-      </div>
-  `;
+        <img src="${imgSrc}" class="avatar" alt="${descricao}" />
+  `
 }

src/components/card/card..stories.ts

@@ -0,0 +1,30 @@
+import type { StoryObj, Meta } from "@storybook/html";
+
+import { card } from './index.js';
+import type {CardProps} from './index.js';
+
+// 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: {desciption: 'nome do profile'},
+    cargo: {desciption: 'cargo do profile'},
+    img: {desciption: 'endereço para a imagem 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: 'Mansueto',
+    cargo: 'Back-end',
+    img: 'https://avatars.githubusercontent.com/u/133207241?v=4'
+  }
+};

src/components/card/index.js

@@ -0,0 +1,32 @@
+import { avatar } from '../avatar';
+import './card.css'
+
+
+/**
+ * @typedef {Object} CardProps
+ * @property {string} CardProps.nome - some description here
+ *@property {string} CardProps.cargo - some description here
+ *@property {string} CardProps.img - some description here
+ *@param {CardProps} props
+ */
+
+
+/**
+ * @param {*} param0
+ * @returns
+ */
+
+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>Cargo: ${cargo}</p>
+        </div>
+
+        </div> ` ;  
+  }

src/components/cards/card.stories.ts

@@ -3,7 +3,7 @@ import type { CardProps } from './index';
 import { card } from './index';
 // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 const meta = {
-  title: 'App/card',
+  title: 'App/cards',
   tags: ['autodocs'],
   render: (args) => {
     return card(args);