Rebuild company overview analysis page

2026-03-12 20:39:30 -04:00
parent b9a1d8ba40
commit ba385586bc
29 changed files with 2040 additions and 888 deletions
--- a/components/analysis/analysis-toolbar.tsx
+++ b/components/analysis/analysis-toolbar.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import Link from 'next/link';
+import { Search } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+type AnalysisToolbarProps = {
+  tickerInput: string;
+  currentTicker: string;
+  onTickerInputChange: (value: string) => void;
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  onRefresh: () => void;
+  quickLinks: {
+    research: string;
+    filings: string;
+    financials: string;
+    graphing: string;
+  };
+  onLinkPrefetch?: () => void;
+};
+
+export function AnalysisToolbar(props: AnalysisToolbarProps) {
+  return (
+    <form
+      className="border-t border-[color:var(--line-weak)] pt-4"
+      onSubmit={props.onSubmit}
+    >
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="space-y-1">
+          <p className="panel-heading text-xs uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">Company overview</p>
+          <h2 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Inspect the latest high-level picture for {props.currentTicker}</h2>
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <Input
+            value={props.tickerInput}
+            aria-label="Overview ticker"
+            onChange={(event) => props.onTickerInputChange(event.target.value.toUpperCase())}
+            placeholder="Ticker (AAPL)"
+            className="w-full sm:min-w-[180px]"
+          />
+          <Button type="submit">
+            <Search className="size-4" />
+            Load overview
+          </Button>
+          <Button type="button" variant="secondary" onClick={props.onRefresh}>
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-2 text-sm">
+        <Link href={props.quickLinks.research} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
+          Research
+        </Link>
+        <Link href={props.quickLinks.filings} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
+          Filings
+        </Link>
+        <Link href={props.quickLinks.financials} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
+          Financials
+        </Link>
+        <Link href={props.quickLinks.graphing} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
+          Graphing
+        </Link>
+      </div>
+    </form>
+  );
+}