/* global React, PageShell, AGGIE_CATALOG, LucideIcon */ /* * AggieEventsForms.jsx — Batch 16: * Calendar / event widgets * Inline feed group * Example forms * Code Maroon banner * * Code Maroon comes straight from TuxCodeMaroon.vue in the repo: * three severities (alert / warning / info) with hard-coded colors * (#b3261e / #c47800 / #15457e), siren / triangle-alert / info icon, * title + message + details link + optional dismiss button. Sticky * variant. Pulses by default. Hard-coded — does NOT honor style * variants or dark mode. * * Helper prefix: EV (Events). */ // ════════════════════════════════════════════════════════════════════════ // Shared helpers (EV prefix) // ════════════════════════════════════════════════════════════════════════ function EVBox({ dark = false, label, padded = true, children }) { return (
{label} on {dark ? "dark" : "light"}
{children}
); } function EVSectionLabel({ children }) { return (
{children}
); } function EVSpecRow({ children }) { return (
{children}
); } function EVSpec({ label, value, note }) { return (
{label}
{value}
{note &&
{note}
}
); } function EVIntro({ children }) { return (
{children}
); } // ════════════════════════════════════════════════════════════════════════ // CALENDAR / EVENT WIDGETS // ════════════════════════════════════════════════════════════════════════ const EV_EVENTS = [ { date: "May 14", dow: "Thu", year: "2026", title: "Texas Connected & Automated Vehicles Workshop", time: "9:00 a.m. – 4:30 p.m. CDT", venue: "TTI Headquarters · Bryan-College Station", tag: "Workshop" }, { date: "May 22", dow: "Fri", year: "2026", title: "Roadside Safety Annual Symposium", time: "8:30 a.m. – 5:00 p.m. CDT", venue: "Rellis Campus · Building 7029", tag: "Symposium" }, { date: "Jun 03–05", dow: "Wed", year: "2026", title: "TRB Visualization in Transportation", time: "All day", venue: "Austin Convention Center", tag: "Conference" }, { date: "Jun 18", dow: "Thu", year: "2026", title: "Pavement Maintenance Field Workshop", time: "10:00 a.m. – 2:00 p.m. CDT", venue: "Riverside Annex · Field Lab 4", tag: "Workshop" }, ]; function EVDateBlock({ date, dow, year }) { // Date stack — day-of-week eyebrow, big maroon date, year sub. const [m, d] = date.split(" "); return (
{dow}
{m}
{d}
{year}
); } function EVEventCard({ ev }) { return (
{ev.tag}
{ev.title}
{ev.time} {ev.venue}
); } function EVMiniCal({ month = "May", year = "2026", highlight = [14, 22], today = 12 }) { // 7-col calendar grid. May 2026 starts on Friday. // For mock purposes we hard-code first day-of-week and length. const firstDayOfWeek = 5; // 0=Sun const daysInMonth = 31; const cells = []; for (let i = 0; i < firstDayOfWeek; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(d); while (cells.length % 7 !== 0) cells.push(null); const dows = ["S","M","T","W","T","F","S"]; return (
{month} {year}
{dows.map((d, i) => (
{d}
))}
{cells.map((d, i) => { if (d === null) return
; const isHighlight = highlight.includes(d); const isToday = d === today; return ( ); })}
Event Today
); } function EVAgendaRow({ ev, last }) { return (
{ev.dow}
{ev.date}
{ev.title}
{ev.time} · {ev.venue}
); } const EV_AGENDA_ROW_DUMMY = "agenda"; const drBtnPrimaryEv = { padding: "7px 14px", background: "var(--brand-primary)", border: "none", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-body-bold)", fontWeight: 700, fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: "0.09em", color: "white", cursor: "pointer" }; const drBtnGhostEv = { padding: "7px 14px", background: "transparent", border: "1px solid var(--surface-border)", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-body-bold)", fontWeight: 700, fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: "0.09em", color: "var(--text-primary)", cursor: "pointer" }; function CalendarEventPage() { const item = (window.AGGIE_CATALOG || []).find(c => c.id === "calendar-event"); return ( Calendar / event widgets — event surfaces in three densities. The full event card stacks a date block (left) against a title + tag + time + venue (right). The mini-cal widget pairs a 7-column month grid with a compact agenda list — built for sidebars. The agenda list packs many upcoming events into a stacked rhythm without imagery. Event card — full width
{EV_EVENTS.map((ev, i) => )}
Mini-cal + agenda — sidebar widget
upcoming

May–June 2026

{EV_EVENTS.map((ev, i) => ( ))}
View full calendar
Dark — event card on maroon
{EV_EVENTS.slice(0, 2).map((ev, i) => (
{ev.dow}
{ev.date.split(" ")[0]}
{ev.date.split(" ")[1]}
{ev.year}
{ev.tag}
{ev.title}
{ev.time} {ev.venue}
))}
Refit · Range selector for calendar views (Batch H)
Range May 1 → May 31, 2026 31 days
{["Month", "Week", "Day", "Agenda"].map((v, i) => ( ))}
Use this header above the month grid or agenda list. Clicking the range pill opens the date-range-picker popover; the segmented control switches between Month / Week / Day / Agenda views.
Refit · Event detail popover (Batch H)
{/* Color band */}
Symposium
Connected freight corridor · annual review
Wed, May 27, 2026 · 9:00 AM – 4:30 PM CDT TTI Headquarters · Bryan, TX · Carter Auditorium Open to TTI staff + invited partners · 42 RSVPs e.preventDefault()} style={{ color: "var(--brand-primary)", fontFamily: "var(--font-mono)", fontSize: "0.78rem" }}>cfc-symposium-2026.tti.tamu.edu

Annual review of TTI's connected-freight-corridor research portfolio. Six 45-min sessions, two breakout panels, closing keynote by Dr. M. Reyes on the I-35 Capital Express findings.

); } // ════════════════════════════════════════════════════════════════════════ // INLINE FEED GROUP // ════════════════════════════════════════════════════════════════════════ function EVFeedItem({ source, sourceIcon, ts, body, accent, dark = false }) { return (
{source} {ts}
{body}
); } function InlineFeedGroupPage() { const item = (window.AGGIE_CATALOG || []).find(c => c.id === "inline-feed-group"); const FEED_ITEMS = [ { source: "Press release", sourceIcon: "newspaper", ts: "2 hours ago", body: "TTI awarded $4.2M FHWA contract to study automated truck-platooning impacts on Texas freight corridors. The four-year program begins this fall.", accent: "var(--brand-primary)", }, { source: "Researcher post", sourceIcon: "user", ts: "Yesterday", body: "Dr. Marcus Caldwell on the Center for Air Quality blog — 'Why we're rethinking near-roadway PM 2.5 monitoring after the 2024 ozone-season data.'", accent: "#15457e", }, { source: "Media mention", sourceIcon: "tv", ts: "Mar 28", body: "TTI's connected-vehicle testbed featured in The Texas Tribune's coverage of the I-35 corridor modernization plan.", accent: "#c47800", }, { source: "Publication", sourceIcon: "file-text", ts: "Mar 22", body: "New report: 'Pavement performance under extreme heat — a 5-year longitudinal study across the El Paso district.' Open access in the TTI repository.", accent: "var(--brand-primary)", }, ]; return ( Inline feed group — embeddable activity stream that aggregates from multiple sources (press releases, researcher posts, media mentions, publications). Each row carries a small source-tag chip + timestamp + body. The block is meant to live inside another page, not stand alone — so it ships its own heading + signature rule, then a tight stacked list. Light — 4 sources mixed
in the news

Latest from TTI

{FEED_ITEMS.map((it, i) => )}
See all activity
Single-source — only press releases
press

Recent announcements

{FEED_ITEMS.filter(f => f.source === "Press release").map((it, i) => )} {[ { source: "Press release", sourceIcon: "newspaper", ts: "Mar 14", body: "TTI partners with Texas Tech and UTSA on a new $11.6M USDOT pooled-fund study of multimodal freight resilience.", accent: "var(--brand-primary)" }, { source: "Press release", sourceIcon: "newspaper", ts: "Mar 02", body: "Center for Transportation Safety releases the 2025 Texas Crash Cost Estimate — economic loss methodology now in v3.0.", accent: "var(--brand-primary)" }, ].map((it, i) => )}
Dark — on maroon
in the news

Latest from TTI

{FEED_ITEMS.slice(0, 3).map((it, i) => )}
); } // ════════════════════════════════════════════════════════════════════════ // EXAMPLE FORMS // ════════════════════════════════════════════════════════════════════════ function EVField({ label, required, hint, error, children }) { return ( ); } const EV_INPUT_STYLE = { width: "100%", padding: "10px 12px", border: "1px solid var(--surface-border)", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-body)", fontSize: "0.92rem", background: "var(--surface-page)", color: "var(--text-primary)", boxSizing: "border-box", }; const EV_INPUT_ERROR_STYLE = { ...EV_INPUT_STYLE, borderColor: "#b3261e", borderWidth: 2, padding: "9px 11px", }; function ExampleFormsPage() { const item = (window.AGGIE_CATALOG || []).find(c => c.id === "example-forms"); return ( Example forms — three reference layouts for the most common institutional forms: Contact (3 fields, single column), Event registration (8 fields, two-column grid for personal + meal/access), and RFP submission (long-form with file upload). All share the same field atom — uppercase label + required asterisk + input + hint or error. Buttons stay Work Sans 700 regardless of style variant. Contact form — single column