Skip to content

Commit 7422e07

Browse files
KaloszerKaloszer
committed
Add tabs component and enhance UI; update header and main page layout with new styles and features
1 parent e12e1e5 commit 7422e07

File tree

9 files changed

+414
-247
lines changed

9 files changed

+414
-247
lines changed

‎app/calculator/page.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
'use client';
22

3-
import Header from "../components/Header"; // Adjusted import path
4-
import Calculator from "../components/calculator/Calculator"; // Adjusted import path
5-
import { WallCalculatorProvider } from "../components/calculator/context/WallCalculatorContext"; // Adjusted import path
3+
import Header from "../components/Header";
4+
import Calculator from "../components/calculator/Calculator";
5+
import { WallCalculatorProvider } from "../components/calculator/context/WallCalculatorContext";
66

7-
export default function CalculatorPage() { // Renamed function for clarity
7+
export default function CalculatorPage() {
88
return (
9-
<div className="min-h-screen flex flex-col">
9+
<div className="min-h-screen flex flex-col bg-gradient-to-b from-slate-50 to-slate-100">
1010
<Header />
11-
<WallCalculatorProvider>
12-
<Calculator />
13-
</WallCalculatorProvider>
11+
<div className="container mx-auto px-4 py-6">
12+
<div className="max-w-7xl mx-auto">
13+
<h1 className="text-3xl font-bold mb-2 text-slate-900">Wall Assembly Calculator</h1>
14+
<p className="text-slate-600 mb-6">Design and analyze your wall assembly's thermal performance</p>
15+
<WallCalculatorProvider>
16+
<Calculator />
17+
</WallCalculatorProvider>
18+
</div>
19+
</div>
1420
</div>
1521
);
1622
}

‎app/components/Header.tsx‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,36 @@
1-
import Link from "next/link"; // Add Link import
2-
import { MoveRight } from "lucide-react"
1+
import Link from "next/link";
2+
import { MoveRight, Github } from "lucide-react"
33
import { Button } from "@/components/ui/button"
44

55
export default function Header() {
66
return (
7-
<header className="py-6 px-8 flex items-center justify-between border-b">
7+
<header className="py-6 px-8 flex items-center justify-between border-b bg-white/50 backdrop-blur-sm sticky top-0 z-50">
88
<div>
9-
<h1 className="text-2xl font-bold">Wall U-Value Calculator</h1>
10-
<p className="text-sm text-muted-foreground">
11-
Calculate thermal performance of wall assemblies
12-
</p>
9+
<Link href="/" className="no-underline">
10+
<h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-sky-500 bg-clip-text text-transparent">
11+
Wall U-Value Calculator
12+
</h1>
13+
<p className="text-sm text-slate-600">
14+
Calculate thermal performance of wall assemblies
15+
</p>
16+
</Link>
1317
</div>
14-
<nav className="flex gap-4 items-center"> {/* Add nav container */}
15-
<Link href="/" legacyBehavior><a className="text-sm font-medium hover:underline underline-offset-4">Home</a></Link>
16-
<Link href="/calculator" legacyBehavior><a className="text-sm font-medium hover:underline underline-offset-4">Calculator</a></Link>
18+
<nav className="flex gap-6 items-center">
19+
<Link
20+
href="/"
21+
className="text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors"
22+
>
23+
Home
24+
</Link>
25+
<Link
26+
href="/calculator"
27+
className="text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors"
28+
>
29+
Calculator
30+
</Link>
1731
</nav>
1832
<Button
19-
variant="ghost"
33+
variant="outline"
2034
size="sm"
2135
className="gap-2"
2236
asChild
@@ -25,9 +39,10 @@ export default function Header() {
2539
href="https://github.com/Kaloszer"
2640
target="_blank"
2741
rel="noopener noreferrer"
42+
className="text-slate-600 hover:text-slate-900"
2843
>
29-
My Github
30-
<MoveRight className="h-4 w-4" />
44+
<Github className="h-4 w-4" />
45+
GitHub
3146
</a>
3247
</Button>
3348
</header>

‎app/components/calculator/Calculator.tsx‎

Lines changed: 171 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
"use client"
22

3-
import { Plus } from "lucide-react"
3+
import { Plus, Building2 } from "lucide-react"
44
import { Button } from "@/components/ui/button"
5+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
6+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
57
import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table"
6-
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
7-
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
8-
import type { DragEndEvent } from '@dnd-kit/core';
8+
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
9+
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable'
10+
import type { DragEndEvent } from '@dnd-kit/core'
911
import { MAX_LAYERS } from "./types"
1012
import { useWallCalculator } from "./context/WallCalculatorContext"
1113
import { ExampleWallSelector } from "./components/ExampleWallSelector"
@@ -15,9 +17,9 @@ import { WallVisualization } from "./WallVisualization"
1517
import { WallVisualization3D } from "./WallVisualization3D"
1618
import { calculateDewPoint } from "@/app/components/calculator/components/DewPointCalculator"
1719
import { useState } from "react"
18-
import { DewPointDisplay } from "./components/DewPointDisplay";
20+
import { DewPointDisplay } from "./components/DewPointDisplay"
1921
import { TemperatureGradientDisplay } from "./components/TemperatureGradientDisplay"
20-
import Link from "next/link";
22+
import Link from "next/link"
2123

2224
export default function Calculator() {
2325
const {
@@ -62,105 +64,170 @@ export default function Calculator() {
6264
};
6365

6466
return (
65-
<div className="container mx-auto p-4">
66-
<h1 className="text-2xl font-bold mb-4">Wall U-Value Calculator</h1>
67-
68-
<ExampleWallSelector />
69-
<StudWallSelector />
70-
71-
<Button
72-
onClick={addComponent}
73-
className="mb-4"
74-
disabled={components.length >= MAX_LAYERS}
75-
>
76-
<Plus className="mr-2 h-4 w-4" />
77-
Add Wall Component
78-
{components.length >= MAX_LAYERS && " (Max reached)"}
79-
</Button>
80-
81-
<DndContext
82-
sensors={sensors}
83-
collisionDetection={closestCenter}
84-
onDragEnd={handleDragEnd}
85-
>
86-
<Table>
87-
<TableHeader>
88-
<TableRow>
89-
<TableHead className="w-[50px]">#</TableHead>
90-
<TableHead className="w-[50px]">Order</TableHead>
91-
<TableHead className="w-[50px]">Actions</TableHead>
92-
<TableHead>Material</TableHead>
93-
<TableHead>Thickness (mm)</TableHead>
94-
<TableHead>R-Value (m²K/W)</TableHead>
95-
<TableHead>λ-Value (W/mK)</TableHead>
96-
{studWallType !== 'none' && (
97-
<TableHead>Stud Insulation</TableHead>
98-
)}
99-
</TableRow>
100-
</TableHeader>
101-
<TableBody>
102-
<SortableContext
103-
items={components.map(c => c.id)}
104-
strategy={verticalListSortingStrategy}
105-
>
106-
{components.map((component, index) => (
107-
<SortableTableRow
108-
key={component.id}
109-
component={component}
110-
index={index}
111-
removeComponent={removeComponent}
112-
updateComponent={updateComponent}
113-
toggleStuds={toggleStuds}
114-
showStuds={studWallType !== 'none'}
67+
<div className="space-y-8">
68+
<Tabs defaultValue="assembly" className="w-full">
69+
<TabsList className="grid w-full grid-cols-3 mb-8">
70+
<TabsTrigger value="assembly">Wall Assembly</TabsTrigger>
71+
<TabsTrigger value="analysis">Analysis</TabsTrigger>
72+
<TabsTrigger value="visualization">Visualization</TabsTrigger>
73+
</TabsList>
74+
75+
<TabsContent value="assembly">
76+
<Card>
77+
<CardHeader>
78+
<CardTitle>Wall Assembly Configuration</CardTitle>
79+
<CardDescription>Configure your wall layers and materials</CardDescription>
80+
</CardHeader>
81+
<CardContent>
82+
<div className="space-y-6">
83+
<div className="flex gap-4">
84+
<ExampleWallSelector />
85+
<StudWallSelector />
86+
</div>
87+
88+
<Button
89+
onClick={addComponent}
90+
variant="outline"
91+
disabled={components.length >= MAX_LAYERS}
92+
>
93+
<Plus className="mr-2 h-4 w-4" />
94+
Add Wall Component
95+
{components.length >= MAX_LAYERS && " (Max reached)"}
96+
</Button>
97+
98+
<Card>
99+
<CardContent className="p-4 overflow-x-auto">
100+
<DndContext
101+
sensors={sensors}
102+
collisionDetection={closestCenter}
103+
onDragEnd={handleDragEnd}
104+
>
105+
<Table>
106+
<TableHeader>
107+
<TableRow>
108+
<TableHead className="w-[50px]">#</TableHead>
109+
<TableHead className="w-[50px]">Order</TableHead>
110+
<TableHead className="w-[50px]">Actions</TableHead>
111+
<TableHead>Material</TableHead>
112+
<TableHead>Thickness (mm)</TableHead>
113+
<TableHead>R-Value (m²K/W)</TableHead>
114+
<TableHead>λ-Value (W/mK)</TableHead>
115+
{studWallType !== 'none' && (
116+
<TableHead>Stud Insulation</TableHead>
117+
)}
118+
</TableRow>
119+
</TableHeader>
120+
<TableBody>
121+
<SortableContext
122+
items={components.map(c => c.id)}
123+
strategy={verticalListSortingStrategy}
124+
>
125+
{components.map((component, index) => (
126+
<SortableTableRow
127+
key={component.id}
128+
component={component}
129+
index={index}
130+
removeComponent={removeComponent}
131+
updateComponent={updateComponent}
132+
toggleStuds={toggleStuds}
133+
showStuds={studWallType !== 'none'}
134+
/>
135+
))}
136+
</SortableContext>
137+
</TableBody>
138+
</Table>
139+
</DndContext>
140+
</CardContent>
141+
</Card>
142+
</div>
143+
</CardContent>
144+
</Card>
145+
</TabsContent>
146+
147+
<TabsContent value="analysis">
148+
<div className="grid gap-6">
149+
<Card>
150+
<CardHeader>
151+
<CardTitle>Dew Point Analysis</CardTitle>
152+
<CardDescription>Monitor condensation risks in your wall assembly</CardDescription>
153+
</CardHeader>
154+
<CardContent>
155+
<DewPointDisplay
156+
temperature={temperature}
157+
humidity={humidity}
158+
dewPoint={dewPoint}
159+
outsideTemp={outsideTemp}
160+
onTemperatureChange={setTemperature}
161+
onHumidityChange={setHumidity}
162+
onOutsideTempChange={setOutsideTemp}
115163
/>
116-
))}
117-
</SortableContext>
118-
</TableBody>
119-
</Table>
120-
</DndContext>
121-
122-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
123-
<WallVisualization components={components} studWallConfig={getStudConfig()} />
124-
<WallVisualization3D
125-
components={components}
126-
studWallConfig={getStudConfig()}
127-
insideTemp={temperature}
128-
outsideTemp={outsideTemp}
129-
dewPoint={dewPoint}
130-
/>
131-
</div>
132-
133-
<div className="mt-4">
134-
<DewPointDisplay
135-
temperature={temperature}
136-
humidity={humidity}
137-
dewPoint={dewPoint}
138-
outsideTemp={outsideTemp}
139-
onTemperatureChange={setTemperature}
140-
onHumidityChange={setHumidity}
141-
onOutsideTempChange={setOutsideTemp}
142-
/>
143-
144-
<TemperatureGradientDisplay
145-
components={components}
146-
insideTemp={temperature}
147-
outsideTemp={outsideTemp}
148-
dewPoint={dewPoint}
149-
insideRH={insideRH}
150-
outsideRH={outsideRH}
151-
studWallType={studWallType}
152-
/>
153-
</div>
154-
155-
<div className="mt-4">
156-
<Link
157-
href={`/houseSamplePage?wallAssembly=${encodeURIComponent(JSON.stringify(wallAssembly))}`}
158-
>
159-
<button className="px-4 py-2 bg-blue-500 text-white rounded">
160-
Generate House Sample
161-
</button>
162-
</Link>
163-
</div>
164+
</CardContent>
165+
</Card>
166+
167+
<Card>
168+
<CardHeader>
169+
<CardTitle>Temperature Gradient</CardTitle>
170+
<CardDescription>Analyze temperature distribution through wall layers</CardDescription>
171+
</CardHeader>
172+
<CardContent>
173+
<TemperatureGradientDisplay
174+
components={components}
175+
insideTemp={temperature}
176+
outsideTemp={outsideTemp}
177+
dewPoint={dewPoint}
178+
insideRH={insideRH}
179+
outsideRH={outsideRH}
180+
studWallType={studWallType}
181+
/>
182+
</CardContent>
183+
</Card>
184+
</div>
185+
</TabsContent>
186+
187+
<TabsContent value="visualization">
188+
<div className="grid gap-6">
189+
<Card>
190+
<CardHeader>
191+
<CardTitle>Wall Visualization</CardTitle>
192+
<CardDescription>2D and 3D representations of your wall assembly</CardDescription>
193+
</CardHeader>
194+
<CardContent>
195+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
196+
<div className="p-4 bg-white rounded-lg shadow-sm">
197+
<WallVisualization components={components} studWallConfig={getStudConfig()} />
198+
</div>
199+
<div className="p-4 bg-white rounded-lg shadow-sm">
200+
<WallVisualization3D
201+
components={components}
202+
studWallConfig={getStudConfig()}
203+
insideTemp={temperature}
204+
outsideTemp={outsideTemp}
205+
dewPoint={dewPoint}
206+
/>
207+
</div>
208+
</div>
209+
</CardContent>
210+
</Card>
211+
212+
<Card>
213+
<CardHeader>
214+
<CardTitle>House Sample Preview</CardTitle>
215+
<CardDescription>See your wall assembly in a complete house model</CardDescription>
216+
</CardHeader>
217+
<CardContent>
218+
<Button asChild variant="outline">
219+
<Link
220+
href={`/houseSamplePage?wallAssembly=${encodeURIComponent(JSON.stringify(wallAssembly))}`}
221+
>
222+
<Building2 className="mr-2 h-4 w-4" />
223+
Generate House Sample
224+
</Link>
225+
</Button>
226+
</CardContent>
227+
</Card>
228+
</div>
229+
</TabsContent>
230+
</Tabs>
164231
</div>
165232
);
166233
}

0 commit comments

Comments
 (0)