Add bull and bear direction arrows

This commit is contained in:
2026-03-13 00:16:43 -04:00
parent a3d4c97f4e
commit 34fa020eca

View File

@@ -1,4 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import { ArrowDown, ArrowUp } from 'lucide-react';
import { Panel } from '@/components/ui/panel'; import { Panel } from '@/components/ui/panel';
import type { CompanyBullBear } from '@/lib/types'; import type { CompanyBullBear } from '@/lib/types';
@@ -29,22 +30,34 @@ export function BullBearPanel(props: BullBearPanelProps) {
) : ( ) : (
<div className="grid gap-4 lg:grid-cols-2"> <div className="grid gap-4 lg:grid-cols-2">
<section className="border-t border-[rgba(150,245,191,0.24)] pt-5"> <section className="border-t border-[rgba(150,245,191,0.24)] pt-5">
<h3 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Bull case</h3> <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"> <ul className="mt-4 space-y-3">
{props.bullBear.bull.map((item) => ( {props.bullBear.bull.map((item) => (
<li key={item} className="border-t border-[rgba(150,245,191,0.16)] pt-3 text-sm leading-6 text-[color:var(--terminal-bright)]"> <li key={item} className="border-t border-[rgba(150,245,191,0.16)] pt-3">
{item} <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> </li>
))} ))}
</ul> </ul>
</section> </section>
<section className="border-t border-[rgba(255,159,159,0.24)] pt-5"> <section className="border-t border-[rgba(255,159,159,0.24)] pt-5">
<h3 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Bear case</h3> <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"> <ul className="mt-4 space-y-3">
{props.bullBear.bear.map((item) => ( {props.bullBear.bear.map((item) => (
<li key={item} className="border-t border-[rgba(255,159,159,0.16)] pt-3 text-sm leading-6 text-[color:var(--terminal-bright)]"> <li key={item} className="border-t border-[rgba(255,159,159,0.16)] pt-3">
{item} <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> </li>
))} ))}
</ul> </ul>