k
88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import type { TrumpPost } from '@/types'
|
|
import Badge from '@/components/ui/Badge'
|
|
import { formatPct } from '@/lib/utils'
|
|
|
|
interface ExpandDetailProps {
|
|
post: TrumpPost | null
|
|
}
|
|
|
|
export default function ExpandDetail({ post }: ExpandDetailProps) {
|
|
return (
|
|
<div
|
|
className={`overflow-hidden transition-all duration-300 ease-in-out ${
|
|
post ? 'max-h-[300px] opacity-100 mt-3' : 'max-h-0 opacity-0'
|
|
}`}
|
|
>
|
|
{post && (
|
|
<div className="bg-[#0a0a0a] border border-[#f97316] rounded-[10px] p-5">
|
|
<div className="flex items-start gap-4">
|
|
{/* Post content */}
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Badge variant={post.source} />
|
|
<Badge variant={post.sentiment} />
|
|
<span className="text-[11px] text-[#555555]">
|
|
{new Date(post.published_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<p className="text-[13px] text-[#e2e8f0] leading-relaxed">{post.text}</p>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="shrink-0 w-[260px]">
|
|
{/* AI Confidence */}
|
|
<div className="mb-4">
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<span className="text-[11px] uppercase tracking-wider text-[#555555]">
|
|
AI Confidence
|
|
</span>
|
|
<span className="text-[13px] font-medium text-[#818cf8]">
|
|
{post.ai_confidence}%
|
|
</span>
|
|
</div>
|
|
<div className="h-1.5 bg-[#141414] rounded-full">
|
|
<div
|
|
className="h-full bg-[#818cf8] rounded-full transition-all duration-500"
|
|
style={{ width: `${post.ai_confidence}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Price impact */}
|
|
{post.price_impact ? (
|
|
<div>
|
|
<p className="text-[11px] uppercase tracking-wider text-[#555555] mb-2">
|
|
Price Impact ({post.price_impact.asset})
|
|
</p>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{[
|
|
{ label: '5m', value: post.price_impact.m5 },
|
|
{ label: '15m', value: post.price_impact.m15 },
|
|
{ label: '1h', value: post.price_impact.m1h },
|
|
].map((item) => (
|
|
<div key={item.label} className="bg-[#050505] border border-[#141414] rounded-lg p-2 text-center">
|
|
<p className="text-[10px] text-[#555555] mb-1">{item.label}</p>
|
|
<p
|
|
className={`text-[13px] font-medium ${
|
|
item.value >= 0 ? 'text-[#4ade80]' : 'text-[#ef4444]'
|
|
}`}
|
|
>
|
|
{formatPct(item.value)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p className="text-[12px] text-[#333333]">No significant price impact detected.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|