Closed otto-jacob closed 1 year ago
Hello human! 👋
This PR was created by Otto to address the issue Create src/components/TaskItem.tsx
Please review the PR carefully. Auto-generated code can and will contain subtle bugs and mistakes.
If you identify code that needs to be changed, please reject the PR with a specific reason. Be as detailed as possible in your comments. Otto will take these comments, make changes to the code and push up changes. Please note that this process will take a few minutes.
Once the code looks good, approve the PR and merge the code.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
otto-playground | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 7, 2023 9:15pm |
Summary:
Create a React component for src/components/TaskItem.tsx. Here are the instructions:
Task: Create TaskItem.tsx React Component
Description
We need to create a new React component called
TaskItem.tsx
that will be responsible for displaying individual task items in our project tasks page. This component will be written in TypeScript using ES6 syntax, such as arrow functions, and will utilize Tailwind CSS for styling.Requirements
Create a new file named
TaskItem.tsx
inside thesrc/components
directory.Import the necessary dependencies at the top of the file:
Props
interface for this component, which should include atask
prop of typeProjectTask
:TaskItem
that accepts theProps
interface as its props:Inside the component, render the following elements:
div
container with the Tailwind CSS classesbg-white p-4 rounded-lg shadow-md
to style the task item.h3
element with the Tailwind CSS classestext-lg font-semibold mb-2
to display the task name. Use thetask.taskName
prop for the content.p
element with the Tailwind CSS classestext-gray-600
to display the task description. Use thetask.taskDescription
prop for the content.div
container with the Tailwind CSS classesmt-4 flex items-center
to hold the status indicator and the "Approved" label.span
element with the Tailwind CSS classesw-4 h-4 mr-2 rounded-full
and apply the classbg-green-500
if the task is approved (task.approved === true
) orbg-red-500
if not approved.span
element with the Tailwind CSS classestext-gray-600
to display the text "Approved" if the task is approved or "Not Approved" if not approved.Export the
TaskItem
component as the default export:Example Usage
Here's an example of how the
TaskItem
component will be used in the parent component:Testing
task.approved
prop.Please submit a pull request with your changes once you have completed the task. If you have any questions or need further clarification, feel free to ask.