📒 Notes Component Added

components/app/App.tsx

@@ -2,6 +2,7 @@ import { CodeIcon, SearchIcon } from "@heroicons/react/outline";
 import { NextPage } from "next";
 import { useEffect, useState } from "react";
 import theme from "../../utils/theme";
+import Note from "./note/Note";
 
 const App: NextPage = () => {
     const [color, setColor] = useState('#000000');
@@ -32,6 +33,9 @@ const App: NextPage = () => {
                     <SearchIcon className="h-5 w-5 mr-3 text-gray-400 font-bold" />
                 </label>
             </div>
+            <div className="py-8">
+                <Note id={1} title="Teste" color="#ffffff" />
+            </div>
             <footer className="mt-auto">
                 <div className="w-full flex flex-row justify-center items-center py-3">
                     <div className="text-center">

components/app/note/Note.tsx

@@ -0,0 +1,16 @@
+interface Props {
+    id: number;
+    title: string;
+    color: string;
+}
+
+const Note = (prop: Props) => {
+    const { id, title, color } = prop;
+    return (
+        <div className="md:w-1/2 w-full bg-gray-700 text-white p-6 cursor-pointer rounded" style={{borderLeftWidth: 4, borderLeftColor: color, borderLeftStyle: "solid"}}>
+            <h1>{title}</h1>
+        </div>
+    )
+}
+
+export default Note;