TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 05:54:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Redo eisenhower matrix for better look

Browse Source
This commit is contained in:
Wissarut Kanasub 2023-11-11 13:10:35 +07:00
parent 46f9721650
commit 8dd7a5231d
1 changed files with 19 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/components/the_eisenhower_matrix/Eisenhower.jsx
View File

@ -1,47 +1,27 @@
import React from 'react'; import React from 'react';
// Styles for row headers function EachBlog({ name, colorCode }) {
const rowHeaderStyle = "bg-pink-300 text-pink-700 p-4 rounded-lg font-semibold text-lg shadow-md"; return (
<div className="grid grid-rows-2 gap-4 text-left p-4 rounded-lg bg-white">
// Styles for column headers <div className="text-xl font-bold" style={{ color: colorCode }}>
const columnHeaderStyle = "bg-blue-300 text-blue-700 p-4 rounded-lg font-semibold text-lg shadow-md"; {name}
</div>
// Styles for content cells in green <div>
const greenContextStyle = "bg-green-300 text-green-700 p-4 rounded-lg text-lg shadow-md"; content
</div>
// Styles for content cells in yellow </div>
const yellowContextStyle = "bg-yellow-300 text-yellow-700 p-4 rounded-lg text-lg shadow-md"; );
}
function Eisenhower() { function Eisenhower() {
return ( return (
<div className="grid grid-rows-3 grid-flow-col gap-3 m-auto w-1/2 h-auto p-5 bg-slate-500 rounded-lg shadow-md"> <div className='bg-slate-200 text-left p-1 m-auto'>
<div className="bg-indigo-300 text-indigo-700 p-4 rounded-lg font-semibold text-2xl shadow-lg"> <h1 className="text-xl font-bold">The Eisenhower Matrix</h1>
Eisenhower Matrix <div className='p-4 m-auto grid grid-rows-2 grid-cols-2 gap-4'>
</div> <EachBlog name="Urgent & Important" colorCode="#FF5733" />
{/* Row Headers */} <EachBlog name="Urgent & Not important" colorCode="#FDDD5C" />
<div className={rowHeaderStyle}>Important</div> <EachBlog name="Not urgent & Important" colorCode="#189AB4" />
<div className={rowHeaderStyle}>Not Important</div> <EachBlog name="Not urgent & Not important" colorCode="#94FA92" />
{/* Column Headers */}
<div className={columnHeaderStyle}>Urgent</div>
{/* Content Cells */}
<div className={greenContextStyle}>
Urgent & Important
</div>
<div className={yellowContextStyle}>
Urgent & Not Important
</div>
{/* Column Headers */}
<div className={columnHeaderStyle}>Not Urgent</div>
{/* Content Cells */}
<div className={yellowContextStyle}>
Not Urgent & Important
</div>
<div className={greenContextStyle}>
Not Urgent & Not Important
</div> </div>
</div> </div>
); );