Use triangle markers for bull and bear items
This commit is contained in:
@@ -1,5 +1,4 @@
|
|||||||
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';
|
||||||
|
|
||||||
@@ -30,15 +29,15 @@ 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="flex items-center gap-2 text-lg font-semibold text-[color:var(--terminal-bright)]">
|
<h3 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Bull case</h3>
|
||||||
<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">
|
<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)]">
|
<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
|
||||||
|
className="mt-1.5 h-0 w-0 shrink-0 border-x-[5px] border-x-transparent border-b-[8px] border-b-[#4ade80]"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
<span>{item}</span>
|
<span>{item}</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@@ -47,15 +46,15 @@ export function BullBearPanel(props: BullBearPanelProps) {
|
|||||||
</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="flex items-center gap-2 text-lg font-semibold text-[color:var(--terminal-bright)]">
|
<h3 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Bear case</h3>
|
||||||
<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">
|
<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)]">
|
<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
|
||||||
|
className="mt-1.5 h-0 w-0 shrink-0 border-x-[5px] border-x-transparent border-t-[8px] border-t-[#f87171]"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
<span>{item}</span>
|
<span>{item}</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
Reference in New Issue
Block a user