mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-18 21:44:07 +01:00
Add task detail modal
This commit is contained in:
sosokker
parent
f8f6495a61
commit
fd842eae5e
@ -10,7 +10,6 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@asseinfo/react-kanban": "^2.2.0",
|
||||
"@dnd-kit/core": "^6.1.0",
|
||||
"@dnd-kit/sortable": "^8.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
@ -36,6 +35,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-bootstrap": "^2.9.1",
|
||||
"react-datetime-picker": "^5.5.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.11.0",
|
||||
"react-router-dom": "^6.18.0"
|
||||
|
||||
@ -5,9 +5,6 @@ settings:
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
dependencies:
|
||||
'@asseinfo/react-kanban':
|
||||
specifier: ^2.2.0
|
||||
version: 2.2.0(react-dom@18.2.0)(react@18.2.0)
|
||||
'@dnd-kit/core':
|
||||
specifier: ^6.1.0
|
||||
version: 6.1.0(react-dom@18.2.0)(react@18.2.0)
|
||||
@ -83,6 +80,9 @@ dependencies:
|
||||
react-bootstrap:
|
||||
specifier: ^2.9.1
|
||||
version: 2.9.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
react-datetime-picker:
|
||||
specifier: ^5.5.3
|
||||
version: 5.5.3(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
react-dom:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0(react@18.2.0)
|
||||
@ -154,19 +154,6 @@ packages:
|
||||
'@jridgewell/trace-mapping': 0.3.20
|
||||
dev: true
|
||||
|
||||
/@asseinfo/react-kanban@2.2.0(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-/gCigrNXRHeP9VCo8RipTOrA0vAPRIOThJhR4ibVxe6BLkaWFUEuJ1RMT4fODpRRsE3XsdrfVGKkfpRBKgvxXg==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
react-beautiful-dnd: 13.1.1(react-dom@18.2.0)(react@18.2.0)
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
transitivePeerDependencies:
|
||||
- react-native
|
||||
dev: false
|
||||
|
||||
/@babel/code-frame@7.22.13:
|
||||
resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
@ -1328,6 +1315,16 @@ packages:
|
||||
hoist-non-react-statics: 3.3.2
|
||||
dev: false
|
||||
|
||||
/@types/lodash.memoize@4.1.9:
|
||||
resolution: {integrity: sha512-glY1nQuoqX4Ft8Uk+KfJudOD7DQbbEDF6k9XpGncaohW3RW4eSWBlx6AA0fZCrh40tZcQNH4jS/Oc59J6Eq+aw==}
|
||||
dependencies:
|
||||
'@types/lodash': 4.14.201
|
||||
dev: false
|
||||
|
||||
/@types/lodash@4.14.201:
|
||||
resolution: {integrity: sha512-y9euML0cim1JrykNxADLfaG0FgD1g/yTHwUs/Jg9ZIU7WKj2/4IW9Lbb1WZbvck78W/lfGXFfe+u2EGfIJXdLQ==}
|
||||
dev: false
|
||||
|
||||
/@types/parse-json@4.0.2:
|
||||
resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
|
||||
dev: false
|
||||
@ -1339,7 +1336,6 @@ packages:
|
||||
resolution: {integrity: sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==}
|
||||
dependencies:
|
||||
'@types/react': 18.2.37
|
||||
dev: true
|
||||
|
||||
/@types/react-redux@7.1.30:
|
||||
resolution: {integrity: sha512-i2kqM6YaUwFKduamV6QM/uHbb0eCP8f8ZQ/0yWf+BsAVVsZPRYJ9eeGWZ3uxLfWwwA0SrPRMTPTqsPFkY3HZdA==}
|
||||
@ -1390,6 +1386,10 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@wojtekmaj/date-utils@1.5.1:
|
||||
resolution: {integrity: sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==}
|
||||
dev: false
|
||||
|
||||
/acorn-jsx@5.3.2(acorn@8.11.2):
|
||||
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
|
||||
peerDependencies:
|
||||
@ -1811,6 +1811,10 @@ packages:
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/detect-element-overflow@1.4.2:
|
||||
resolution: {integrity: sha512-4m6cVOtvm/GJLjo7WFkPfwXoEIIbM7GQwIh4WEa4g7IsNi1YzwUsGL5ApNLrrHL29bHeNeQ+/iZhw+YHqgE2Fw==}
|
||||
dev: false
|
||||
|
||||
/didyoumean@1.2.2:
|
||||
resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
|
||||
dev: true
|
||||
@ -2295,6 +2299,13 @@ packages:
|
||||
get-intrinsic: 1.2.2
|
||||
dev: true
|
||||
|
||||
/get-user-locale@2.3.1:
|
||||
resolution: {integrity: sha512-VEvcsqKYx7zhZYC1CjecrDC5ziPSpl1gSm0qFFJhHSGDrSC+x4+p1KojWC/83QX//j476gFhkVXP/kNUc9q+bQ==}
|
||||
dependencies:
|
||||
'@types/lodash.memoize': 4.1.9
|
||||
lodash.memoize: 4.1.2
|
||||
dev: false
|
||||
|
||||
/glob-parent@5.1.2:
|
||||
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
|
||||
engines: {node: '>= 6'}
|
||||
@ -2728,6 +2739,10 @@ packages:
|
||||
resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
|
||||
dev: true
|
||||
|
||||
/lodash.memoize@4.1.2:
|
||||
resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
|
||||
dev: false
|
||||
|
||||
/lodash.merge@4.6.2:
|
||||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||
dev: true
|
||||
@ -2744,6 +2759,10 @@ packages:
|
||||
yallist: 3.1.1
|
||||
dev: true
|
||||
|
||||
/make-event-props@1.6.2:
|
||||
resolution: {integrity: sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==}
|
||||
dev: false
|
||||
|
||||
/memoize-one@5.2.1:
|
||||
resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
|
||||
dev: false
|
||||
@ -3134,6 +3153,97 @@ packages:
|
||||
warning: 4.0.3
|
||||
dev: false
|
||||
|
||||
/react-calendar@4.6.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-MvCPdvxEvq7wICBhFxlYwxS2+IsVvSjTcmlr0Kl3yDRVhoX7btNg0ySJx5hy9rb1eaM4nDpzQcW5c87nfQ8n8w==}
|
||||
peerDependencies:
|
||||
'@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 18.2.37
|
||||
'@wojtekmaj/date-utils': 1.5.1
|
||||
clsx: 2.0.0
|
||||
get-user-locale: 2.3.1
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
tiny-warning: 1.0.3
|
||||
dev: false
|
||||
|
||||
/react-clock@4.5.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-xcSpsehBpX0NHwjEzZ9BP4Ouv54nlYqDMHoone82xW7TpPdkWNrBQd4+SiMQfbpqj1yvh2kSwn6FXffw37gAkw==}
|
||||
peerDependencies:
|
||||
'@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 18.2.37
|
||||
'@wojtekmaj/date-utils': 1.5.1
|
||||
clsx: 2.0.0
|
||||
get-user-locale: 2.3.1
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/react-date-picker@10.5.2(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-EwLNYPy+/2p7VwsAWnitPhtkC2tesABkZNlAAIEPZeHucyMlO5KB6z55POdtamu6T6vs0RY2G5EVgxDaxlj0MQ==}
|
||||
peerDependencies:
|
||||
'@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 18.2.37
|
||||
'@wojtekmaj/date-utils': 1.5.1
|
||||
clsx: 2.0.0
|
||||
get-user-locale: 2.3.1
|
||||
make-event-props: 1.6.2
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-calendar: 4.6.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
react-fit: 1.7.1(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
update-input-width: 1.4.2
|
||||
transitivePeerDependencies:
|
||||
- '@types/react-dom'
|
||||
dev: false
|
||||
|
||||
/react-datetime-picker@5.5.3(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-bWGEPwGrZjaXTB8P4pbTSDygctLaqTWp0nNibaz8po+l4eTh9gv3yiJ+n4NIcpIJDqZaQJO57Bnij2rAFVQyLw==}
|
||||
peerDependencies:
|
||||
'@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 18.2.37
|
||||
'@wojtekmaj/date-utils': 1.5.1
|
||||
clsx: 2.0.0
|
||||
get-user-locale: 2.3.1
|
||||
make-event-props: 1.6.2
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-calendar: 4.6.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
react-clock: 4.5.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
react-date-picker: 10.5.2(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
react-fit: 1.7.1(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
react-time-picker: 6.5.2(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
transitivePeerDependencies:
|
||||
- '@types/react-dom'
|
||||
dev: false
|
||||
|
||||
/react-dom@18.2.0(react@18.2.0):
|
||||
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
|
||||
peerDependencies:
|
||||
@ -3144,6 +3254,28 @@ packages:
|
||||
scheduler: 0.23.0
|
||||
dev: false
|
||||
|
||||
/react-fit@1.7.1(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-y/TYovCCBzfIwRJsbLj0rH4Es40wPQhU5GPPq9GlbdF09b0OdzTdMSkBza0QixSlgFzTm6dkM7oTFzaVvaBx+w==}
|
||||
peerDependencies:
|
||||
'@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
'@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 18.2.37
|
||||
'@types/react-dom': 18.2.15
|
||||
detect-element-overflow: 1.4.2
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
tiny-warning: 1.0.3
|
||||
dev: false
|
||||
|
||||
/react-icons@4.11.0(react@18.2.0):
|
||||
resolution: {integrity: sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==}
|
||||
peerDependencies:
|
||||
@ -3217,6 +3349,31 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-time-picker@6.5.2(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-xRamxjndpq3HfnEL+6T3VyirLMEn4D974OJgs9sTP8iJX/RB02rmwy09C9oBThTGuN3ycbozn06iYLn148vcdw==}
|
||||
peerDependencies:
|
||||
'@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 18.2.37
|
||||
'@wojtekmaj/date-utils': 1.5.1
|
||||
clsx: 2.0.0
|
||||
get-user-locale: 2.3.1
|
||||
make-event-props: 1.6.2
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-clock: 4.5.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
react-fit: 1.7.1(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
|
||||
update-input-width: 1.4.2
|
||||
transitivePeerDependencies:
|
||||
- '@types/react-dom'
|
||||
dev: false
|
||||
|
||||
/react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
|
||||
peerDependencies:
|
||||
@ -3545,6 +3702,10 @@ packages:
|
||||
resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
|
||||
dev: false
|
||||
|
||||
/tiny-warning@1.0.3:
|
||||
resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
|
||||
dev: false
|
||||
|
||||
/to-fast-properties@2.0.0:
|
||||
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
|
||||
engines: {node: '>=4'}
|
||||
@ -3654,6 +3815,10 @@ packages:
|
||||
picocolors: 1.0.0
|
||||
dev: true
|
||||
|
||||
/update-input-width@1.4.2:
|
||||
resolution: {integrity: sha512-/p0XLhrQQQ4bMWD7bL9duYObwYCO1qGr8R19xcMmoMSmXuQ7/1//veUnCObQ7/iW6E2pGS6rFkS4TfH4ur7e/g==}
|
||||
dev: false
|
||||
|
||||
/uri-js@4.4.1:
|
||||
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
||||
dependencies:
|
||||
|
||||
@ -1,14 +1,116 @@
|
||||
import React from "react";
|
||||
import { FaTasks, FaRegListAlt } from "react-icons/fa";
|
||||
import { FaPlus } from "react-icons/fa6";
|
||||
import { TbChecklist } from "react-icons/tb";
|
||||
|
||||
function TaskDetailModal() {
|
||||
|
||||
return (
|
||||
<dialog id="task_detail_modal" className="modal">
|
||||
<div className="modal-box">
|
||||
<div className="modal-box w-4/5 max-w-3xl">
|
||||
{/* Title */}
|
||||
<div className="flex flex-col py-2">
|
||||
<div className="flex flex-col">
|
||||
<h3 className="font-bold text-lg">
|
||||
<span className="flex gap-2">{<FaTasks className="my-2" />}Title</span>
|
||||
</h3>
|
||||
<p className="text-xs">Todo List</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-col py-2 pb-4">
|
||||
<div className="flex flex-row space-x-5">
|
||||
<div className="dropdown">
|
||||
<label tabIndex={0} className="btn-md border-2 rounded-xl m-1 py-1">
|
||||
+ Add Tags
|
||||
</label>
|
||||
<ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
|
||||
<li>
|
||||
<a>
|
||||
<input type="checkbox" checked="checked" className="checkbox checkbox-sm" />
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<input type="checkbox" checked="checked" className="checkbox checkbox-sm" />
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<input type="checkbox" checked="checked" className="checkbox checkbox-sm" />
|
||||
Item 2
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-nowrap overflow-x-auto"></div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="font-bold">
|
||||
<span className="flex gap-2">
|
||||
<FaRegListAlt className="my-1" />
|
||||
Description
|
||||
</span>
|
||||
</h2>
|
||||
<textarea className="textarea w-full" disabled></textarea>
|
||||
</div>
|
||||
|
||||
{/* Difficulty, Challenge and Importance */}
|
||||
<div className="flex flex-row space-x-3 my-4">
|
||||
<div className="flex-1 card shadow border-2 p-2">
|
||||
<input type="range" id="difficultySelector" min={0} max="100" value="50" className="range" step="25" />
|
||||
<div className="w-full flex justify-between text-xs px-2 space-x-2">
|
||||
<span>Easy</span>
|
||||
<span>Normal</span>
|
||||
<span>Hard</span>
|
||||
<span>Very Hard</span>
|
||||
<span>Devil</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow border-2 p-2">
|
||||
<div className="form-control">
|
||||
<label className="label cursor-pointer space-x-2">
|
||||
<span className="label-text">Challenge</span>
|
||||
<input type="checkbox" checked="checked" className="checkbox" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow border-2 p-2">
|
||||
<div className="form-control">
|
||||
<label className="label cursor-pointer space-x-2">
|
||||
<span className="label-text">Important</span>
|
||||
<input type="checkbox" checked="checked" className="checkbox" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subtask */}
|
||||
<div className="flex flex-col pt-2">
|
||||
<h2 className="font-bold">
|
||||
<span className="flex gap-1">
|
||||
<TbChecklist className="my-1" />
|
||||
Subtasks
|
||||
</span>
|
||||
</h2>
|
||||
<div className="flex space-x-3 pt-2">
|
||||
<input type="text" placeholder="subtask topic" className="input input-bordered flex-1 w-full" />
|
||||
<button className="btn">
|
||||
<FaPlus />
|
||||
Add Subtask
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="dialog">
|
||||
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
||||
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">X</button>
|
||||
</form>
|
||||
<h3 className="font-bold text-lg">Hello!</h3>
|
||||
<p className="py-4">Press ESC key or click on ✕ button to close</p>
|
||||
</div>
|
||||
</dialog>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user