63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
import { ExpressionPanel } from './ExpressionPanel';
|
||
|
|
import { GraphPanel } from './GraphPanel';
|
||
|
|
|
||
|
|
type Tab = 'calc' | 'graph';
|
||
|
|
|
||
|
|
export default function Calculator() {
|
||
|
|
const [tab, setTab] = useState<Tab>('calc');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
|
||
|
|
{/* Mobile tab switcher — hidden on lg+ */}
|
||
|
|
<div className="flex lg:hidden glass rounded-xl p-1 gap-1">
|
||
|
|
{(['calc', 'graph'] as Tab[]).map((t) => (
|
||
|
|
<button
|
||
|
|
key={t}
|
||
|
|
onClick={() => setTab(t)}
|
||
|
|
className={cn(
|
||
|
|
'flex-1 py-2.5 rounded-lg text-sm font-medium capitalize transition-all',
|
||
|
|
tab === t
|
||
|
|
? 'bg-primary text-primary-foreground shadow-sm'
|
||
|
|
: 'text-muted-foreground hover:text-foreground'
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{t === 'calc' ? 'Calculator' : 'Graph'}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 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 - 220px)', minHeight: '620px' }}
|
||
|
|
>
|
||
|
|
{/* 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>
|
||
|
|
);
|
||
|
|
}
|