From b42462d7c6c8a361468af4286855b73e530c1c02 Mon Sep 17 00:00:00 2001
From: ialexanderbrito <xanderzinho26@gmail.com>
Date: Mon, 11 Apr 2022 11:52:37 -0300
Subject: [PATCH] feat: add pages admin

---
 src/pages/Admin/Admin.module.scss | 87 +++++++++++++++++++++++++++++++
 src/pages/Admin/index.tsx         | 59 +++++++++++++++++++++
 2 files changed, 146 insertions(+)
 create mode 100644 src/pages/Admin/Admin.module.scss
 create mode 100644 src/pages/Admin/index.tsx

diff --git a/src/pages/Admin/Admin.module.scss b/src/pages/Admin/Admin.module.scss
new file mode 100644
index 0000000..687951c
--- /dev/null
+++ b/src/pages/Admin/Admin.module.scss
@@ -0,0 +1,87 @@
+.home {
+  background: var(--background);
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background: var(--background);
+}
+
+.titleHome {
+  margin-top: 24px;
+  margin-bottom: 24px;
+  font-weight: bold;
+  color: var(--white);
+  margin-left: 18px;
+  margin-right: 18px;
+  font-size: 22px;
+}
+
+.titleContainer {
+  margin-top: 24px;
+  margin-bottom: 24px;
+  font-weight: bold;
+  color: var(--white);
+  margin-left: 12px;
+  font-size: 22px;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  width: 90%;
+  justify-content: space-around;
+
+  font-size: 14px;
+}
+
+.containerList {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.containerBarber {
+  display: flex;
+  width: 25rem;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.button {
+  border: none;
+  background: var(--orange);
+  cursor: pointer;
+  border-radius: 10px;
+  width: 60px;
+  height: 60px;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    filter: brightness(0.6);
+    transition: 0.4s;
+  }
+}
+
+@media screen and (min-width: 839px) {
+  .titleContainer {
+    margin-top: 24px;
+    margin-bottom: 24px;
+    font-weight: bold;
+    color: var(--white);
+    margin-left: 12px;
+    font-size: 22px;
+    flex-direction: row;
+    display: flex;
+    align-items: center;
+    width: 30rem;
+    justify-content: space-around;
+
+    font-size: 18px;
+  }
+}
diff --git a/src/pages/Admin/index.tsx b/src/pages/Admin/index.tsx
new file mode 100644
index 0000000..2361ca9
--- /dev/null
+++ b/src/pages/Admin/index.tsx
@@ -0,0 +1,59 @@
+import { FiCheck } from 'react-icons/fi';
+
+import { SpinnerCircular } from 'spinners-react';
+import { UserMetadata } from 'types/IContext';
+
+import { CardBarbeiro } from 'components/CardBarbeiro';
+import { Header } from 'components/Header';
+
+import { useTheme } from 'contexts/Theme';
+
+import { useAdmin } from 'hooks/useAdmin';
+
+import styles from './Admin.module.scss';
+
+export function Admin() {
+  const { theme } = useTheme();
+  const { loading, aproveBarbeiro, barbeiros } = useAdmin();
+
+  return (
+    <>
+      <div className={styles.home} data-theme={theme}>
+        <Header logo />
+        <div className={styles.container}>
+          <div className={styles.titleContainer}>
+            {barbeiros.length > 0 ? (
+              <h2 className={styles.titleHome}>Barbeiros para serem aprovados</h2>
+            ) : (
+              <h2 className={styles.titleHome}>Não há barbeiros para serem aprovados.</h2>
+            )}
+          </div>
+
+          <div className={styles.containerList}>
+            {loading ? (
+              <SpinnerCircular color="#ff9000" size={64} />
+            ) : (
+              <>
+                {barbeiros.length > 0 &&
+                  barbeiros.map((barbeiro: UserMetadata) => (
+                    <div className={styles.containerBarber}>
+                      <CardBarbeiro key={barbeiro.id} barbeiro={barbeiro} />
+                      <button
+                        className={styles.button}
+                        onClick={() => {
+                          console.log('click');
+                          aproveBarbeiro(barbeiro?.id);
+                        }}
+                      >
+                        <FiCheck color="#FFF" size={28} style={{ marginTop: '6px' }} />
+                      </button>
+                    </div>
+                  ))}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}