Inicia projeto do Gym - Cesmac

avoguga · Oct 3, 2022 · decf637 · decf637
commit decf637
Show file tree

Hide file tree

Showing 28 changed files with 2,610 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "gym",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@firebase/app": "^0.7.33",
+    "@types/axios": "^0.14.0",
+    "@types/styled-components": "^5.1.26",
+    "axios": "^0.27.2",
+    "firebase": "^9.10.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.5",
+    "styled-components": "^5.3.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.1.0"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,117 @@
+import Footer from "./components/Footer";
+import MainHeader from "./components/MainHeader";
+import { Context } from "./contexts/AppContext";
+import { Layout } from "./styles/Layout";
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
+import { useEffect, useState } from "react";
+import Content from "./components/Content";
+import Sound from "./assets/dale.mp3";
+
+// Types - Interfaces
+
+interface IUser {
+  name: string;
+}
+
+// Config Firebase
+
+// const firebaseConfig = {
+//   apiKey: import.meta.env.VITE_API_KEY,
+//   authDomain: import.meta.env.VITE_AUTH_DOMAIN,
+//   projectId: import.meta.env.VITE_PROJECT_ID,
+//   storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+//   messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
+//   appId: import.meta.env.VITE_APP_ID,
+// };
+
+/** Initialize Firebase */
+// const app = initializeApp(firebaseConfig);
+
+// export const auth = getAuth(app);
+
+const provider = new GoogleAuthProvider();
+
+function App() {
+  // Hooks
+  const [userProfile, setUserProfile] = useState<IUser>();
+  const [userEmail, setUserEmail] = useState();
+  const [userName, setUserName] = useState();
+  const [error, setError] = useState();
+  const [isUserLogIn, setIsUserLogIn] = useState(true);
+
+  const audioTune = new Audio(Sound);
+
+  const [audio, setAudio] = useState(audioTune);
+  const [playInLoop, setPlayInLoop] = useState(false);
+  const [isDale, setIsDale] = useState(false);
+
+  useEffect(() => {
+    audioTune.load();
+  }, []);
+
+  useEffect(() => {
+    audioTune.loop = playInLoop;
+  }, [playInLoop]);
+
+  /** Toca a musica */
+  const playSound = () => {
+    audio.play();
+    setIsDale(true);
+  };
+
+  /** Pausa a musica */
+  const pauseSound = () => {
+    setIsDale(false);
+    audio.pause();
+  };
+
+  /** Para a musica */
+  const stopSound = () => {
+    setIsDale(false);
+    audio.pause();
+    audio.currentTime = 0;
+  };
+
+  // const signInWithGoogle = () => {
+  //   signInWithPopup(auth, provider)
+  //     .then((result) => {
+  //       const name: any = result.user.displayName;
+  //       const email: any = result.user.email;
+  //       const profilePic: any = result.user.photoURL;
+
+  //       setUserName(name);
+  //       setUserEmail(email);
+  //       setUserProfile(profilePic);
+  //       setIsUserLogIn(false);
+  //     })
+  //     .catch((error) => {
+  //       console.log(error);
+  //       setError(error);
+  //     });
+  // };
+
+  return (
+    <Layout>
+      <Context.Provider
+        value={{
+          userName,
+          userProfile,
+          // signInWithGoogle,
+          isUserLogIn,
+          error,
+          playSound,
+          pauseSound,
+          stopSound,
+          isDale,
+        }}
+      >
+        <MainHeader />
+        <Content />
+        <Footer />
+      </Context.Provider>
+    </Layout>
+  );
+}
+
+export default App;
diff --git a/src/assets/1663003133164.gif b/src/assets/1663003133164.gif
diff --git a/src/assets/dale.mp3 b/src/assets/dale.mp3
diff --git a/src/assets/gugas.png b/src/assets/gugas.png
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/assets/sound.svg b/src/assets/sound.svg
diff --git a/src/assets/vite.svg b/src/assets/vite.svg
diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
@@ -0,0 +1,19 @@
+import {
+  MainContainer,
+  FirstSection,
+  SecondSection,
+  ThirdSection,
+} from "./styles";
+
+export function Content() {
+  return (
+    <MainContainer>
+      <FirstSection>
+
+
+      </FirstSection>
+    </MainContainer>
+  );
+}
+
+export default Content;
diff --git a/src/components/Content/styles.ts b/src/components/Content/styles.ts
@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.main`
+  grid-area: CT;
+  background-color: whitesmoke;
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+`;
+
+export const FirstSection = styled.div`
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+`;
+
+export const SecondSection = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+
+export const ThirdSection = styled.div`
+  height: 100%;
+  width: 100%;
+`;
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -0,0 +1,49 @@
+import { useContext } from "react";
+import {
+  FooterContainer,
+  SoundButton,
+  PauseButton,
+  StopButton,
+  Text,
+  SocialMedia,
+  SoundSection
+} from "./styles";
+import { Context } from "../../contexts/AppContext";
+
+export function Footer() {
+  const { userName, isDale, playSound, pauseSound, stopSound }: any =
+    useContext(Context);
+
+  return (
+    <FooterContainer isDale={isDale}>
+
+      <SocialMedia>
+        <Text>Acesse as redes:</Text>
+        <br />
+        <a href="https://www.linkedin.com/" target="_blank">
+          <img
+            src="https://www.svgrepo.com/show/138936/linkedin.svg"
+            alt="Acesse o LinkedIn"
+            style={{ width: "40px" }}
+          />
+        </a>
+        <a href="https://twitter.com/" target="_blank">
+          <img
+            src="https://www.svgrepo.com/show/157815/twitter.svg"
+            alt="Acesse o Twitter"
+            style={{ width: "40px" }}
+          />
+        </a>
+        <a href="https://www.instagram.com/" target="_blank">
+          <img
+            src="https://www.svgrepo.com/show/217758/instagram.svg"
+            alt="Acesse o Instagram"
+            style={{ width: "40px" }}
+          />
+        </a>
+      </SocialMedia>
+    </FooterContainer>
+  );
+}
+
+export default Footer;