root
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
|
||
export function MacroReportGenerator() {
|
||
const [generating, setGenerating] = useState(false)
|
||
const [report, setReport] = useState('')
|
||
|
||
const prompt = `You are a professional macro analyst and front‑end designer building a single‑page HTML report for macro traders and investors. Create one self‑contained HTML file.
|
||
|
||
DESIGN & UX CONSTRAINTS:
|
||
- Use only native HTML + CSS + minimal inline JS
|
||
- No external fonts (use system-stack)
|
||
- Color scheme: dark background (#0f0f12), light gray text (#e0e0e0), blue/orange accents
|
||
- Large, readable, editorial-style typography
|
||
- All charts/gauges CSS-driven
|
||
- Ticker bar: smooth continuous loop
|
||
- Reading progress bar: thin bar at top
|
||
|
||
REPORT STRUCTURE:
|
||
|
||
1. Hero + LIVE DATA BAR with key indicators (S&P 500, Initial Claims, Unemployment, Fed Funds, M2, Bitcoin, ETH, Gold)
|
||
|
||
2. Header: "THE MACROVERSE — Late Business Cycle Analysis" with date and assessment
|
||
|
||
3. Scrolling ticker bar with macro text
|
||
|
||
4. Reading progress bar at top
|
||
|
||
5. Core sections:
|
||
- 01: Cycle Indicator Formula
|
||
- 02: Where We Are in the Cycle (timeline)
|
||
- 03: Negative Feedback Loop (5-step)
|
||
- 04: Risk Cascade (tiers)
|
||
- 05: Midterm Year Window
|
||
- 06: Recession Arrives
|
||
- 07: Wall Street Views
|
||
- 08: Positioning
|
||
|
||
6. Live Macro Indicators Dashboard (4-6 boxes)
|
||
|
||
7. Cycle Event Timeline
|
||
|
||
8. Key Watch Levels
|
||
|
||
9. Footer with sources and disclaimer
|
||
|
||
OUTPUT: One complete HTML file, copy-paste ready.`
|
||
|
||
const generateReport = async () => {
|
||
setGenerating(true)
|
||
// This would call an LLM - for now show placeholder
|
||
setReport('Report generation would use MiniMax or Claude API')
|
||
setGenerating(false)
|
||
}
|
||
|
||
return (
|
||
<div className="border border-white/20 rounded-lg p-4 bg-white/5">
|
||
<h3 className="text-lg font-bold mb-4">📊 Macro Report Generator</h3>
|
||
|
||
<p className="text-white/70 mb-4">
|
||
Generate professional macro analysis reports like "The Macroverse" — self-contained HTML files with dark design, live data, and animated charts.
|
||
</p>
|
||
|
||
<button
|
||
onClick={generateReport}
|
||
disabled={generating}
|
||
className="px-4 py-2 bg-brand-pink rounded-lg text-white font-medium hover:bg-brand-pink/80 disabled:opacity-50"
|
||
>
|
||
{generating ? 'Generating...' : 'Generate Report'}
|
||
</button>
|
||
|
||
{report && (
|
||
<div className="mt-4 p-3 bg-white/5 rounded-lg">
|
||
<p className="text-sm text-white/70">{report}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|