Updated Input1 Page (#131)

* added baseUrl, swapped styles to tw, swapped to shad

* wrapped in form and added route to handle form action

* spell checked

heat-stack/app/components/ui/heat/CaseSummaryComponents/HomeInformation.tsx

@@ -1,64 +1,81 @@
 import { Form } from '@remix-run/react'
-import { Input } from '../../input.tsx'
-import { Label } from '../../label.tsx'
+import { Input } from '#/app/components/ui/input.tsx'
+import { Label } from '#/app/components/ui/label.tsx'
+import { Button } from '#/app/components/ui/button.tsx'
+
+
 
 export function HomeInformation() {
-	const name = 'Pietro Schirano'
-	const street = '567 Pine Avenue Apt 21'
-	const city = 'Rivertown'
-	const state = 'MA'
-	const zip = '02856'
-	const country = 'United States of America'
-	const livingArea = '3,000'
-	const designTemperature = '63'
-	const designTemperatureOverride = '65'
 	return (
-		<div className="section-title">
-			Home Information
-			<hr />
-			<div className="flex flex-row">
-				<div className="basis-1/2">
-					<div className="item-title">
-						Resident / Client
-						<br />
-						<div className="item-big">{name}</div> <br />
-						Address
-						<div className="item-big">{street}</div>
-						<div className="item-big">
-							{city}, {state}, {zip}
+		<div>
+			<h2 className='text-5xl font-extrabold tracking-wide'>Home Information</h2>
+
+			<Form method="post" action='/homes'>
+
+				<div className='mt-10'>
+					<h6 className='text-zinc-950 text-2xl font-semibold'>Resident/Client</h6>
+
+					<div className='mt-4 flex space-x-4'>
+						<div>
+							<Label htmlFor="firstName">First Name</Label>
+							<Input name="firstName" id="firstName" type="text" placeholder="Bob" />
+						</div>
+						<div>
+							<Label htmlFor="lastName">Last Name</Label>
+							<Input name="lastName" id="lastName" type="text" placeholder="Barker" />
 						</div>
-						<div className="item-big">{country}</div> <br />
-						Living Area (sf)
-						<div className="item-big">{livingArea}</div>
 					</div>
+
 				</div>
 
-				<div className="basis-1/2">
-					<div className="item-title">
-						Design Temperature (°F) <br />
-						<div className="item-big">{designTemperature}</div> <br />
-						<Form
-							method="GET"
-							action="/users"
-							className="flex flex-wrap items-center justify-center gap-2"
-							onChange={e => true}
-						>
-							<div className="flex-1">
-								<Label className="item-title" htmlFor="override">
-									Override
-								</Label>
-								<Input
-									type="text"
-									name="override"
-									id="override"
-									defaultValue={designTemperatureOverride}
-									className="w-full"
-								/>
+
+				<div className='mt-9'>
+					<h6 className='text-zinc-950 text-2xl font-semibold'>Address</h6>
+
+					<div className='mt-4 flex space-x-4'>
+						<div>
+							<Label htmlFor="address">Street address</Label>
+							<Input name="address" id="address" type="text" placeholder="76 Framingham Ave." />
+							<Input name="addressTwo" id="adressTwo" type="text" placeholder="Apt 256" />
+
+							<div className='mt-4 flex'>
+								<div>
+									<Label htmlFor="city">City/Town</Label>
+									<Input name="city" id="city" type="text" placeholder="Boston" />
+								</div>
+								<div>
+									<Label htmlFor="state">State</Label>
+									<Input name="state" id="state" type="text" placeholder="MA" />
+								</div>
+								<div>
+									<Label htmlFor="zipcode">Zipcode</Label>
+									<Input name="zipcode" id="zipcode" type="text" placeholder="02856" />
+								</div>
 							</div>
-						</Form>
+						</div>
 					</div>
 				</div>
-			</div>
+
+
+				<div className='mt-9'>
+					<h6>
+						<Label className='text-zinc-950 text-2xl font-semibold' htmlFor="livingArea">
+							Living Area (sf)
+						</Label>
+					</h6>
+
+					<div className='mt-4'>
+						<div>
+							<Input name="livingArea" id="livingArea" type="number" placeholder="3000" />
+							<p className='mt-2 text-sm text-slate-500'>The home's above-grade, conditioned space</p>
+						</div>
+					</div>
+				</div>
+
+				<div>
+					<Button type='submit'>Next ={'>'}</Button>
+				</div>
+			</Form>
 		</div>
 	)
 }

heat-stack/app/routes/_heat+/Inputs1.tsx → heat-stack/app/routes/_heat+/inputs1.tsx

@@ -1,4 +1,5 @@
 import { HomeInformation } from '../../components/ui/heat/CaseSummaryComponents/HomeInformation.tsx'
+
 export default function Inputs1() {
 	return (
 		<div>

heat-stack/app/routes/homes.tsx

@@ -0,0 +1,15 @@
+import type {
+  ActionFunctionArgs,
+} from "@remix-run/node";
+import { redirect } from "@remix-run/node"
+
+export async function action({
+	request
+}: ActionFunctionArgs) {
+	const formData = await request.formData()
+
+	formData.forEach(d => console.log(d))
+
+	return redirect("/inputs1")
+}
+

heat-stack/tsconfig.json

@@ -13,6 +13,7 @@
     "noImplicitAny": true,
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
     "paths": {
       "#*": ["./*"],
       "@/icon-name": [