69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
|
|
|
|
interface AlertsModalProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
symbol: string
|
|
}
|
|
|
|
export function AlertsModal({ open, onOpenChange, symbol }: AlertsModalProps) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Configure alerts for {symbol}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<Tabs defaultValue="configure" className="w-full">
|
|
<TabsList className="w-full grid grid-cols-2">
|
|
<TabsTrigger value="add">Add alert</TabsTrigger>
|
|
<TabsTrigger value="configure">Configure alerts</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="add" className="mt-4 space-y-4">
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-foreground">Alert type</label>
|
|
<select className="w-full border border-border bg-input text-foreground text-sm px-3 py-2">
|
|
<option value="">Select alert type...</option>
|
|
<option value="price-above">Price above</option>
|
|
<option value="price-below">Price below</option>
|
|
<option value="percent-change">Percent change</option>
|
|
<option value="volume">Volume spike</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-foreground">Value</label>
|
|
<input
|
|
type="number"
|
|
placeholder="Enter value..."
|
|
className="w-full border border-border bg-input text-foreground text-sm px-3 py-2"
|
|
/>
|
|
</div>
|
|
|
|
<button className="w-full bg-primary text-primary-foreground text-sm font-medium px-4 py-2 hover:bg-primary/90 transition-colors">
|
|
Add Alert
|
|
</button>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="configure" className="mt-4 space-y-4">
|
|
<div className="text-sm text-muted-foreground text-center py-8">
|
|
No alerts configured for {symbol}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|