Skip to content

Commit 89a1f1d

Browse files
nicholasalanbrownnicholasalanbrown
authored
Merge pull request #32 from TextureHQ/feat/global-search
2 parents 3a211f0 + 61fb61c commit 89a1f1d

File tree

9 files changed

+1187
-512
lines changed

9 files changed

+1187
-512
lines changed

‎app/(shell)/balancing-authorities/[slug]/page.tsx‎

Lines changed: 19 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
Loader,
1313
PageLayout,
1414
Section,
15+
StatList,
16+
type StatItem,
1517
} from "@texturehq/edges";
1618
import type { FeatureCollection } from "geojson";
1719
import Link from "next/link";
@@ -133,8 +135,23 @@ export default function BADetailPage() {
133135
notFound();
134136
}
135137

138+
const overviewItems: StatItem[] = [
139+
{ id: "shortName", label: "Short Name", value: ba.shortName },
140+
{ id: "eiaCode", label: "EIA Code", value: ba.eiaCode ?? null, copyable: true },
141+
{ id: "states", label: "States", value: formatStates(ba.states) },
142+
...(iso
143+
? [{ id: "iso", label: "ISO", value: iso.shortName, href: `/explore?view=iso&slug=${iso.slug}` }]
144+
: []),
145+
{
146+
id: "website",
147+
label: "Website",
148+
value: ba.website ? safeHostname(ba.website) : null,
149+
href: ba.website ?? undefined,
150+
},
151+
];
152+
136153
return (
137-
<PageLayout>
154+
<PageLayout maxWidth={896}>
138155
<PageLayout.Header
139156
title={ba.name}
140157
breadcrumbs={[
@@ -152,50 +169,7 @@ export default function BADetailPage() {
152169
<div className="text-lg font-semibold">{ba.name}</div>
153170
<div className="text-sm text-text-muted">{ba.shortName}</div>
154171
</div>
155-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
156-
<div>
157-
<div className="text-sm text-text-muted mb-1">Short Name</div>
158-
<div className="font-medium">{ba.shortName}</div>
159-
</div>
160-
<div>
161-
<div className="text-sm text-text-muted mb-1">EIA Code</div>
162-
<div className="font-medium font-mono">{ba.eiaCode ?? "\u2014"}</div>
163-
</div>
164-
<div>
165-
<div className="text-sm text-text-muted mb-1">States</div>
166-
<div className="font-medium">{formatStates(ba.states)}</div>
167-
</div>
168-
{iso && (
169-
<div>
170-
<div className="text-sm text-text-muted mb-1">ISO</div>
171-
<div className="font-medium">
172-
<Link
173-
href={`/explore?view=iso&slug=${iso.slug}`}
174-
className="text-brand-primary hover:underline"
175-
>
176-
{iso.shortName}
177-
</Link>
178-
</div>
179-
</div>
180-
)}
181-
<div>
182-
<div className="text-sm text-text-muted mb-1">Website</div>
183-
<div className="font-medium">
184-
{ba.website ? (
185-
<a
186-
href={ba.website}
187-
target="_blank"
188-
rel="noopener noreferrer"
189-
className="text-brand-primary hover:underline"
190-
>
191-
{safeHostname(ba.website)}
192-
</a>
193-
) : (
194-
"\u2014"
195-
)}
196-
</div>
197-
</div>
198-
</div>
172+
<StatList showDividers items={overviewItems} />
199173
</Card.Content>
200174
</Card>
201175
</Section>

‎app/(shell)/ev-charging/[slug]/page.tsx‎

Lines changed: 40 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
Loader,
99
PageLayout,
1010
Section,
11+
StatList,
12+
type StatItem,
1113
} from "@texturehq/edges";
1214
import Link from "next/link";
1315
import { notFound, useParams } from "next/navigation";
@@ -48,7 +50,7 @@ export default function EVStationDetailPage() {
4850

4951
if (isLoading) {
5052
return (
51-
<PageLayout>
53+
<PageLayout maxWidth={896}>
5254
<PageLayout.Header
5355
title="EV Charging Station"
5456
breadcrumbs={[{ label: "EV Charging", href: "/ev-charging" }]}
@@ -85,8 +87,42 @@ export default function EVStationDetailPage() {
8587
`${station.streetAddress}, ${station.city}, ${station.state} ${station.zip}`
8688
)}`;
8789

90+
const overviewItems: StatItem[] = [
91+
{ id: "network", label: "Network", value: getNetworkShortName(station.evNetwork) },
92+
{
93+
id: "status",
94+
label: "Status",
95+
value: (
96+
<Badge size="sm" shape="pill" variant={getStatusBadgeVariant(station.statusCode)}>
97+
{getStatusLabel(station.statusCode)}
98+
</Badge>
99+
),
100+
},
101+
{ id: "access", label: "Access", value: getAccessLabel(station.accessCode) },
102+
{ id: "connectors", label: "Total Connectors", value: totalConnectors },
103+
];
104+
105+
const detailItems: StatItem[] = [
106+
{
107+
id: "address",
108+
label: "Address",
109+
value: `${station.streetAddress}, ${station.city}, ${station.state} ${station.zip}`,
110+
},
111+
...(station.facilityType
112+
? [{ id: "facilityType", label: "Facility Type", value: station.facilityType.replace(/_/g, " ") }]
113+
: []),
114+
{ id: "ownerType", label: "Owner Type", value: getOwnerTypeLabel(station.ownerTypeCode) },
115+
...(station.openDate ? [{ id: "openDate", label: "Opened", value: station.openDate }] : []),
116+
{
117+
id: "coordinates",
118+
label: "Coordinates",
119+
value: `${station.latitude.toFixed(4)}, ${station.longitude.toFixed(4)}`,
120+
},
121+
{ id: "stationId", label: "Station ID", value: station.id, copyable: true },
122+
];
123+
88124
return (
89-
<PageLayout>
125+
<PageLayout maxWidth={896}>
90126
<PageLayout.Header
91127
title={station.stationName}
92128
breadcrumbs={[
@@ -112,26 +148,7 @@ export default function EVStationDetailPage() {
112148
</div>
113149
</div>
114150
</div>
115-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
116-
<div>
117-
<div className="text-sm text-text-muted mb-1">Network</div>
118-
<div className="font-medium">{getNetworkShortName(station.evNetwork)}</div>
119-
</div>
120-
<div>
121-
<div className="text-sm text-text-muted mb-1">Status</div>
122-
<Badge size="sm" shape="pill" variant={getStatusBadgeVariant(station.statusCode)}>
123-
{getStatusLabel(station.statusCode)}
124-
</Badge>
125-
</div>
126-
<div>
127-
<div className="text-sm text-text-muted mb-1">Access</div>
128-
<div className="font-medium capitalize">{getAccessLabel(station.accessCode)}</div>
129-
</div>
130-
<div>
131-
<div className="text-sm text-text-muted mb-1">Total Connectors</div>
132-
<div className="font-medium">{totalConnectors}</div>
133-
</div>
134-
</div>
151+
<StatList layout="two-column" showDividers items={overviewItems} />
135152
</Card.Content>
136153
</Card>
137154
</Section>
@@ -191,43 +208,7 @@ export default function EVStationDetailPage() {
191208
<Section id="details" navLabel="Details" title="Station Details" withDivider>
192209
<Card variant="outlined">
193210
<Card.Content>
194-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
195-
<div>
196-
<div className="text-sm text-text-muted mb-1">Address</div>
197-
<div className="font-medium">
198-
{station.streetAddress}
199-
<br />
200-
{station.city}, {station.state} {station.zip}
201-
</div>
202-
</div>
203-
{station.facilityType && (
204-
<div>
205-
<div className="text-sm text-text-muted mb-1">Facility Type</div>
206-
<div className="font-medium">{station.facilityType.replace(/_/g, " ")}</div>
207-
</div>
208-
)}
209-
<div>
210-
<div className="text-sm text-text-muted mb-1">Owner Type</div>
211-
<div className="font-medium">{getOwnerTypeLabel(station.ownerTypeCode)}</div>
212-
</div>
213-
{station.openDate && (
214-
<div>
215-
<div className="text-sm text-text-muted mb-1">Opened</div>
216-
<div className="font-medium">{station.openDate}</div>
217-
</div>
218-
)}
219-
<div>
220-
<div className="text-sm text-text-muted mb-1">Coordinates</div>
221-
<div className="font-medium font-mono text-sm">
222-
{station.latitude.toFixed(4)}, {station.longitude.toFixed(4)}
223-
</div>
224-
</div>
225-
<div>
226-
<div className="text-sm text-text-muted mb-1">Station ID</div>
227-
<div className="font-medium font-mono">{station.id}</div>
228-
</div>
229-
</div>
230-
211+
<StatList layout="two-column" showDividers items={detailItems} />
231212
<div className="mt-6">
232213
<a
233214
href={googleMapsUrl}

0 commit comments

Comments
 (0)