color input finished

package.json

@@ -11,11 +11,13 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
     "classnames": "^2.5.1",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
     "@rocketseat/eslint-config": "^2.2.2",

src/components/TaskList/TaskListHeader.tsx

@@ -1,30 +1,39 @@
-import { Plus } from '@phosphor-icons/react'
+import { Plus, Trash } from '@phosphor-icons/react'
 import { useRouter } from 'next/router'
 
 interface TaskListHeaderProps {
   showAddButton?: boolean
   listTitle: string
+  titleRoute?: string
 }
 
 export function TaskListHeader({
   listTitle,
   showAddButton = false,
 }: TaskListHeaderProps) {
   const router = useRouter()
+
   return (
     <div className="flex w-full items-center justify-between">
       <span className="text-xl font-medium text-text">{listTitle}</span>
-      {showAddButton && (
-        <button
-          type="button"
-          onClick={() => {
-            router.push('/add-task')
-          }}
-          className="flex min-w-button items-center justify-center gap-1.5 rounded-md bg-white px-3 py-2.5 text-center text-xs  font-medium text-text shadow-sm "
-        >
-          <Plus size={19} className="text-text" weight="bold" /> add
-        </button>
-      )}
+      <div className="flex flex-row gap-2">
+        {showAddButton && (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                router.push('/add-task')
+              }}
+              className="flex  min-w-button items-center justify-center gap-1.5 rounded-md bg-white px-3 py-2.5 text-center text-xs  font-medium text-text shadow-sm "
+            >
+              <Plus size={19} className="text-text" weight="bold" /> add
+            </button>
+            <button className="rounded-md bg-red px-3 py-2.5 shadow-sm hover:brightness-90">
+              <Trash className="text-white " />
+            </button>
+          </>
+        )}
+      </div>
     </div>
   )
 }

src/models/Task.tsx

@@ -0,0 +1,11 @@
+export const taskBgColorArray = [
+  'bg-card01',
+  'bg-card02',
+  'bg-card03',
+  'bg-card04',
+  'bg-card05',
+  'bg-card06',
+  'bg-card07',
+  'bg-card08',
+  'bg-card09',
+]

src/pages/add-task/components/ColorSelect/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+
+const ColorRadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroup.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroup.Root>
+>(({ children, ...props }, ref) => (
+  <RadioGroup.Root
+    className="flex flex-row flex-wrap gap-3 "
+    defaultValue="default"
+    aria-label="View density"
+    ref={ref}
+    {...props}
+  >
+    {children}
+  </RadioGroup.Root>
+))
+
+ColorRadioGroup.displayName = 'ColorRadioGroup'
+
+const ColorRadioItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroup.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroup.Item>
+>(({ children, ...props }, ref) => (
+  <RadioGroup.Item
+    className={`
+      h-11 
+      w-11
+      rounded-full
+      border-2 border-white bg-white shadow-sm`}
+    {...props}
+    ref={ref}
+  >
+    <RadioGroup.Indicator
+      className="
+      absolute
+      h-11  
+      w-11 translate-x-[-50%]
+      translate-y-[-50%] 
+      rounded-full
+      border-2
+      border-solid
+      border-green-400
+      bg-white
+  "
+    />
+    {children}
+  </RadioGroup.Item>
+))
+
+ColorRadioItem.displayName = 'ColorRadioItem'
+
+export { ColorRadioGroup, ColorRadioItem }

src/pages/add-task/index.page.tsx

@@ -9,6 +9,9 @@ import { InputText } from '@/components/form/Input/TextInput'
 import { Header } from '@/components/Header'
 import { taskOptionsArray } from '@/services/task-options'
 import { useRouter } from 'next/router'
+import { ColorRadioGroup, ColorRadioItem } from './components/ColorSelect'
+import { taskBgColorArray } from '@/models/Task'
+import { twMerge } from 'tailwind-merge'
 
 export default function AddTask() {
   const router = useRouter()
@@ -47,11 +50,27 @@ export default function AddTask() {
             }}
           >
             <SelectTrigger>
-              <SelectValue />
+              <SelectValue placeholder="Select..." />
             </SelectTrigger>
             <SelectContent>{renderSelectOptions()}</SelectContent>
           </Select>
         </label>
+        <label className="flex flex-col gap-2.5 pb-4 text-xl font-medium text-title ">
+          What's the best color for that?
+          <ColorRadioGroup>
+            {taskBgColorArray.map((item) => {
+              const classname = twMerge(
+                'absolute h-6 w-6 translate-x-[-50%] translate-y-[-50%] rounded-full ',
+                item,
+              )
+              return (
+                <ColorRadioItem key={item} value={item} id={item}>
+                  <span className={classname} />
+                </ColorRadioItem>
+              )
+            })}
+          </ColorRadioGroup>
+        </label>
       </div>
     </form>
   )

tailwind.config.ts

@@ -10,15 +10,15 @@ const config: Config = {
       backgroundColor: {
         white: '#fff',
         'app-bg': '#F1F5F9',
-        'card-bg-1': '#99F6E4',
-        'card-bg-2': '#A5F3FC',
-        'card-bg-3': '#BAE6FD',
-        'card-bg-4': '#BBF7D0',
-        'card-bg-5': '#D9F99D',
-        'card-bg-6': '#DDD6FE',
-        'card-bg-7': '#FECDD3',
-        'card-bg-8': '#FED7AA',
-        'card-bg-9': '#FEF08A',
+        card01: '#99F6E4',
+        card02: '#A5F3FC',
+        card03: '#BAE6FD',
+        card04: '#BBF7D0',
+        card05: '#D9F99D',
+        card06: '#DDD6FE',
+        card07: '#FECDD3',
+        card08: '#FED7AA',
+        card09: '#FEF08A',
         input: '#CBD5E1',
         red: '#DC2626',
       },