From 34fa020eca72c38ffab4d2fd5a7d5e7ef11ac33f Mon Sep 17 00:00:00 2001
From: francy51 <francesco12382@gmail.com>
Date: Fri, 13 Mar 2026 00:16:43 -0400
Subject: [PATCH] Add bull and bear direction arrows

---
 components/analysis/bull-bear-panel.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/components/analysis/bull-bear-panel.tsx b/components/analysis/bull-bear-panel.tsx
index 1e56aba..17756df 100644
--- a/components/analysis/bull-bear-panel.tsx
+++ b/components/analysis/bull-bear-panel.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { ArrowDown, ArrowUp } from 'lucide-react';
 import { Panel } from '@/components/ui/panel';
 import type { CompanyBullBear } from '@/lib/types';
 
@@ -29,22 +30,34 @@ export function BullBearPanel(props: BullBearPanelProps) {
       ) : (
         <div className="grid gap-4 lg:grid-cols-2">
           <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">
               {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)]">
-                  {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="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">
               {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)]">
-                  {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>