Merge pull request #5 from clen678/dashBoardSkeleton

adding skeleton layout for dashboard
Taks0708 · Aug 11, 2024 · 6f10707 · 6f10707
2 parents 2a7891d + adbfdbe
commit 6f10707
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/frontend/src/components/TransactionLog.jsx b/frontend/src/components/TransactionLog.jsx
@@ -61,7 +61,7 @@ export default function TransactionList() {
   return (
     <div className='flex flex-col items-center'>
 
-      <div className=' w-[50%]'>
+      <div className=' w-[100%] bg-slate-300'>
         <div className='flex flex-row gap-4 items-center'>
           <h1 className='text-body '>Transaction Log</h1>
           <button className={filter === 'week' ? 'bg-primary-dark text-white text-xl font-bold rounded-full py-0 px-3 w-[130px]' : 'bg-primary text-white text-xl font-bold rounded-full py-0 px-3 w-[130px]'} onClick={filterWeek}>Last week</button>
@@ -70,7 +70,7 @@ export default function TransactionList() {
         </div>
         <div className=' flex justify-between flex-col items-center min-h-[400px]'>
 
-          <div className='w-[80%] mt-[40px]'>
+          <div className='w-[90%] mt-[40px]'>
             <ul>
               {transactions.map((transaction) => (
                 <Transaction key={transaction.id} transaction={transaction} className='' />

diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
@@ -3,9 +3,34 @@ import TransactionLog from '../components/TransactionLog';
 
 export default function Dashboard() {
   return (
-    <div>
-      <CurrentBalance />
-      <TransactionLog />
-    </div>
+    <>
+      <div className='bg-blue-200'>
+        <p>HEADER</p>
+      </div>
+
+      <div className=' flex flex-col px-[8%]'>
+        <div className='flex flex-row'>
+          <div className=' flex flex-col w-[80%]'>
+            <CurrentBalance />
+            <TransactionLog />
+          </div>
+
+          <div className='bg-slate-500 flex flex-col w-[20%] items-center'>
+            <p>BUTTON</p>
+            <p>BUTTON</p>
+            <p>DROPDOWN</p>
+          </div>
+        </div>
+
+        <div className='bg-orange-200 flex flex-row justify-center'>
+          <p>SAVINGS TRACKER/GOALS</p>
+        </div>
+
+        <div className='bg-green-300 flex flex-row justify-center'>
+          <p>INCOME STATS</p>
+        </div>
+
+      </div>
+    </>
   );
 }