Created checkbox, fix styles item

index.html

@@ -9,7 +9,7 @@
     <title>Vite App</title>
 
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap"
       rel="stylesheet"
     />
   </head>

src/App.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import AddTask from "./components/AddTask";
 import Header from "./components/Header";
+import TaskBoard from "./components/TaskBoard";
 
 import "./global.css";
 
@@ -9,6 +10,7 @@ function App() {
     <>
       <Header />
       <AddTask />
+      <TaskBoard />
     </>
   );
 }

src/components/CheckBox.module.css

@@ -0,0 +1,38 @@
+.checkboxRound {
+  width: 1.3em;
+  height: 1.3em;
+  background-color: var(--gray-500);
+  border-radius: 50%;
+  vertical-align: middle;
+  border: 2px solid var(--blue-300);
+  appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+  cursor: pointer;
+  margin-right: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center
+}
+
+.checkboxRoundCheck {
+  width: 1.3em;
+  height: 1.3em;
+  background-color: var(--purple-500);
+  border-radius: 50%;
+  vertical-align: middle;
+  border: 2px solid var(--purple-500);
+  appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+  cursor: pointer;
+  margin-right: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+svg{
+  color: var(--gray-100);
+  margin-top: 1px;
+}

src/components/CheckBox.tsx

@@ -0,0 +1,22 @@
+import { Check } from "phosphor-react";
+import styles from "./CheckBox.module.css";
+
+interface Props {
+  checked: boolean;
+}
+
+function CheckBox({ checked }: Props): JSX.Element {
+  return (
+    <div>
+      {checked ? (
+        <button className={styles.checkboxRound} />
+      ) : (
+        <button className={styles.checkboxRoundCheck}>
+          <Check size={14} className={styles.imageSvg} weight="bold" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default CheckBox;

src/components/TaskBoard.module.css

@@ -0,0 +1,55 @@
+
+.count{
+  max-width: 49rem;
+  margin: 0 auto;
+  padding: 4rem 1.3rem 0.65rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.createdTask{
+  color: var(--blue-300);
+  font-size: 0.875rem;
+  font-weight: bold;
+}
+
+.done{
+  color: var( --purple-300);
+  font-size: 0.875rem;
+  font-weight: bold;  
+}
+
+.createdTask span, .done span{
+  margin-left: 2px;
+  border-radius: 8px;
+  padding: 0.1rem 0.45rem 0.1rem;
+  background-color: var( --gray-400);;
+  color: var( --gray-200);
+  font-size: 0.75rem;
+  font-weight: bold;
+}
+
+.item{
+  border: 1px solid var(--gray-400);
+  border-radius: 8px;
+  background-color: var(--gray-500);
+  max-width: 49rem;
+  margin: 0 auto;
+  padding: 1.3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.65rem
+}
+
+.itemText{
+  color: var( --gray-100);
+  font-weight: 300;
+}
+
+.trash{
+  padding: 0.1rem;
+  margin-bottom: 0.5rem;
+}
+

src/components/TaskBoard.tsx

@@ -0,0 +1,52 @@
+import { PlusCircle, Trash } from "phosphor-react";
+import { useState } from "react";
+
+import logo from "../assets/logo.svg";
+import CheckBox from "./Checkbox";
+
+import styles from "./TaskBoard.module.css";
+
+function TaskBoard() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <>
+      <div className={styles.count}>
+        <div className={styles.createdTask}>
+          Created Tasks <span>0</span>
+        </div>
+        <div className={styles.done}>
+          Done <span>0</span>
+        </div>
+      </div>
+
+      <div className={styles.item}>
+        <div onClick={() => setChecked(!checked)}>
+          <CheckBox checked={checked} />
+        </div>
+        <span className={styles.itemText}>
+          Integer urna interdum massa libero auctor neque turpis turpis semper.
+          Duis vel sed fames integer.
+        </span>
+        <div className={styles.trash}>
+          <Trash size={20} />
+        </div>
+      </div>
+
+      <div className={styles.item}>
+        <div onClick={() => setChecked(!checked)}>
+          <CheckBox checked={checked} />
+        </div>
+        <span className={styles.itemText}>
+          Integer urna interdum massa libero auctor neque turpis turpis semper.
+          Duis vel sed fames integer.
+        </span>
+        <div className={styles.trash}>
+          <Trash size={20} />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default TaskBoard;