Update Eisenhower Matrix

This commit is contained in:
sosokker 2023-11-16 23:27:02 +07:00
parent 02c51a7def
commit 92bc65ce2f
2 changed files with 52 additions and 12 deletions

View File

@ -1,25 +1,65 @@
import React from "react"; import React from "react";
import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
function EachBlog({ name, colorCode }) { function EachBlog({ name, colorCode, contentList, icon }) {
return ( return (
<div className={`grid grid-rows-2 gap-4 text-left p-4 rounded-lg bg-white border border-gray-300 shadow-md`}> <div
<div className={`text-xl font-bold`} style={{ color: colorCode }}> className={`h-full text-left p-4 rounded-lg bg-white border border-gray-300 overflow-y-auto`}>
{name} <div className="flex" style={{ color: colorCode }}>
<span className="mx-2 mt-1">{icon}</span>
<span>{name}</span>
</div>
<hr className="my-3 h-0.5 border-t-0 bg-gray-300 opacity-100 dark:opacity-50" />
<div className="space-y-2">
{contentList.length === 0 ? (
<p className="text-gray-500 text-center">No tasks</p>
) : (
contentList.map((item, index) => (
<div key={index} className="flex items-start">
<input type="checkbox" checked={item.checked} className="checkbox mt-1 mr-2" />
<label className="cursor-pointer">{item.text}</label>
</div>
))
)}
</div> </div>
<div className="h-36">Content goes here</div>
</div> </div>
); );
} }
function Eisenhower() { function Eisenhower() {
const contentList_ui = [
{ text: "Complete report for the meeting", checked: true },
{ text: "Review project proposal", checked: false },
{ text: "Submit expense report", checked: false },
{ text: "Complete report for the meeting", checked: true },
{ text: "Review project proposal", checked: false },
{ text: "Submit expense report", checked: false },
{ text: "Complete report for the meeting", checked: true },
{ text: "Review project proposal", checked: false },
{ text: "Submit expense report", checked: false },
];
const contentList_uni = [];
const contentList_nui = [];
const contentList_nuni = [];
return ( return (
<div className="bg-slate-100 text-left p-4 m-auto"> <div className="bg-slate-100 text-left p-4 w-full">
<h1 className="text-3xl font-bold mb-4">The Eisenhower Matrix</h1>
<div className="grid grid-rows-2 grid-cols-2 gap-2"> <div className="grid grid-rows-2 grid-cols-2 gap-2">
<EachBlog name="Urgent & Important" colorCode="#FF5733" /> <EachBlog name="Urgent & Important" colorCode="#ff5f68" icon={<FiAlertCircle />} contentList={contentList_ui} />
<EachBlog name="Urgent & Not important" colorCode="#FDDD5C" /> <EachBlog name="Urgent & Not important" colorCode="#ffb000" icon={<FiClock />} contentList={contentList_uni} />
<EachBlog name="Not urgent & Important" colorCode="#189AB4" /> <EachBlog
<EachBlog name="Not urgent & Not important" colorCode="#94FA92" /> name="Not urgent & Important"
colorCode="#4772fa"
icon={<FiCheckCircle />}
contentList={contentList_nui}
/>
<EachBlog
name="Not urgent & Not important"
colorCode="#0cce9c"
icon={<FiXCircle />}
contentList={contentList_nuni}
/>
</div> </div>
</div> </div>
); );

View File

@ -4,7 +4,7 @@ import ProfileUpdateComponent from "./ProfileUpdateComponent";
function ProfileUpdatePage() { function ProfileUpdatePage() {
return ( return (
<div> <div>
<div className="stats shadow"> <div className="stats shadow mt-3">
<div className="stat"> <div className="stat">
<div className="stat-title truncate">Username</div> <div className="stat-title truncate">Username</div>
<div className="stat-value truncate">Sirin</div> <div className="stat-value truncate">Sirin</div>