UI - Input layout #231
UI - Input layout #231
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -25,6 +25,7 @@ import { Label } from "@/components/ui/label"; | |||
| const CalculatorInput = () => { | |||
| const [view, setView] = useState("form"); | |||
| const [data, setData] = useState<Household | null>(null); | |||
| const [formData, setFormData] = useState<formType | null>(null); | |||
There was a problem hiding this comment.
I don't think we need to hold these values in state a second time - we can already access this with methods.getValues()
I'm not sure if methods is a standard naming convention - maybe we just call it form?
| return ( | ||
| <Dashboard | ||
| processedData={data as Household} | ||
| inputData={formData as formType} |
There was a problem hiding this comment.
See previous comment - I think the below should work.
| inputData={formData as formType} | |
| inputData={methods.getValues()} |
app/globals.css
Outdated
There was a problem hiding this comment.
I hadn't appreciated how much of this was redundant and just webflow styles (w-*).
Maybe it would be simpler to not import this at all and just emulate / copy styles ad-hoc. What do you think?
There was a problem hiding this comment.
Actually - here's a better idea 💡
If we just make a file called webflow.css which is just copy/pasted from the source, and then we can use import "./webflow.css" in layout.tsx
This should give us easy access to the styles, without cluttering our styles?
|
Sorry almost good to go, keep failing the coverage test. I am going to try a couple of other times, otherwise I night just add a couple of extra lines in the test to increase the coverage |
| } else if (view === "dashboard") { | ||
| return ( | ||
| <Dashboard | ||
| processedData={data as Household} | ||
| inputData={form.getValues()} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
It looks like the changes made in #243 have been lost when dealing with the merge conflicts here.
There was a problem hiding this comment.
Thanks @DafyddLlyr I should have picked up what was lost when merging
| } else if (view === "dashboard" && data) { | ||
| const formValues = form.getValues(); | ||
| return ( | ||
| <Dashboard | ||
| processedData={data} | ||
| inputData={formSchema.parse(formValues)} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
| } else if (view === "dashboard" && data) { | |
| const formValues = form.getValues(); | |
| return ( | |
| <Dashboard | |
| processedData={data} | |
| inputData={formSchema.parse(formValues)} | |
| /> | |
| ); | |
| } | |
| if (view === "dashboard" && data) { | |
| const formValues = form.getValues(); | |
| return ( | |
| <Dashboard | |
| processedData={data} | |
| inputData={formValues} | |
| /> | |
| ); |
At this point, the values are already parsed so we don't need to repeat this 👍
There was a problem hiding this comment.
Hopefully fixed thanks @DafyddLlyr
What does this PR do?
This is a work in progress on the UI of the calculator. It sets the font style and the initial grid.
It also adds a further component called
FormEdit.tsxin the dashboard, so that the user knows which input data have been used for the analysis.Webflow to match here https://fairhold.webflow.io/classbook