feat : add project files

winatungmiharja · Sep 17, 2021 · 4e1f886 · 4e1f886
1 parent 58a8817
commit 4e1f886
Show file tree

Hide file tree

Showing 65 changed files with 3,952 additions and 113 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-feather": "^2.0.9",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"
   },

diff --git a/public/img/avatar/baca.png b/public/img/avatar/baca.png
diff --git a/public/img/avatar/hai.png b/public/img/avatar/hai.png
diff --git a/public/img/avatar/laptop.png b/public/img/avatar/laptop.png
diff --git a/public/img/avatar/ngoding.png b/public/img/avatar/ngoding.png
diff --git a/public/img/avatar/sandar.png b/public/img/avatar/sandar.png
diff --git a/public/img/avatar/tablet.png b/public/img/avatar/tablet.png
diff --git a/public/img/particle/awan.png b/public/img/particle/awan.png
diff --git a/public/img/particle/gunung.png b/public/img/particle/gunung.png
diff --git a/public/img/particle/laptop.png b/public/img/particle/laptop.png
diff --git a/public/img/particle/megaphone.png b/public/img/particle/megaphone.png
diff --git a/public/img/particle/panah.png b/public/img/particle/panah.png
diff --git a/public/img/particle/presentasi.png b/public/img/particle/presentasi.png
diff --git a/public/img/particle/roket.png b/public/img/particle/roket.png
diff --git a/public/img/particle/tas.png b/public/img/particle/tas.png
diff --git a/public/img/picture/avatar-1-01.png b/public/img/picture/avatar-1-01.png
diff --git a/public/img/picture/avatar-1.svg b/public/img/picture/avatar-1.svg
diff --git a/public/img/picture/avatar-2-01.png b/public/img/picture/avatar-2-01.png
diff --git a/public/img/picture/keranjang-pintar-01.png b/public/img/picture/keranjang-pintar-01.png
diff --git a/public/img/picture/nusa-it-01.png b/public/img/picture/nusa-it-01.png
diff --git a/public/img/picture/win-logo.svg b/public/img/picture/win-logo.svg
diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,61 @@
+@import url("https://fonts.googleapis.com/css?family=Sora:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html {
+  margin: 0;
+  overflow: hidden;
+}
+body {
+  overflow-x: hidden;
+  background-color: #f9f9ff;
+  font-family: "Sora", sans-serif;
+  font-size: 16px;
+  line-height: 1.7;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #000;
+  font-weight: 700;
+  margin: 20px 0;
+  font-family: "Sora", sans-serif;
+}
+
+p {
+  font-family: "Poppins", sans-serif;
+}
+h1 {
+  font-size: 36px;
+}
+
+h2 {
+  font-size: 28px;
+}
+
+h3 {
+  font-size: 24px;
+}
+
+h4 {
+  font-size: 18px;
+}
+p {
+  font-size: 12px;
+}
+
+a {
+  color: #ff4c60;
+  outline: 0;
+  transition: all 0.3s ease-in-out;
+}
+a:hover {
+  color: #f9f9ff;
+  text-decoration: none;
+}
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,71 @@
-import logo from './logo.svg';
-import './App.css';
+import { useState } from "react";
+import CompletedTodoWrapper from "./view/TodoWrapper/CompletedTodoWrapper";
+import TodoWrapper from "./view/TodoWrapper/TodoWrapper";
+import Background from "./view/Background/Background";
+import Sidebar from "./view/Sidebar/Sidebar";
+import Header from "./view/Header/Header";
+import { useType } from "./data/Type";
+import { useTodo } from "./data/Todo";
+import status from "./data/Status";
+
+import "./assets/css/App.css";
+const App = () => {
+  const data = useTodo();
+  const todoTypes = ["See All", ...useType()];
+  const [filter, setFilter] = useState(todoTypes[0]);
+  const changeFilter = (item) => {
+    setFilter(item);
+  };
+
+  const filterData = (data, option) => {
+    if (option === "See All") {
+      return data;
+    } else {
+      return data.filter((item) => item.type === option);
+    }
+  };
+
+  const todoData = filterData(data["todo"], filter);
+  const completedData = filterData(data["completed"], filter);
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="wrapper">
+      <div>
+        <Sidebar />
+      </div>
+      <div>
+        <Header
+          filter={filter}
+          setFilter={changeFilter}
+          filterItem={todoTypes}
+        />
+        <div className="todo-list-wrapper">
+          {status.map((item, i) => {
+            if (item.content === "completed") {
+              return (
+                <CompletedTodoWrapper
+                  status={item.content}
+                  title={item.title}
+                  data={completedData}
+                  key={i}
+                />
+              );
+            } else {
+              return (
+                <TodoWrapper
+                  data={todoData}
+                  status={item.content}
+                  title={item.title}
+                  key={i}
+                />
+              );
+            }
+          })}
+        </div>
+      </div>
+      <Background />
     </div>
   );
-}
+};
 
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
@@ -0,0 +1,16 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  justify-content: center;
+  column-gap: 20px;
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  overflow: hidden;
+}
+.todo-list-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 10px 30px;
+  column-gap: 30px;
+  row-gap: 10px;
+}
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -0,0 +1,9 @@
+import "./Card.scss";
+
+export const Card = (props) => {
+  return (
+    <div class="card" style={props.style}>
+      {props.children}
+    </div>
+  );
+};
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -0,0 +1,8 @@
+.card {
+  width: 100%;
+  display: block;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  background-color: white;
+}
diff --git a/src/components/Dropdown/Dropdown.css b/src/components/Dropdown/Dropdown.css
@@ -0,0 +1,82 @@
+.yellow {
+  color: #ffd15c;
+}
+.dropdown {
+  z-index: 2;
+  width: 150px;
+  height: 40px;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  background-color: white;
+}
+
+.dropdown-header {
+  position: relative;
+  padding: 6px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dropdown-body {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background-color: white;
+  border-top: 1px solid #e5e8ec;
+  display: none;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  background-color: white;
+  animation: fade 0.3s linear;
+}
+
+.dropdown-body.open {
+  display: block;
+}
+
+.dropdown-item {
+  font-size: 12px;
+  padding: 5px;
+  padding-left: 12px;
+}
+
+.dropdown-item:hover {
+  cursor: pointer;
+  color: #ffd15c;
+}
+
+.dropdown-item-dot {
+  opacity: 0;
+  color: #91a5be;
+  transition: all 0.2s ease-in-out;
+}
+
+.dropdown-item-dot.selected {
+  opacity: 1;
+}
+
+.dropdown-icon {
+  font-size: 12px;
+  color: #91a5be;
+  transform: rotate(0deg);
+  transition: all 0.2s ease-in-out;
+}
+
+.dropdown-icon.open {
+  transform: rotate(90deg);
+}
+@keyframes fade {
+  0% {
+    opacity: 0;
+    top: 20px;
+  }
+  100% {
+    opacity: 1;
+    top: 40px;
+  }
+}