final touches

reactplay · Oct 22, 2024 · e7304f1 · e7304f1
1 parent 3ccb8f2
commit e7304f1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 21 deletions.
diff --git a/src/plays/daily-journa/DailyJournal.jsx b/src/plays/daily-journa/DailyJournal.jsx
@@ -28,6 +28,8 @@ function DailyJournal(props) {
 
   const goBack = () => setSelectedEntry(null);
 
+  const onDelete = () => setEntries([]);
+
   return (
     <>
       <div className="play-details">
@@ -36,19 +38,20 @@ function DailyJournal(props) {
           {/* Your Code Starts Here */}
           <div>
             <div className="min-h-screen flex flex-col">
+              <h1 className="text-3xl font-semibold mb-3 text-center ">Daily Journal</h1>
+              <p className="mb-6 text-gray-600 text-center">
+                Your daily companion that you can share your thoughts and feelings with.{' '}
+              </p>
               <div className="flex flex-grow p-4">
                 <div className="w-full md:w-2/3 lg:w-2/4 p-4">
-                  <h1 className="text-2xl font-bold mb-4">Daily Journal</h1>
-                  <p className="mb-6 text-gray-600">Write your thoughts and feelings here.</p>
                   <JournalEntryForm onSubmit={addEntry} />
                 </div>
                 <div className="w-full md:w-1/3 lg:w-2/4 p-4">
                   {selectedEntry ? (
                     <EntryDetails entry={selectedEntry} onBack={goBack} />
                   ) : (
                     <>
-                      <h2 className="text-xl font-semibold mb-4">Entries</h2>
-                      <EntryList entries={entries} onSelect={viewEntry} />
+                      <EntryList entries={entries} onDelete={onDelete} onSelect={viewEntry} />
                     </>
                   )}
                 </div>

diff --git a/src/plays/daily-journa/components/EntryList.jsx b/src/plays/daily-journa/components/EntryList.jsx
@@ -1,8 +1,16 @@
 import React from 'react';
 
-const EntryList = ({ entries, onSelect }) => (
+const EntryList = ({ entries, onSelect, onDelete }) => (
   <div className="bg-white shadow-md rounded-lg p-4">
-    <h2>Past Entries</h2>
+    <h2 className="text-center font-semibold text-pink-500">Past Entries</h2>
+    {entries.length > 0 ? (
+      <button
+        className="mt-4 mr-0 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded"
+        onClick={onDelete}
+      >
+        Delete entries
+      </button>
+    ) : null}
     {entries.length === 0 ? <p>No entries found</p> : null}
     <ul>
       {entries.map((entry) => (

diff --git a/src/plays/daily-journa/components/JournalEntryForm.jsx b/src/plays/daily-journa/components/JournalEntryForm.jsx
@@ -21,26 +21,30 @@ const JournalEntryForm = ({ onSubmit }) => {
   };
 
   return (
-    <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={handleSubmit}>
+    <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 " onSubmit={handleSubmit}>
       <textarea
-        placeholder="Write your journal entry here..."
+        className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 "
+        placeholder="How was your day like? "
         value={text}
         onChange={(e) => setText(e.target.value)}
       />
-      <select value={mood} onChange={(e) => setMood(e.target.value)}>
-        <option value="happy">Happy</option>
-        <option value="sad">Sad</option>
-        <option value="excited">Excited</option>
-        <option value="anxious">Anxious</option>
-      </select>
-      <input
-        placeholder="Add tags (comma-separated)"
-        type="text"
-        value={tags}
-        onChange={(e) => setTags(e.target.value)}
-      />
+      <div className="flex flex-raw ">
+        <select className="mr-5" value={mood} onChange={(e) => setMood(e.target.value)}>
+          <option value="happy">Happy</option>
+          <option value="sad">Sad</option>
+          <option value="excited">Excited</option>
+          <option value="anxious">Anxious</option>
+        </select>
+        <input
+          className=""
+          placeholder="Tags: Home Family ..."
+          type="text"
+          value={tags}
+          onChange={(e) => setTags(e.target.value)}
+        />
+      </div>
       <button
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        className="bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded mt-6"
         type="submit"
       >
         Add Entry