login.js

import { Container, Row, Col, Card, Grid, Spacer, Divider, Button, Text, ThemeProvider } from "@nextui-org/react";
import { ThemeToggle } from "../components/theme-toggle";
import { useTheme } from "@nextui-org/react";

export default function Login() {
  const theme = useTheme();

  return (
    <>
      <Spacer y={1} />
      <Grid.Container gap={0} justify="center">
        <Grid xs={0} sm={1} md={2} lg={3} xl={4}></Grid>
        <Grid xs>
          <Spacer x={1} />
          <Card>
            <Card.Header>
              <Container fluid>
                <Row align="center">
                  <Col>
                    <Text h1>Login</Text>
                  </Col>
                  <ThemeToggle />
                </Row>
              </Container>
            </Card.Header>
            <Divider y={0} />
            <Card.Body>
            </Card.Body>
            <Divider y={0} />
            {/* <Card.Footer color={theme.type === 'dark' ? theme.palette.accents_1 : theme.palette.background}> */}
            <Card.Footer>
              <Row justify="flex-end">
                <Button size="small" light>Cancel</Button>
                <Button size="small">Login</Button>
              </Row>
            </Card.Footer>
          </Card>
          <Spacer x={1} />
        </Grid>
        <Grid xs={0} sm={1} md={2} lg={3} xl={4}></Grid>
      </Grid.Container>
    </>
  );
}