Rebuild company overview analysis page

components/analysis/company-overview-card.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { ExternalLink } from "lucide-react";
+import { Panel } from "@/components/ui/panel";
+import type { CompanyAnalysis } from "@/lib/types";
+
+type CompanyOverviewCardProps = {
+  analysis: CompanyAnalysis;
+};
+
+export function CompanyOverviewCard(props: CompanyOverviewCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const description =
+    props.analysis.companyProfile.description ??
+    "No annual filing business description is available yet.";
+  const needsClamp = description.length > 320;
+
+  return (
+    <Panel className="h-full pt-2">
+      <div className="space-y-5">
+        <div>
+          <div>
+            <h2 className="text-2xl font-semibold text-[color:var(--terminal-bright)]">
+              {props.analysis.company.companyName}
+            </h2>
+            <p className="mt-1 text-xs uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
+              {props.analysis.company.ticker}
+            </p>
+            <p className="mt-3 text-sm text-[color:var(--terminal-muted)]">
+              {props.analysis.company.sector ??
+                props.analysis.companyProfile.industry ??
+                "Sector unavailable"}
+              {props.analysis.company.category
+                ? ` · ${props.analysis.company.category}`
+                : ""}
+              {props.analysis.company.cik
+                ? ` · CIK ${props.analysis.company.cik}`
+                : ""}
+            </p>
+          </div>
+        </div>
+
+        <div className="border-t border-[color:var(--line-weak)] py-4">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
+                Business description
+              </p>
+              <p className="mt-3 text-sm leading-7 text-[color:var(--terminal-bright)]">
+                {expanded || !needsClamp
+                  ? description
+                  : `${description.slice(0, 320).trimEnd()}...`}
+              </p>
+            </div>
+            {props.analysis.companyProfile.website ? (
+              <a
+                href={props.analysis.companyProfile.website}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 text-xs uppercase tracking-[0.14em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
+              >
+                Website
+                <ExternalLink className="size-3.5" />
+              </a>
+            ) : null}
+          </div>
+          {needsClamp ? (
+            <button
+              type="button"
+              onClick={() => setExpanded((current) => !current)}
+              className="mt-3 text-xs uppercase tracking-[0.14em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
+            >
+              {expanded ? "Show less" : "Read more"}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </Panel>
+  );
+}