first day of vibe coding

2026-04-20 22:11:18 +08:00
commit 1747fc489f
38 changed files with 15267 additions and 0 deletions
@@ -0,0 +1,87 @@
+'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>
+  )
+}