4ae9c38ad8
- Implemented trailing stop logic in Position Manager for remaining position after TP2 - Added new ActiveTrade fields: tp2Hit, trailingStopActive, peakPrice - New config settings: useTrailingStop, trailingStopPercent, trailingStopActivation - Added trailing stop UI section in settings page with explanations - Fixed env file parsing regex to support numbers in variable names (A-Z0-9_) - Settings now persist correctly across container restarts - Added back arrow navigation on settings page - Updated all API endpoints and test files with new fields - Trailing stop activates when runner reaches configured profit level - SL trails below peak price by configurable percentage
541 lines
21 KiB
TypeScript
541 lines
21 KiB
TypeScript
/**
|
||
* Trading Bot Settings UI
|
||
*
|
||
* Beautiful interface for managing trading parameters
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { useState, useEffect } from 'react'
|
||
|
||
interface TradingSettings {
|
||
MAX_POSITION_SIZE_USD: number
|
||
LEVERAGE: number
|
||
STOP_LOSS_PERCENT: number
|
||
TAKE_PROFIT_1_PERCENT: number
|
||
TAKE_PROFIT_1_SIZE_PERCENT: number
|
||
TAKE_PROFIT_2_PERCENT: number
|
||
TAKE_PROFIT_2_SIZE_PERCENT: number
|
||
EMERGENCY_STOP_PERCENT: number
|
||
BREAKEVEN_TRIGGER_PERCENT: number
|
||
PROFIT_LOCK_TRIGGER_PERCENT: number
|
||
PROFIT_LOCK_PERCENT: number
|
||
USE_TRAILING_STOP: boolean
|
||
TRAILING_STOP_PERCENT: number
|
||
TRAILING_STOP_ACTIVATION: number
|
||
MAX_DAILY_DRAWDOWN: number
|
||
MAX_TRADES_PER_HOUR: number
|
||
MIN_TIME_BETWEEN_TRADES: number
|
||
SLIPPAGE_TOLERANCE: number
|
||
DRY_RUN: boolean
|
||
}
|
||
|
||
export default function SettingsPage() {
|
||
const [settings, setSettings] = useState<TradingSettings | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [saving, setSaving] = useState(false)
|
||
const [restarting, setRestarting] = useState(false)
|
||
const [testing, setTesting] = useState(false)
|
||
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null)
|
||
|
||
useEffect(() => {
|
||
loadSettings()
|
||
}, [])
|
||
|
||
const loadSettings = async () => {
|
||
try {
|
||
const response = await fetch('/api/settings')
|
||
const data = await response.json()
|
||
setSettings(data)
|
||
setLoading(false)
|
||
} catch (error) {
|
||
setMessage({ type: 'error', text: 'Failed to load settings' })
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const saveSettings = async () => {
|
||
setSaving(true)
|
||
setMessage(null)
|
||
try {
|
||
const response = await fetch('/api/settings', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(settings),
|
||
})
|
||
|
||
if (response.ok) {
|
||
setMessage({ type: 'success', text: 'Settings saved! Click "Restart Bot" to apply changes.' })
|
||
} else {
|
||
setMessage({ type: 'error', text: 'Failed to save settings' })
|
||
}
|
||
} catch (error) {
|
||
setMessage({ type: 'error', text: 'Failed to save settings' })
|
||
}
|
||
setSaving(false)
|
||
}
|
||
|
||
const restartBot = async () => {
|
||
setRestarting(true)
|
||
setMessage(null)
|
||
try {
|
||
const response = await fetch('/api/restart', {
|
||
method: 'POST',
|
||
})
|
||
|
||
if (response.ok) {
|
||
setMessage({ type: 'success', text: 'Bot is restarting... Settings will be applied in ~10 seconds.' })
|
||
} else {
|
||
setMessage({ type: 'error', text: 'Failed to restart bot. Please restart manually with: docker restart trading-bot' })
|
||
}
|
||
} catch (error) {
|
||
setMessage({ type: 'error', text: 'Failed to restart bot. Please restart manually with: docker restart trading-bot' })
|
||
}
|
||
setRestarting(false)
|
||
}
|
||
|
||
const testTrade = async (direction: 'long' | 'short') => {
|
||
if (!confirm(`⚠️ This will execute a REAL ${direction.toUpperCase()} trade with current settings. Continue?`)) {
|
||
return
|
||
}
|
||
|
||
setTesting(true)
|
||
setMessage(null)
|
||
try {
|
||
const response = await fetch('/api/trading/test', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
symbol: 'SOLUSDT',
|
||
direction: direction,
|
||
}),
|
||
})
|
||
|
||
const data = await response.json()
|
||
|
||
if (data.success) {
|
||
const dualStopsMsg = data.useDualStops
|
||
? `Dual stops: Soft $${data.softStopPrice?.toFixed(4)} | Hard $${data.hardStopPrice?.toFixed(4)}`
|
||
: `SL: $${data.stopLoss?.toFixed(4)}`
|
||
setMessage({
|
||
type: 'success',
|
||
text: `✅ ${direction.toUpperCase()} test trade executed! Size: $${data.positionSize?.toFixed(2)} | Entry: $${data.entryPrice?.toFixed(4)} | ${dualStopsMsg} | TX: ${data.positionId?.substring(0, 8)}...`
|
||
})
|
||
} else {
|
||
setMessage({ type: 'error', text: `Failed: ${data.error || data.message}` })
|
||
}
|
||
} catch (error) {
|
||
setMessage({ type: 'error', text: `Test trade failed: ${error instanceof Error ? error.message : 'Unknown error'}` })
|
||
}
|
||
setTesting(false)
|
||
}
|
||
|
||
const updateSetting = (key: keyof TradingSettings, value: any) => {
|
||
if (!settings) return
|
||
setSettings({ ...settings, [key]: value })
|
||
}
|
||
|
||
const calculateRisk = () => {
|
||
if (!settings) return null
|
||
const maxLoss = settings.MAX_POSITION_SIZE_USD * settings.LEVERAGE * (Math.abs(settings.STOP_LOSS_PERCENT) / 100)
|
||
const tp1Gain = settings.MAX_POSITION_SIZE_USD * settings.LEVERAGE * (settings.TAKE_PROFIT_1_PERCENT / 100) * (settings.TAKE_PROFIT_1_SIZE_PERCENT / 100)
|
||
const tp2Gain = settings.MAX_POSITION_SIZE_USD * settings.LEVERAGE * (settings.TAKE_PROFIT_2_PERCENT / 100) * (settings.TAKE_PROFIT_2_SIZE_PERCENT / 100)
|
||
const fullWin = tp1Gain + tp2Gain
|
||
|
||
return { maxLoss, tp1Gain, tp2Gain, fullWin }
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center">
|
||
<div className="text-white text-xl">Loading settings...</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!settings) return null
|
||
|
||
const risk = calculateRisk()
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 py-8 px-4">
|
||
<div className="max-w-5xl mx-auto">
|
||
{/* Header */}
|
||
<div className="mb-8">
|
||
<div className="flex items-center space-x-4 mb-4">
|
||
<a href="/" className="text-gray-400 hover:text-white transition">
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||
</svg>
|
||
</a>
|
||
<div>
|
||
<h1 className="text-4xl font-bold text-white">⚙️ Trading Bot Settings</h1>
|
||
</div>
|
||
</div>
|
||
<p className="text-slate-400">Configure your automated trading parameters</p>
|
||
</div>
|
||
|
||
{/* Message */}
|
||
{message && (
|
||
<div className={`mb-6 p-4 rounded-lg ${
|
||
message.type === 'success' ? 'bg-green-500/20 text-green-400 border border-green-500/50' : 'bg-red-500/20 text-red-400 border border-red-500/50'
|
||
}`}>
|
||
{message.text}
|
||
</div>
|
||
)}
|
||
|
||
{/* Risk Calculator */}
|
||
{risk && (
|
||
<div className="mb-8 bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6">
|
||
<h2 className="text-xl font-bold text-white mb-4">📊 Risk Calculator</h2>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div className="bg-red-500/10 border border-red-500/50 rounded-lg p-4">
|
||
<div className="text-red-400 text-sm mb-1">Max Loss (SL)</div>
|
||
<div className="text-white text-2xl font-bold">-${risk.maxLoss.toFixed(2)}</div>
|
||
</div>
|
||
<div className="bg-blue-500/10 border border-blue-500/50 rounded-lg p-4">
|
||
<div className="text-blue-400 text-sm mb-1">TP1 Gain ({settings.TAKE_PROFIT_1_SIZE_PERCENT}%)</div>
|
||
<div className="text-white text-2xl font-bold">+${risk.tp1Gain.toFixed(2)}</div>
|
||
</div>
|
||
<div className="bg-green-500/10 border border-green-500/50 rounded-lg p-4">
|
||
<div className="text-green-400 text-sm mb-1">TP2 Gain ({settings.TAKE_PROFIT_2_SIZE_PERCENT}%)</div>
|
||
<div className="text-white text-2xl font-bold">+${risk.tp2Gain.toFixed(2)}</div>
|
||
</div>
|
||
<div className="bg-purple-500/10 border border-purple-500/50 rounded-lg p-4">
|
||
<div className="text-purple-400 text-sm mb-1">Full Win</div>
|
||
<div className="text-white text-2xl font-bold">+${risk.fullWin.toFixed(2)}</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 text-slate-400 text-sm">
|
||
Risk/Reward Ratio: 1:{(risk.fullWin / risk.maxLoss).toFixed(2)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Settings Sections */}
|
||
<div className="space-y-6">
|
||
{/* Position Sizing */}
|
||
<Section title="💰 Position Sizing" description="Control your trade size and leverage">
|
||
<Setting
|
||
label="Position Size (USD)"
|
||
value={settings.MAX_POSITION_SIZE_USD}
|
||
onChange={(v) => updateSetting('MAX_POSITION_SIZE_USD', v)}
|
||
min={10}
|
||
max={10000}
|
||
step={10}
|
||
description="Base USD amount per trade. With 5x leverage, $50 = $250 position."
|
||
/>
|
||
<Setting
|
||
label="Leverage"
|
||
value={settings.LEVERAGE}
|
||
onChange={(v) => updateSetting('LEVERAGE', v)}
|
||
min={1}
|
||
max={20}
|
||
step={1}
|
||
description="Multiplier for your position. Higher = more profit AND more risk."
|
||
/>
|
||
</Section>
|
||
|
||
{/* Risk Management */}
|
||
<Section title="🛡️ Risk Management" description="Stop loss and take profit levels">
|
||
<Setting
|
||
label="Stop Loss (%)"
|
||
value={settings.STOP_LOSS_PERCENT}
|
||
onChange={(v) => updateSetting('STOP_LOSS_PERCENT', v)}
|
||
min={-10}
|
||
max={-0.1}
|
||
step={0.1}
|
||
description="Close 100% of position when price drops this much. Protects from large losses."
|
||
/>
|
||
<Setting
|
||
label="Take Profit 1 Price (%)"
|
||
value={settings.TAKE_PROFIT_1_PERCENT}
|
||
onChange={(v) => updateSetting('TAKE_PROFIT_1_PERCENT', v)}
|
||
min={0.1}
|
||
max={10}
|
||
step={0.1}
|
||
description="Price level for first take profit exit."
|
||
/>
|
||
<Setting
|
||
label="Take Profit 1 Size (%)"
|
||
value={settings.TAKE_PROFIT_1_SIZE_PERCENT}
|
||
onChange={(v) => updateSetting('TAKE_PROFIT_1_SIZE_PERCENT', v)}
|
||
min={1}
|
||
max={100}
|
||
step={1}
|
||
description="What % of position to close at TP1. Example: 50 = close half."
|
||
/>
|
||
<Setting
|
||
label="Take Profit 2 Price (%)"
|
||
value={settings.TAKE_PROFIT_2_PERCENT}
|
||
onChange={(v) => updateSetting('TAKE_PROFIT_2_PERCENT', v)}
|
||
min={0.1}
|
||
max={20}
|
||
step={0.1}
|
||
description="Price level for second take profit exit."
|
||
/>
|
||
<Setting
|
||
label="Take Profit 2 Size (%)"
|
||
value={settings.TAKE_PROFIT_2_SIZE_PERCENT}
|
||
onChange={(v) => updateSetting('TAKE_PROFIT_2_SIZE_PERCENT', v)}
|
||
min={1}
|
||
max={100}
|
||
step={1}
|
||
description="What % of remaining position to close at TP2. Example: 100 = close rest."
|
||
/>
|
||
<Setting
|
||
label="Emergency Stop (%)"
|
||
value={settings.EMERGENCY_STOP_PERCENT}
|
||
onChange={(v) => updateSetting('EMERGENCY_STOP_PERCENT', v)}
|
||
min={-20}
|
||
max={-0.1}
|
||
step={0.1}
|
||
description="Hard stop for flash crashes. Should be wider than regular SL."
|
||
/>
|
||
</Section>
|
||
|
||
{/* Dynamic Adjustments */}
|
||
<Section title="🎯 Dynamic Stop Loss" description="Automatically adjust SL as trade moves in profit">
|
||
<Setting
|
||
label="Breakeven Trigger (%)"
|
||
value={settings.BREAKEVEN_TRIGGER_PERCENT}
|
||
onChange={(v) => updateSetting('BREAKEVEN_TRIGGER_PERCENT', v)}
|
||
min={0}
|
||
max={5}
|
||
step={0.1}
|
||
description="After TP1 closes, move SL to this profit level. Should be between 0% (breakeven) and TP1%. Example: 0.4% = locks in +4% account profit on remaining position."
|
||
/>
|
||
<Setting
|
||
label="Profit Lock Trigger (%)"
|
||
value={settings.PROFIT_LOCK_TRIGGER_PERCENT}
|
||
onChange={(v) => updateSetting('PROFIT_LOCK_TRIGGER_PERCENT', v)}
|
||
min={0}
|
||
max={10}
|
||
step={0.1}
|
||
description="After TP1, if price continues to this level, move SL higher to lock more profit. Must be > TP1 and < TP2."
|
||
/>
|
||
<Setting
|
||
label="Profit Lock Amount (%)"
|
||
value={settings.PROFIT_LOCK_PERCENT}
|
||
onChange={(v) => updateSetting('PROFIT_LOCK_PERCENT', v)}
|
||
min={0}
|
||
max={5}
|
||
step={0.1}
|
||
description="When Profit Lock Trigger hits, move SL to this profit level. Should be > Breakeven Trigger."
|
||
/>
|
||
</Section>
|
||
|
||
{/* Trailing Stop */}
|
||
<Section title="🏃 Trailing Stop (Runner)" description="Let a small portion run with dynamic stop loss">
|
||
<div className="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
|
||
<p className="text-sm text-blue-400">
|
||
After TP2 closes, the remaining position (your "runner") can use a trailing stop loss that follows price.
|
||
This lets you capture big moves while protecting profit.
|
||
</p>
|
||
</div>
|
||
<Setting
|
||
label="Use Trailing Stop"
|
||
value={settings.USE_TRAILING_STOP ? 1 : 0}
|
||
onChange={(v) => updateSetting('USE_TRAILING_STOP', v === 1)}
|
||
min={0}
|
||
max={1}
|
||
step={1}
|
||
description="Enable trailing stop for runner position after TP2. 0 = disabled, 1 = enabled."
|
||
/>
|
||
<Setting
|
||
label="Trailing Stop Distance (%)"
|
||
value={settings.TRAILING_STOP_PERCENT}
|
||
onChange={(v) => updateSetting('TRAILING_STOP_PERCENT', v)}
|
||
min={0.1}
|
||
max={2}
|
||
step={0.1}
|
||
description="How far below peak price (for longs) to trail the stop loss. Example: 0.3% = SL trails 0.3% below highest price reached."
|
||
/>
|
||
<Setting
|
||
label="Trailing Stop Activation (%)"
|
||
value={settings.TRAILING_STOP_ACTIVATION}
|
||
onChange={(v) => updateSetting('TRAILING_STOP_ACTIVATION', v)}
|
||
min={0.1}
|
||
max={5}
|
||
step={0.1}
|
||
description="Runner must reach this profit % before trailing stop activates. Prevents premature stops. Example: 0.5% = wait until runner is +0.5% profit."
|
||
/>
|
||
</Section>
|
||
|
||
{/* Trade Limits */}
|
||
<Section title="⚠️ Safety Limits" description="Prevent overtrading and excessive losses">
|
||
<Setting
|
||
label="Max Daily Loss (USD)"
|
||
value={settings.MAX_DAILY_DRAWDOWN}
|
||
onChange={(v) => updateSetting('MAX_DAILY_DRAWDOWN', v)}
|
||
min={-1000}
|
||
max={-10}
|
||
step={10}
|
||
description="Stop trading if daily loss exceeds this amount."
|
||
/>
|
||
<Setting
|
||
label="Max Trades Per Hour"
|
||
value={settings.MAX_TRADES_PER_HOUR}
|
||
onChange={(v) => updateSetting('MAX_TRADES_PER_HOUR', v)}
|
||
min={1}
|
||
max={20}
|
||
step={1}
|
||
description="Maximum number of trades allowed per hour."
|
||
/>
|
||
<Setting
|
||
label="Cooldown Between Trades (seconds)"
|
||
value={settings.MIN_TIME_BETWEEN_TRADES}
|
||
onChange={(v) => updateSetting('MIN_TIME_BETWEEN_TRADES', v)}
|
||
min={0}
|
||
max={3600}
|
||
step={60}
|
||
description="Minimum wait time between trades to prevent overtrading."
|
||
/>
|
||
</Section>
|
||
|
||
{/* Execution */}
|
||
<Section title="⚡ Execution Settings" description="Order execution parameters">
|
||
<Setting
|
||
label="Slippage Tolerance (%)"
|
||
value={settings.SLIPPAGE_TOLERANCE}
|
||
onChange={(v) => updateSetting('SLIPPAGE_TOLERANCE', v)}
|
||
min={0.1}
|
||
max={5}
|
||
step={0.1}
|
||
description="Maximum acceptable price slippage on market orders."
|
||
/>
|
||
<div className="flex items-center justify-between p-4 bg-slate-700/30 rounded-lg">
|
||
<div className="flex-1">
|
||
<div className="text-white font-medium mb-1">🧪 Dry Run Mode</div>
|
||
<div className="text-slate-400 text-sm">
|
||
Simulate trades without executing. Enable for testing.
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => updateSetting('DRY_RUN', !settings.DRY_RUN)}
|
||
className={`relative inline-flex h-8 w-14 items-center rounded-full transition-colors ${
|
||
settings.DRY_RUN ? 'bg-blue-500' : 'bg-slate-600'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-6 w-6 transform rounded-full bg-white transition-transform ${
|
||
settings.DRY_RUN ? 'translate-x-7' : 'translate-x-1'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="mt-8 space-y-4">
|
||
{/* Primary Actions */}
|
||
<div className="flex gap-4">
|
||
<button
|
||
onClick={saveSettings}
|
||
disabled={saving}
|
||
className="flex-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold py-4 px-6 rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{saving ? '💾 Saving...' : '💾 Save Settings'}
|
||
</button>
|
||
<button
|
||
onClick={restartBot}
|
||
disabled={restarting}
|
||
className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-bold py-4 px-6 rounded-lg hover:from-green-600 hover:to-emerald-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{restarting ? '🔄 Restarting...' : '🔄 Restart Bot'}
|
||
</button>
|
||
<button
|
||
onClick={loadSettings}
|
||
className="bg-slate-700 text-white font-bold py-4 px-6 rounded-lg hover:bg-slate-600 transition-all"
|
||
>
|
||
↺ Reset
|
||
</button>
|
||
</div>
|
||
|
||
{/* Test Trade Buttons */}
|
||
<div className="flex gap-4">
|
||
<button
|
||
onClick={() => testTrade('long')}
|
||
disabled={testing}
|
||
className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-bold py-4 px-6 rounded-lg hover:from-green-600 hover:to-emerald-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed border-2 border-green-400"
|
||
>
|
||
{testing ? '🧪 Executing...' : '🧪 Test LONG (REAL)'}
|
||
</button>
|
||
<button
|
||
onClick={() => testTrade('short')}
|
||
disabled={testing}
|
||
className="flex-1 bg-gradient-to-r from-red-500 to-orange-500 text-white font-bold py-4 px-6 rounded-lg hover:from-red-600 hover:to-orange-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed border-2 border-red-400"
|
||
>
|
||
{testing ? '🧪 Executing...' : '🧪 Test SHORT (REAL)'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 text-center text-slate-400 text-sm">
|
||
💡 Save settings first, then click Restart Bot to apply changes
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function Section({ title, description, children }: { title: string, description: string, children: React.ReactNode }) {
|
||
return (
|
||
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6">
|
||
<h2 className="text-xl font-bold text-white mb-1">{title}</h2>
|
||
<p className="text-slate-400 text-sm mb-6">{description}</p>
|
||
<div className="space-y-4">
|
||
{children}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function Setting({
|
||
label,
|
||
value,
|
||
onChange,
|
||
min,
|
||
max,
|
||
step,
|
||
description
|
||
}: {
|
||
label: string
|
||
value: number
|
||
onChange: (value: number) => void
|
||
min: number
|
||
max: number
|
||
step: number
|
||
description: string
|
||
}) {
|
||
return (
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<label className="text-white font-medium">{label}</label>
|
||
<input
|
||
type="number"
|
||
value={value}
|
||
onChange={(e) => onChange(parseFloat(e.target.value))}
|
||
min={min}
|
||
max={max}
|
||
step={step}
|
||
className="w-24 bg-slate-700 text-white px-3 py-2 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none"
|
||
/>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
value={value}
|
||
onChange={(e) => onChange(parseFloat(e.target.value))}
|
||
min={min}
|
||
max={max}
|
||
step={step}
|
||
className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer slider"
|
||
/>
|
||
<p className="text-slate-400 text-sm">{description}</p>
|
||
</div>
|
||
)
|
||
}
|