proofmode 0.9.0

'use client';

import { useState } from 'react';
import {
  Container,
  Box,
  Typography,
  Tab,
  Tabs,
  Paper,
  AppBar,
  Toolbar,
} from '@mui/material';
import VerifyTab from '@/components/VerifyTab';
import GenerateTab from '@/components/GenerateTab';
import SecurityIcon from '@mui/icons-material/Security';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`tabpanel-${index}`}
      aria-labelledby={`tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
    </div>
  );
}

export default function Home() {
  const [tabValue, setTabValue] = useState(0);

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setTabValue(newValue);
  };

  return (
    <>
      <AppBar position="static" elevation={0}>
        <Toolbar>
          <SecurityIcon sx={{ mr: 2 }} />
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            ProofMode Web Example
          </Typography>
        </Toolbar>
      </AppBar>

      <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
        <Paper elevation={1}>
          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
            <Tabs value={tabValue} onChange={handleTabChange} centered>
              <Tab label="Verify Proof" />
              <Tab label="Generate Proof" />
            </Tabs>
          </Box>
          
          <TabPanel value={tabValue} index={0}>
            <VerifyTab />
          </TabPanel>
          
          <TabPanel value={tabValue} index={1}>
            <GenerateTab />
          </TabPanel>
        </Paper>

        <Box sx={{ mt: 4, textAlign: 'center' }}>
          <Typography variant="body2" color="text.secondary">
            This demo runs ProofMode entirely in your browser using WebAssembly.
            No files are uploaded to any server.
          </Typography>
        </Box>
      </Container>
    </>
  );
}