Problem Description

Build the following wireframe of the form using vite.js + React + TypeScript template. Use the react-hook-form package for the form.

Keep it simple and minimal. Add an index.css for the styles and only use standard HTML tags like div, table, th, tr, td, span, input etc. For icons, add separate svg/png files.

In react-hook-form, use useForm and useFieldArray for adding multiple records as shown in the wireframe above.

Create this form as a single React component.

Validations:

Fields:

• Date: yyyy-mm-dd. User can enter manually. No calendar component required.
• Project: Initialize a fixed list [Project1, Project2, Project3] . Required.
• Status: Initialize a fixed list [Started, Working, In-Progress]. Required.
• Title: Required. length > 0.
• Link: Optional but highlight in red if Title.length > 0
• Hrs: Optional. Only allow decimal numbers.

The form should always have one empty row at the bottom. As soon as the user types something in the title, a new empty row should get added. This new row should have the same Project and Status as the row above, to begin with. This is how the user adds multiple records. Notice that the last record cannot be removed.

On all changes, save the form in localStorage. So on hard reload, we don't lose the data.

On Submit, do a console.log in an async method. Only include the records where the title is not empty. Clear localStorage.

Acceptance Criteria

Clean minimal code. Less is more. Functional form with validations and behavior as described above. You can develop as a replit and share the link.