79 lines
3.4 KiB
TypeScript
79 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { StockHeader } from "./stock-header"
|
|
import { StockChart } from "./stock-chart"
|
|
import { CompanyInfo } from "./company-info"
|
|
import { RecentDevelopments } from "./recent-developments"
|
|
import { LatestPriceMovement } from "./latest-price-movement"
|
|
import { Watchlist } from "./watchlist"
|
|
import { Navigation } from "./navigation"
|
|
import { KeyIssues } from "./key-issues"
|
|
import { HistoricalData } from "./historical-data"
|
|
import { Financials } from "./financials"
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
|
|
import { Earnings } from "./earnings"
|
|
import { Research } from "./research"
|
|
|
|
export function StockDashboard() {
|
|
const [selectedStock, setSelectedStock] = useState("TSLA")
|
|
const [activeTab, setActiveTab] = useState("overview")
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground">
|
|
<Navigation />
|
|
<div className="flex">
|
|
<main className="flex-1 p-1 sm:p-2 md:p-3 lg:p-4">
|
|
<div className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-1 sm:gap-2 md:gap-3 lg:gap-4">
|
|
{/* Left main content area with tabs */}
|
|
<div className="lg:col-span-2 space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
|
<StockHeader symbol={selectedStock} activeTab={activeTab} onTabChange={setActiveTab} />
|
|
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
|
<TabsList className="hidden">
|
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
|
<TabsTrigger value="historical">Historical Data</TabsTrigger>
|
|
<TabsTrigger value="financials">Financials</TabsTrigger>
|
|
<TabsTrigger value="earnings">Earnings</TabsTrigger>
|
|
<TabsTrigger value="research">Research</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="overview" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
|
<StockChart symbol={selectedStock} />
|
|
<RecentDevelopments />
|
|
<KeyIssues />
|
|
<LatestPriceMovement />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="historical" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
|
<HistoricalData />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="financials" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
|
<Financials />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="earnings" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
|
<Earnings />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="research" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
|
<Research />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
{/* Right sidebar with company info and watchlist */}
|
|
<div className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
|
<CompanyInfo symbol={selectedStock} />
|
|
<Watchlist onSelectStock={setSelectedStock} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|