52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { ExpressionPanel } from './ExpressionPanel';
|
|
import { GraphPanel } from './GraphPanel';
|
|
import { MobileTabs } from '@/components/ui/mobile-tabs';
|
|
|
|
type Tab = 'calc' | 'graph';
|
|
|
|
export default function Calculator() {
|
|
const [tab, setTab] = useState<Tab>('calc');
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
|
|
<MobileTabs
|
|
tabs={[{ value: 'calc', label: 'Calculator' }, { value: 'graph', label: 'Graph' }]}
|
|
active={tab}
|
|
onChange={(v) => setTab(v as Tab)}
|
|
/>
|
|
|
|
{/* Main layout — side-by-side on lg, tabbed on mobile */}
|
|
<div
|
|
className="grid grid-cols-1 lg:grid-cols-5 gap-4"
|
|
style={{ height: 'calc(100svh - 120px)' }}
|
|
>
|
|
{/* Expression panel */}
|
|
<div
|
|
className={cn(
|
|
'lg:col-span-2 overflow-hidden flex flex-col',
|
|
tab !== 'calc' && 'hidden lg:flex'
|
|
)}
|
|
>
|
|
<ExpressionPanel />
|
|
</div>
|
|
|
|
{/* Graph panel */}
|
|
<div
|
|
className={cn(
|
|
'lg:col-span-3 overflow-hidden flex flex-col',
|
|
tab !== 'graph' && 'hidden lg:flex'
|
|
)}
|
|
>
|
|
<GraphPanel />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|