feat: add component card barbeiro

src/components/CardBarbeiro/CardBarbeiro.module.scss

@@ -0,0 +1,35 @@
+.card {
+  display: flex;
+  width: 327px;
+  height: 112px;
+  background: var(--shape);
+  border-radius: 10px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.containerImg {
+  display: flex;
+  margin-left: 6px;
+
+  img {
+    width: 72px;
+    height: 72px;
+    border-radius: 40px;
+  }
+}
+
+.containerInfo {
+  display: flex;
+  margin-left: 12px;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+
+  h2 {
+    margin-top: 0px;
+  }
+}

src/components/CardBarbeiro/index.tsx

@@ -0,0 +1,23 @@
+import { UserMetadata } from 'types/IContext';
+
+import styles from './CardBarbeiro.module.scss';
+
+type Props = {
+  barbeiro: UserMetadata | undefined;
+  onClick: () => void;
+};
+
+export function CardBarbeiro({ barbeiro, onClick }: Props) {
+  return (
+    <div className={styles.card} onClick={onClick} key={barbeiro?.id}>
+      <div className={styles.containerImg}>
+        <img src={barbeiro?.avatar_url || barbeiro?.picture} alt={barbeiro?.nome} />
+      </div>
+      <div className={styles.containerInfo}>
+        <h2>{barbeiro?.nome}</h2>
+        <strong>aaa</strong>
+        <strong>aaa</strong>
+      </div>
+    </div>
+  );
+}