83 lines
4.3 KiB
TypeScript
83 lines
4.3 KiB
TypeScript
"use client"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
interface CompanyInfoProps {
|
|
symbol: string
|
|
}
|
|
|
|
export function CompanyInfo({ symbol }: CompanyInfoProps) {
|
|
// Mock company data
|
|
const companyData = {
|
|
TSLA: {
|
|
symbol: "TSLA",
|
|
marketCap: "$1.4T",
|
|
ipoDate: "Jun 29, 2010",
|
|
ceo: "Elon R. Musk",
|
|
employees: "126K",
|
|
sector: "Consumer Cyclical",
|
|
industry: "Auto - Manufacturers",
|
|
country: "US",
|
|
exchange: "NASDAQ Global Select",
|
|
description:
|
|
"Tesla, Inc. is a leading global manufacturer of electric vehicles and clean energy products, headquartered in Austin, Texas. The company operates in two main segments: Automotive, which includes the...",
|
|
readMore: true,
|
|
},
|
|
}
|
|
|
|
const company = companyData[symbol as keyof typeof companyData] || companyData.TSLA
|
|
|
|
return (
|
|
<div className="space-y-1 sm:space-y-2 md:space-y-4 lg:space-y-6">
|
|
<div className="border border-border/50 rounded-lg p-2 sm:p-3 md:p-4 space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
|
<div className="space-y-0 sm:space-y-0.5 md:space-y-1">
|
|
<div className="flex items-center justify-between py-0.5 sm:py-1">
|
|
<span className="text-xs sm:text-sm text-muted-foreground leading-tight">Symbol</span>
|
|
<span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.symbol}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-0.5 sm:py-1">
|
|
<span className="text-xs sm:text-sm text-muted-foreground leading-tight">Market Cap</span>
|
|
<span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.marketCap}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-0.5 sm:py-1">
|
|
<span className="text-xs sm:text-sm text-muted-foreground leading-tight">IPO Date</span>
|
|
<span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.ipoDate}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-0.5 sm:py-1">
|
|
<span className="text-xs sm:text-sm text-muted-foreground leading-tight">CEO</span>
|
|
<span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.ceo}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-0.5 sm:py-1">
|
|
<span className="text-xs sm:text-sm text-muted-foreground leading-tight">Fulltime Employees</span>
|
|
<span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.employees}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-0.5 sm:py-1">
|
|
<span className="text-xs sm:text-sm text-muted-foreground leading-tight">Sector</span>
|
|
<span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.sector}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-0.5 sm:py-1">
|
|
<span className="text-xs sm:text-sm text-muted-foreground leading-tight">Industry</span>
|
|
<span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.industry}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-0.5 sm:py-1">
|
|
<span className="text-xs sm:text-sm text-muted-foreground leading-tight">Country</span>
|
|
<span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.country}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-0.5 sm:py-1">
|
|
<span className="text-xs sm:text-sm text-muted-foreground leading-tight">Exchange</span>
|
|
<span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.exchange}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1 sm:space-y-2 pt-1 sm:pt-2">
|
|
<p className="text-xs sm:text-sm text-muted-foreground leading-snug">{company.description}</p>
|
|
{company.readMore && (
|
|
<Button variant="link" className="p-0 h-auto text-blue-400 text-xs sm:text-sm hover:text-blue-300">
|
|
Read More
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|