Skip to content

Commit a877095

Browse files
alexzedimalexzedim
committed
refactor(components): update snapshot briefs and live metrics styling with orange theme
1 parent 2be0954 commit a877095

File tree

2 files changed

+156
-136
lines changed

2 files changed

+156
-136
lines changed

‎components/home/live-metrics.tsx‎

Lines changed: 54 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -63,55 +63,64 @@ export function LiveMetrics({
6363
</span>
6464
</div>
6565
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
66-
{metricSnapshots.map(({ category, title, snapshot, metricType }) => {
67-
const snapshotDate = formatSnapshotDate(snapshot);
68-
const entries = getSnapshotEntries(snapshot);
66+
{metricSnapshots.map(
67+
({ category, title, snapshot, metricType }, index) => {
68+
const snapshotDate = formatSnapshotDate(snapshot);
69+
const entries = getSnapshotEntries(snapshot);
70+
const orangeColor = "rgb(249, 115, 22)";
6971

70-
return (
71-
<div
72-
key={buildSnapshotKey(category, metricType)}
73-
className="card-surface p-6 flex flex-col gap-4"
74-
>
75-
<div>
76-
<h3 className="text-xl font-semibold">{title}</h3>
77-
<p className="text-muted mt-2 text-sm">
78-
{metricCardHasError
79-
? "Metric feed unavailable."
80-
: snapshotDate
81-
? `Snapshot @ ${snapshotDate}`
82-
: metricSnapshotLoading
83-
? "Loading snapshot…"
84-
: "No snapshot reported yet."}
85-
</p>
86-
</div>
87-
<div className="rounded-xl border border-content4/20 bg-content2/40 p-4 backdrop-blur">
88-
{entries.length ? (
89-
<dl className="space-y-2">
90-
{entries.map(([entryKey, entryValue]) => (
91-
<div
92-
key={entryKey}
93-
className="flex items-center justify-between gap-4 text-sm"
94-
>
95-
<dt className="text-foreground/60">{entryKey}</dt>
96-
<dd className="font-mono text-foreground text-right">
97-
{formatEntryValue(entryValue)}
98-
</dd>
99-
</div>
100-
))}
101-
</dl>
102-
) : (
103-
<p className="text-muted text-sm">
72+
return (
73+
<div
74+
key={buildSnapshotKey(category, metricType)}
75+
className="card-surface p-6 flex flex-col gap-4 border-l-4 transition-colors duration-200"
76+
style={{ borderLeftColor: orangeColor }}
77+
>
78+
<div>
79+
<h3
80+
className="text-xl font-semibold"
81+
style={{ color: orangeColor }}
82+
>
83+
{title}
84+
</h3>
85+
<p className="text-muted mt-2 text-sm">
10486
{metricCardHasError
105-
? "Unable to read metric values."
106-
: metricSnapshotLoading
107-
? "Loading metric values…"
108-
: "Metrics responded without value payload."}
87+
? "Metric feed unavailable."
88+
: snapshotDate
89+
? `Snapshot @ ${snapshotDate}`
90+
: metricSnapshotLoading
91+
? "Loading snapshot…"
92+
: "No snapshot reported yet."}
10993
</p>
110-
)}
94+
</div>
95+
<div className="rounded-xl border border-content4/20 bg-content2/40 p-4 backdrop-blur">
96+
{entries.length ? (
97+
<dl className="space-y-2">
98+
{entries.map(([entryKey, entryValue]) => (
99+
<div
100+
key={entryKey}
101+
className="flex items-center justify-between gap-4 text-sm"
102+
>
103+
<dt className="text-foreground/60">{entryKey}</dt>
104+
<dd className="font-mono text-foreground text-right">
105+
{formatEntryValue(entryValue)}
106+
</dd>
107+
</div>
108+
))}
109+
</dl>
110+
) : (
111+
<p className="text-muted text-sm">
112+
{metricCardHasError
113+
? "Unable to read metric values."
114+
: metricSnapshotLoading
115+
? "Loading metric values…"
116+
: "Metrics responded without value payload."}
117+
</p>
118+
)}
119+
</div>
111120
</div>
112-
</div>
113-
);
114-
})}
121+
);
122+
}
123+
)}
115124
</div>
116125
</section>
117126
);

‎components/home/snapshot-briefs.tsx‎

