feat: Add trade execution and screenshot gallery to AI analysis
- Create TradeModal component for executing trades with entry, TP, SL - Add ScreenshotGallery component with click-to-enlarge functionality - Integrate trade buttons in both single and multi-timeframe analysis results - Add screenshot gallery that displays captured TradingView charts - Parse analysis data to pre-fill trade modal with AI recommendations - Support trade execution via /api/trading endpoint - Add visual indicators and smooth transitions for better UX Trade button features: - Pre-filled entry, take profit, and stop loss from AI analysis - Configurable position size and leverage - Real-time validation and error handling Screenshot gallery features: - Grid layout with hover effects - Click to enlarge in full-screen modal - Support for both single and multi-timeframe results - Chart information overlay with timeframe labels
This commit is contained in:
mindesbunister
134
components/ScreenshotGallery.tsx
Normal file
134
components/ScreenshotGallery.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
"use client"
|
||||
import React from 'react'
|
||||
|
||||
interface ScreenshotGalleryProps {
|
||||
screenshots: string[]
|
||||
symbol: string
|
||||
timeframes: string[]
|
||||
enlargedImage: string | null
|
||||
onImageClick: (src: string) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default function ScreenshotGallery({
|
||||
screenshots,
|
||||
symbol,
|
||||
timeframes,
|
||||
enlargedImage,
|
||||
onImageClick,
|
||||
onClose
|
||||
}: ScreenshotGalleryProps) {
|
||||
if (screenshots.length === 0) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Gallery Grid */}
|
||||
<div className="mt-6 p-4 bg-gradient-to-br from-purple-500/10 to-indigo-500/10 border border-purple-500/30 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h4 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="w-6 h-6 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center mr-2 text-sm">
|
||||
📸
|
||||
</span>
|
||||
Chart Screenshots
|
||||
</h4>
|
||||
<div className="text-xs text-gray-400">
|
||||
{screenshots.length} captured • Click to enlarge
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{screenshots.map((screenshot, index) => {
|
||||
const filename = screenshot.split('/').pop() || ''
|
||||
const timeframe = timeframes[index] || 'Unknown'
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all cursor-pointer transform hover:scale-[1.02]"
|
||||
onClick={() => onImageClick(screenshot)}
|
||||
>
|
||||
{/* Preview Image */}
|
||||
<div className="aspect-video bg-gray-800 flex items-center justify-center relative">
|
||||
<img
|
||||
src={screenshot}
|
||||
alt={`${symbol} - ${timeframe} chart`}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement
|
||||
target.style.display = 'none'
|
||||
target.nextElementSibling?.classList.remove('hidden')
|
||||
}}
|
||||
/>
|
||||
<div className="hidden absolute inset-0 flex items-center justify-center text-gray-400">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">📊</div>
|
||||
<div className="text-sm">Chart Preview</div>
|
||||
<div className="text-xs text-gray-500">{filename}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center">
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="w-12 h-12 bg-purple-500/80 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-xl">🔍</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Info */}
|
||||
<div className="p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-white">{symbol}</div>
|
||||
<div className="text-xs text-purple-300">{timeframe} Timeframe</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
Click to view
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enlarged Image Modal */}
|
||||
{enlargedImage && (
|
||||
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||
<div className="relative max-w-6xl max-h-[90vh] w-full">
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white z-10 transition-colors"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
{/* Image */}
|
||||
<img
|
||||
src={enlargedImage}
|
||||
alt="Enlarged chart"
|
||||
className="w-full h-full object-contain rounded-lg border border-gray-600"
|
||||
/>
|
||||
|
||||
{/* Image Info Overlay */}
|
||||
<div className="absolute bottom-4 left-4 right-4 bg-black/70 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-white font-medium">{symbol} Chart Analysis</div>
|
||||
<div className="text-gray-300 text-sm">AI analyzed screenshot • High resolution view</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
ESC to close
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user