60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
|
function NewTimeReport(): JSX.Element {
|
||
|
|
const activities = [
|
||
|
|
"Development",
|
||
|
|
"Meeting",
|
||
|
|
"Administration",
|
||
|
|
"Own Work",
|
||
|
|
"Studies",
|
||
|
|
"Testing",
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
|
||
|
|
<input
|
||
|
|
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
|
||
|
|
type="week"
|
||
|
|
placeholder="Week"
|
||
|
|
onKeyDown={(event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
}}
|
||
|
|
onPaste={(event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th className="w-1/2 py-2 border-b-2 border-black">Activity</th>
|
||
|
|
<th className="w-1/2 py-2 border-b-2 border-black">
|
||
|
|
Total Time (min)
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="divide-y divide-black">
|
||
|
|
{activities.map((activity, index) => (
|
||
|
|
<tr key={index} className="h-[10vh]">
|
||
|
|
<td>{activity}</td>
|
||
|
|
<td>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
min="0"
|
||
|
|
className="border-2 border-black rounded-md text-center w-1/2"
|
||
|
|
onKeyDown={(event) => {
|
||
|
|
const keyValue = event.key;
|
||
|
|
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
|
||
|
|
event.preventDefault();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default NewTimeReport;
|