Lines changed: 102 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import type { SnapshotHighlightGroup } from "@/lib/types/snapshot-metrics";
4+
45
import {
56
buildSnapshotKey,
67
formatSnapshotDate,
@@ -38,100 +39,110 @@ export function SnapshotBriefs({
3839
</p>
3940
</div>
4041
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
41-
{snapshotHighlightGroups.map((group) => (
42-
<article
43-
key={group.title}
44-
className="rounded-2xl border border-content4/20 bg-content2/40 p-4 backdrop-blur"
45-
>
46-
<header>
47-
<h4 className="text-lg font-semibold">{group.title}</h4>
48-
<p className="text-muted mt-1 text-xs leading-relaxed">
49-
{group.disclaimer}
50-
</p>
51-
</header>
52-
<section className="mt-4 space-y-3">
53-
{group.metrics.map((metric) => {
54-
const snapshotKey = buildSnapshotKey(
55-
metric.category,
56-
metric.metricType
57-
);
58-
const entries = getSnapshotEntries(
59-
metric.snapshot ?? null,
60-
metric.valueLimit
61-
);
62-
const displayEntries =
63-
metric.sort === "alpha"
64-
? [...entries].sort((a, b) =>
65-
a[0].localeCompare(b[0])
66-
)
67-
: entries;
68-
const snapshotDate = formatSnapshotDate(
69-
metric.snapshot ?? null
70-
);
42+
{snapshotHighlightGroups.map((group, groupIndex) => {
43+
const groupBorderColors = [
44+
"rgb(249, 115, 22)",
45+
"rgb(249, 115, 22)",
46+
"rgb(249, 115, 22)",
47+
"rgb(249, 115, 22)",
48+
];
49+
const groupBorderColor =
50+
groupBorderColors[groupIndex % groupBorderColors.length];
7151

72-
return (
73-
<div
74-
key={snapshotKey}
75-
className="rounded-xl border border-content4/20 bg-content1/40 p-3"
76-
>
77-
<div className="flex items-center justify-between gap-2 text-[0.65rem] uppercase tracking-wide text-foreground/50">
78-
<span>{metric.label}</span>
79-
<span
80-
className="text-foreground/80"
81-
aria-label={`${metric.label} snapshot date`}
82-
>
83-
{metricCardHasError
84-
? "Unavailable"
85-
: snapshotDate
86-
? snapshotDate
87-
: metricSnapshotLoading
88-
? "Loading…"
89-
: "No snapshot"}
90-
</span>
91-
</div>
92-
{displayEntries.length ? (
93-
<dl className="mt-2 space-y-1 text-sm">
94-
{displayEntries.map(([entryKey, entryValue]) => {
95-
const entryColor =
96-
metric.getEntryColor?.(entryKey);
52+
return (
53+
<article
54+
key={group.title}
55+
className="rounded-2xl border border-content4/20 bg-content2/40 p-4 backdrop-blur border-l-4 transition-colors duration-200"
56+
style={{ borderLeftColor: groupBorderColor }}
57+
>
58+
<header>
59+
<h4 className="text-lg font-semibold">{group.title}</h4>
60+
<p className="text-muted mt-1 text-xs leading-relaxed">
61+
{group.disclaimer}
62+
</p>
63+
</header>
64+
<section className="mt-4 space-y-3">
65+
{group.metrics.map((metric, metricIndex) => {
66+
const snapshotKey = buildSnapshotKey(
67+
metric.category,
68+
metric.metricType
69+
);
70+
const entries = getSnapshotEntries(
71+
metric.snapshot ?? null,
72+
metric.valueLimit
73+
);
74+
const displayEntries =
75+
metric.sort === "alpha"
76+
? [...entries].sort((a, b) => a[0].localeCompare(b[0]))
77+
: entries;
78+
const snapshotDate = formatSnapshotDate(
79+
metric.snapshot ?? null
80+
);
9781

98-
return (
99-
<div
100-
key={entryKey}
101-
className="flex items-center justify-between gap-3 text-sm"
102-
>
103-
<dt
104-
className="text-foreground/60 text-xs"
105-
style={
106-
entryColor
107-
? { color: entryColor }
108-
: undefined
109-
}
82+
return (
83+
<div
84+
key={snapshotKey}
85+
className="rounded-xl border border-content4/20 p-3 bg-content1/40 border-l-4 transition-colors duration-200"
86+
>
87+
<div className="flex items-center justify-between gap-2 text-[0.65rem] uppercase tracking-wide text-foreground/50">
88+
<span>{metric.label}</span>
89+
<span
90+
aria-label={`${metric.label} snapshot date`}
91+
className="text-foreground/80"
92+
>
93+
{metricCardHasError
94+
? "Unavailable"
95+
: snapshotDate
96+
? snapshotDate
97+
: metricSnapshotLoading
98+
? "Loading…"
99+
: "No snapshot"}
100+
</span>
101+
</div>
102+
{displayEntries.length ? (
103+
<dl className="mt-2 space-y-1 text-sm">
104+
{displayEntries.map(([entryKey, entryValue]) => {
105+
const entryColor =
106+
metric.getEntryColor?.(entryKey);
107+
108+
return (
109+
<div
110+
key={entryKey}
111+
className="flex items-center justify-between gap-3 text-sm"
110112
>
111-
{entryKey}
112-
</dt>
113-
<dd className="font-mono text-right">
114-
{formatEntryValue(entryValue)}
115-
</dd>
116-
</div>
117-
);
118-
})}
119-
</dl>
120-
) : (
121-
<p className="mt-2 text-muted text-xs">
122-
{metricCardHasError
123-
? "Unable to read metric values."
124-
: metricSnapshotLoading
125-
? "Loading metric values…"
126-
: "Metrics responded without value payload."}
127-
</p>
128-
)}
129-
</div>
130-
);
131-
})}
132-
</section>
133-
</article>
134-
))}
113+
<dt
114+
className="text-foreground/60 text-xs"
115+
style={
116+
entryColor
117+
? { color: entryColor }
118+
: undefined
119+
}
120+
>
121+
{entryKey}
122+
</dt>
123+
<dd className="font-mono text-right">
124+
{formatEntryValue(entryValue)}
125+
</dd>
126+
</div>
127+
);
128+
})}
129+
</dl>
130+
) : (
131+
<p className="mt-2 text-muted text-xs">
132+
{metricCardHasError
133+
? "Unable to read metric values."
134+
: metricSnapshotLoading
135+
? "Loading metric values…"
136+
: "Metrics responded without value payload."}
137+
</p>
138+
)}
139+
</div>
140+
);
141+
})}
142+
</section>
143+
</article>
144+
);
145+
})}
135146
</div>
136147
</div>
137148
</section>

0 commit comments

Comments
 (0)