part 1 - setting up notes component

Author: abhishekrathore

src/App.css

@@ -1,38 +1,4 @@
-.App {
+.App{
+  margin: 0 1rem;
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+}

src/App.tsx

@@ -1,24 +1,18 @@
-import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Note from './components/notes/notes';
+import { Notes } from './components/notes/data';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h2>Notes App</h2>
+      <div>
+        {
+          Notes.map(
+            note=> <Note priority={note.priority} text={note.text}></Note>
+          )
+        }
+      </div>
     </div>
   );
 }

src/components/notes/data.ts

@@ -0,0 +1,30 @@
+import {NoteProps} from './notes-type';
+
+export const Notes:NoteProps[] = [
+    {
+        id:1,
+        text: "This is note 1",
+        priority : "high"
+    },
+    {
+        id:2,
+        text: "This is note 2",
+        priority : "low"
+    },
+    {
+        id:3,
+        text: "This is note 3",
+        priority : "low"
+    },
+    {
+        id:4,
+        text: "This is note 4",
+        priority : "medium"
+    },
+    {
+        id:5,
+        text: "This is note 5",
+        priority : "medium"
+    }
+]
+    

src/components/notes/notes-type.ts

@@ -0,0 +1,5 @@
+export type NoteProps = {
+    id?: number,
+    text: string,
+    priority? : 'high' | 'medium' | 'low'
+}

src/components/notes/notes.css

@@ -0,0 +1,21 @@
+.note{
+    border: 1px solid grey;
+    padding: 2rem;
+    font-size: 1rem;
+    color: #333;
+    height: 10rem;
+    border-radius: 0.5rem;
+    background-color: burlywood;
+    margin-top: 1rem;
+
+}
+.high{
+    background-color:rgb(246, 100, 92);
+    color: white;
+}
+.medium{
+    background-color:rgb(244, 158, 127);
+}
+.low{
+    background-color: rgb(248, 249, 175);
+}

src/components/notes/notes.tsx

@@ -0,0 +1,14 @@
+import './notes.css'
+
+import {NoteProps} from './notes-type';
+
+function Note(props: NoteProps){
+    return (
+        <div className={`note ${props.priority}`}>
+            {props.text}
+        </div>
+    )
+}
+
+
+export default Note;