added detailed note component

Author: abhishekrathore

src/App.tsx

@@ -14,6 +14,7 @@ import {
   UPDATE_NOTE,
 } from './actions';
 import { getNotes } from './services/notes-service';
+import DetailedNote from './pages/detailed-note/detailed-note';
 
 function App() {
   const [theme, setTheme] = useState('light');
@@ -95,6 +96,7 @@ function App() {
           onHandleColor="#000"
         ></Switch>
         <Home></Home>
+        <DetailedNote></DetailedNote>
       </ThemeContext.Provider>
     </StateContext.Provider>
   );

src/components/card/card.css

@@ -2,7 +2,6 @@
     border: 1px solid grey;
     padding: 2rem;
     font-size: 1rem;
-    height: 5rem;
     border-radius: 0.5rem;
     margin-top: 1rem;
     position: relative;

src/components/note/note.tsx

@@ -16,6 +16,8 @@ type NoteProps = {
   createdAt: Date;
   updatedAt: Date;
   note: NoteType;
+  isDetailed?: boolean;
+  height?:string;
 };
 
 function Note(props: NoteProps) {
@@ -31,19 +33,20 @@ function Note(props: NoteProps) {
     console.log(await deleteNote(props.id));
     dispatch({ type: DELETE_NOTE, payload: props.id });
   };
-
+  
+  const optionalProps  = props.height ? {height:props.height}:{}
   return (
     <Card
       bgColor={
         theme === 'dark'
           ? props.priority && ColorDark[props.priority]
           : props.priority && ColorLight[props.priority]
       }
-      height="3"
       padding="1"
+      {...optionalProps}
     >
       <>
-        <div className='text'>{props.text}</div>
+        <div className={props.isDetailed?'':'text'}>{props.text}</div>
         <div className='left-corner date'>{props.updatedAt.toLocaleString()}</div>
         <div className="right-corner">
           <FaEdit onClick={() => editNote(props.note)}></FaEdit>

src/pages/detailed-note/detailed-note.css

@@ -0,0 +1,15 @@
+.detailed-note{
+  margin: 0;
+  text-align: center;
+  padding-top:1rem;
+}
+
+.detailed-note.light{
+  background-color: white;
+  color: black;
+}
+
+.detailed-note.dark{
+  background-color: #333;
+  color: white;
+}

src/pages/detailed-note/detailed-note.tsx

@@ -0,0 +1,29 @@
+import './detailed-note.css';
+import Note from '../../components/note/note';
+import { useContext } from 'react';
+import { ThemeContext } from '../../context/theme/theme';
+import { StateContext } from '../../context/state/state';
+
+function DetailedNote() {
+  const theme = useContext(ThemeContext);
+  const { state } = useContext(StateContext);
+  const note = state.notes[0];
+  return (
+    <div className={`detailed-note ${theme}`}>
+      <div>
+          {note && <Note
+            key={note.id}
+            id={note.id}
+            priority={note.priority}
+            text={note.text}
+            createdAt={note.createdAt}
+            updatedAt={note.updatedAt}
+            note={note}
+            isDetailed={true}
+          ></Note>}
+      </div>
+    </div>
+  );
+}
+
+export default DetailedNote;

src/pages/home/home.tsx

@@ -23,6 +23,7 @@ function Home() {
             createdAt={note.createdAt}
             updatedAt={note.updatedAt}
             note={note}
+            height="3"
           ></Note>
         ))}
       </div>