70 lines
3.0 KiB
TypeScript
70 lines
3.0 KiB
TypeScript
import Link from 'next/link';
|
|
import { ArrowDown, ArrowUp } from 'lucide-react';
|
|
import { Panel } from '@/components/ui/panel';
|
|
import type { CompanyBullBear } from '@/lib/types';
|
|
|
|
type BullBearPanelProps = {
|
|
bullBear: CompanyBullBear;
|
|
researchHref: string;
|
|
onLinkPrefetch?: () => void;
|
|
};
|
|
|
|
export function BullBearPanel(props: BullBearPanelProps) {
|
|
const hasContent = props.bullBear.bull.length > 0 || props.bullBear.bear.length > 0;
|
|
|
|
return (
|
|
<Panel
|
|
title="Bull vs Bear"
|
|
subtitle="The highest-level reasons investors may lean in or lean out right now."
|
|
className="pt-2"
|
|
>
|
|
{!hasContent ? (
|
|
<div className="border-t border-dashed border-[color:var(--line-weak)] py-5 text-sm text-[color:var(--terminal-muted)]">
|
|
No synthesis inputs are available yet. Add memo sections or filing context in Research to populate this debate surface.
|
|
<div className="mt-4">
|
|
<Link href={props.researchHref} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="text-xs uppercase tracking-[0.14em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
|
|
Open research workspace
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<section className="border-t border-[rgba(150,245,191,0.24)] pt-5">
|
|
<h3 className="flex items-center gap-2 text-lg font-semibold text-[color:var(--terminal-bright)]">
|
|
<ArrowUp className="size-4 text-[#4ade80]" aria-hidden="true" />
|
|
<span>Bull case</span>
|
|
</h3>
|
|
<ul className="mt-4 space-y-3">
|
|
{props.bullBear.bull.map((item) => (
|
|
<li key={item} className="border-t border-[rgba(150,245,191,0.16)] pt-3">
|
|
<div className="flex gap-3 text-sm leading-6 text-[color:var(--terminal-bright)]">
|
|
<ArrowUp className="mt-1 size-4 shrink-0 text-[#4ade80]" aria-hidden="true" />
|
|
<span>{item}</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="border-t border-[rgba(255,159,159,0.24)] pt-5">
|
|
<h3 className="flex items-center gap-2 text-lg font-semibold text-[color:var(--terminal-bright)]">
|
|
<ArrowDown className="size-4 text-[#f87171]" aria-hidden="true" />
|
|
<span>Bear case</span>
|
|
</h3>
|
|
<ul className="mt-4 space-y-3">
|
|
{props.bullBear.bear.map((item) => (
|
|
<li key={item} className="border-t border-[rgba(255,159,159,0.16)] pt-3">
|
|
<div className="flex gap-3 text-sm leading-6 text-[color:var(--terminal-bright)]">
|
|
<ArrowDown className="mt-1 size-4 shrink-0 text-[#f87171]" aria-hidden="true" />
|
|
<span>{item}</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
);
|
|
}
|