82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|