70 lines
3.2 KiB
TypeScript
70 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { Search } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
|
|
type AnalysisToolbarProps = {
|
|
tickerInput: string;
|
|
currentTicker: string;
|
|
onTickerInputChange: (value: string) => void;
|
|
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
onRefresh: () => void;
|
|
quickLinks: {
|
|
research: string;
|
|
filings: string;
|
|
financials: string;
|
|
graphing: string;
|
|
};
|
|
onLinkPrefetch?: () => void;
|
|
};
|
|
|
|
export function AnalysisToolbar(props: AnalysisToolbarProps) {
|
|
return (
|
|
<form
|
|
className="border-t border-[color:var(--line-weak)] pt-4"
|
|
onSubmit={props.onSubmit}
|
|
>
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="space-y-1">
|
|
<p className="panel-heading text-xs uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">Company overview</p>
|
|
<h2 className="text-lg font-semibold text-[color:var(--terminal-bright)]">Inspect the latest high-level picture for {props.currentTicker}</h2>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
|
<Input
|
|
value={props.tickerInput}
|
|
aria-label="Overview ticker"
|
|
onChange={(event) => props.onTickerInputChange(event.target.value.toUpperCase())}
|
|
placeholder="Ticker (AAPL)"
|
|
className="w-full sm:min-w-[180px]"
|
|
/>
|
|
<Button type="submit">
|
|
<Search className="size-4" />
|
|
Load overview
|
|
</Button>
|
|
<Button type="button" variant="secondary" onClick={props.onRefresh}>
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-2 text-sm">
|
|
<Link href={props.quickLinks.research} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
|
|
Research
|
|
</Link>
|
|
<Link href={props.quickLinks.filings} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
|
|
Filings
|
|
</Link>
|
|
<Link href={props.quickLinks.financials} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
|
|
Financials
|
|
</Link>
|
|
<Link href={props.quickLinks.graphing} onMouseEnter={props.onLinkPrefetch} onFocus={props.onLinkPrefetch} className="rounded-full border border-[color:var(--line-weak)] px-3 py-1.5 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]">
|
|
Graphing
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|