### Basic List Example - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

A fundamental example showcasing the usage of the List and ListItem components to create a simple, unstyled list. This serves as a starting point for more complex list structures.

```jsx
{{"demo": "BasicList.js", "bg": true}}
```

--------------------------------

### Basic Table Example - React

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/table/table.md

Demonstrates a fundamental Material UI Table with no additional styling or complex features. This serves as a starting point for implementing tables.

```jsx
import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function createData(name, calories, fat, carbs, protein) {
  return {
    name,
    calories,
    fat,
    carbs,
    protein
  };
}

const rows = [
  createData('Frozen yoghurt', 159, 6, 24, 4),
  createData('Ice cream sandwich', 237, 9, 37, 4.3),
  createData('Eclair', 262, 16, 24, 6),
  createData('Cupcake', 305, 3, 67, 4.3),
  createData('Gingerbread', 356, 16, 49, 3.9),
];

export default function BasicTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}
```

--------------------------------

### Basic ThemeProvider setup with CSS variables

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/init-color-scheme-script/init-color-scheme-script.md

This snippet shows the basic setup for enabling CSS variables with the 'data' color scheme selector in Material UI's createTheme function. It's a prerequisite for using InitColorSchemeScript effectively.

```javascript
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  cssVariables: {
    colorSchemeSelector: 'data',
  },
});

function App() {
  return <ThemeProvider theme={theme}>{/* Your app */}</ThemeProvider>;
}
```

--------------------------------

### Customized List Example - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

Provides examples of how to customize the appearance and behavior of Material UI List components. This involves using Material UI's theming and styling capabilities, as detailed in the overrides documentation.

```jsx
{{"demo": "CustomizedList.js"}}
```

--------------------------------

### Folder List Example - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

Demonstrates a folder-like list structure, often used for displaying hierarchical data such as file directories or organizational charts. This example likely uses specific List and ListItem configurations for visual representation.

```jsx
{{"demo": "FolderList.js", "bg": true}}
```

--------------------------------

### Basic React Switch Component Example

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/switches/switches.md

Demonstrates the basic usage of the React Switch component from Material UI. This snippet shows how to render a simple switch.

```jsx
import Switch from '@mui/material/Switch';

function BasicSwitches() {
  const [checked, setChecked] = React.useState(true);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };

  return (
    <Switch checked={checked} onChange={handleChange} />
  );
}
```

--------------------------------

### Basic HTML Tooltip Example

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/tooltips/tooltips.md

A simple HTML example demonstrating the native browser tooltip functionality using the `title` attribute. This provides a basic accessible description or label for an element, appearing on hover. This is distinct from more advanced JavaScript-based tooltips.

```html
<button title="This is a native tooltip.">Hover Over Me</button>
```

--------------------------------

### React Accordion Accessibility Setup

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/accordion/accordion.md

Provides a code example for setting up accessibility attributes for an Accordion component as recommended by WAI-ARIA guidelines. It includes setting the `id` and `aria-controls` on the Accordion Summary to properly link the header and content for assistive technologies.

```jsx
<Accordion>
  <AccordionSummary id="panel-header" aria-controls="panel-content">
    Header
  </AccordionSummary>
  <AccordionDetails>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </AccordionDetails>
</Accordion>
```

--------------------------------

### Checkbox List Example - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

Illustrates how to incorporate checkboxes within list items, enabling selection or state toggling. This example covers cases where the checkbox is a primary or secondary action.

```jsx
{{"demo": "CheckboxList.js", "bg": true}}
```

--------------------------------

### Interactive List Example - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

Provides an example of an interactive list where users can engage with list items, such as selecting them or triggering actions. This often involves state management and event handling within React.

```jsx
{{"demo": "InteractiveList.js", "bg": true}}
```

--------------------------------

### Migrating from System Props to `sx` Prop (React)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/box/box.md

Provides a migration example from deprecated System props to the recommended `sx` prop for customizing the Box component. This is to prepare for future Material UI versions.

```diff
```diff
- <Box mt={2} />
+ <Box sx={{ mt: 2 }} />
```
```

--------------------------------

### Basic Checkbox Example (React JSX)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/checkboxes/checkboxes.md

Demonstrates the fundamental usage of the Material UI Checkbox component. This example assumes the necessary Material UI components are imported and available for rendering.

```jsx
import Checkbox from '@mui/material/Checkbox';

function BasicCheckboxes() {
  return (
    <Checkbox defaultChecked />
  );
}
```

--------------------------------

### Mock API Route Handler: Academy Courses

Source: https://context7.com/idprm/nextjs-demo/llms.txt

Provides mock API endpoints for managing 'academy_courses' data, supporting GET, POST, PUT, and DELETE operations.

```APIDOC
## Mock API Route Handler: Academy Courses

### Description
These Next.js API routes handle CRUD operations for the 'academy_courses' mock data. They interact with a mock API utility to perform database-like operations.

### Method
GET

### Endpoint
/api/mock/academy/courses

### Parameters
#### Query Parameters
- **queryParams** (object) - Optional - Query parameters for filtering courses.

### Request Example
N/A (GET request)

### Response
#### Success Response (200)
- **items** (array<Course>) - A list of course objects.

#### Response Example
```json
[
  {
    "id": "course-1",
    "title": "Introduction to Programming",
    "instructor": "Dr. Smith"
  }
]
```

---

### Method
POST

### Endpoint
/api/mock/academy/courses

### Parameters
#### Request Body
- **body** (object) - Required - The course data to create.

### Request Example
```json
{
  "title": "Advanced Algorithms",
  "instructor": "Prof. Jones"
}
```

### Response
#### Success Response (201)
- **newItem** (object) - The newly created course object.

#### Response Example
```json
{
  "id": "course-2",
  "title": "Advanced Algorithms",
  "instructor": "Prof. Jones"
}
```

---

### Method
PUT

### Endpoint
/api/mock/academy/courses/[id]

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the course to update.
#### Request Body
- **body** (object) - Required - The updated course data.

### Request Example
```json
{
  "title": "Updated Course Title"
}
```

### Response
#### Success Response (200)
- **updatedItem** (object) - The updated course object.

#### Response Example
```json
{
  "id": "course-1",
  "title": "Updated Course Title",
  "instructor": "Dr. Smith"
}
```

---

### Method
DELETE

### Endpoint
/api/mock/academy/courses/[id]

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the course to delete.

### Request Example
N/A (DELETE request)

### Response
#### Success Response (204)
- No content.

```

--------------------------------

### Material UI Grid: Responsive Values Example (React)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/grid/grid.md

Demonstrates the use of responsive values for Grid props like 'size', 'columns', and 'spacing' to create layouts that adapt to different screen sizes and breakpoints.

```jsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';

export default function ResponsiveGrid() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid
        container
        spacing={{
          xs: 2,
          sm: 3,
          md: 4,
          lg: 5,
        }}
      >
        <Grid item xs={12} sm={6} md={3} lg={2}>
          <Item>xs=12 sm=6 md=3 lg=2</Item>
        </Grid>
        <Grid item xs={12} sm={6} md={3} lg={2}>
          <Item>xs=12 sm=6 md=3 lg=2</Item>
        </Grid>
        <Grid item xs={12} sm={6} md={3} lg={2}>
          <Item>xs=12 sm=6 md=3 lg=2</Item>
        </Grid>
        <Grid item xs={12} sm={6} md={3} lg={2}>
          <Item>xs=12 sm=6 md=3 lg=2</Item>
        </Grid>
      </Grid>
    </Box>
  );
}
```

--------------------------------

### NextAuth.js Authentication Configuration

Source: https://context7.com/idprm/nextjs-demo/llms.txt

Configure NextAuth.js for authentication with credentials, Google, and Facebook providers. Includes session callbacks and client-side usage examples.

```APIDOC
## NextAuth.js Authentication Configuration

### Description
Complete authentication setup with multiple providers, including credentials, Google, and Facebook. This configuration utilizes an adapter for session management and defines custom session callbacks.

### Method
N/A (Configuration file)

### Endpoint
N/A (Configuration file)

### Parameters
N/A

### Request Example
N/A

### Response
N/A

#### Client-side Usage:

```typescript
import { signIn, signOut } from 'next-auth/react';

async function handleLogin() {
  await signIn('credentials', {
    email: 'admin@fusetheme.com',
    password: 'admin',
    redirect: false
  });
}

async function handleLogout() {
  await signOut({ callbackUrl: '/' });
}
```
```

--------------------------------

### React Skeleton Usage Example

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/skeleton/skeleton.md

This snippet demonstrates the basic usage of the Skeleton component. It conditionally renders either an image or a Skeleton placeholder based on the 'item' availability, useful for preloading content.

```jsx
{
  item ? (
    <img
      style={{
        width: 210,
        height: 118,
      }}
      alt={item.title}
      src={item.src}
    />
  ) : (
    <Skeleton variant="rectangular" width={210} height={118} />
  );
}
```

--------------------------------

### Autocomplete Free Solo Mode Example (React JSX)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/autocomplete/autocomplete.md

Shows the implementation of the Autocomplete component in 'free solo' mode, allowing users to input arbitrary values. This is suitable for search input functionalities.

```jsx
{{
  "demo": "FreeSolo.js"
}}
```

--------------------------------

### Autocomplete Free Solo Dialog Example (React JSX)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/autocomplete/autocomplete.md

Presents an alternative approach for free solo mode where a dialog is displayed when the user intends to add a new value, providing a more structured way to handle new entries.

```jsx
{{
  "demo": "FreeSoloCreateOptionDialog.js"
}}
```

--------------------------------

### Advanced Autocomplete Filtering with match-sorter

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/autocomplete/autocomplete.md

For more advanced filtering capabilities, such as fuzzy matching, the `match-sorter` library is recommended. This example demonstrates how to integrate `match-sorter` with the `filterOptions` prop for sophisticated search functionality.

```javascript
import { matchSorter } from 'match-sorter';

const filterOptions = (options, { inputValue }) => matchSorter(options, inputValue);

<Autocomplete filterOptions={filterOptions} />;
```

--------------------------------

### Autocomplete Option Example (JavaScript)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/autocomplete/autocomplete.md

Illustrates how to define an array of options for the Autocomplete component. Options can be simple strings or objects with a 'label' and an 'id' property.

```javascript
const options = [
  { label: 'The Godfather', id: 1 },
  { label: 'Pulp Fiction', id: 2 },
];
// or
const options = ['The Godfather', 'Pulp Fiction'];
```

--------------------------------

### Dense Table Example - React

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/table/table.md

Illustrates a compact version of the Material UI Table, reducing vertical padding for a denser display of information. Useful when space is limited.

```jsx
import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function createData(name, calories, fat, carbs, protein) {
  return {
    name,
    calories,
    fat,
    carbs,
    protein
  };
}

const rows = [
  createData('Frozen yoghurt', 159, 6, 24, 4),
  createData('Ice cream sandwich', 237, 9, 37, 4.3),
  createData('Eclair', 262, 16, 24, 6),
  createData('Cupcake', 305, 3, 67, 4.3),
  createData('Gingerbread', 356, 16, 49, 3.9),
];

export default function DenseTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}
```

--------------------------------

### Virtualized List with React-Window - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

An example of integrating the Material UI `List` component with the `react-window` library for efficient rendering of large lists. Virtualization significantly improves performance by only rendering visible items.

```jsx
{{"demo": "VirtualizedList.js", "bg": true}}
```

--------------------------------

### Nested Modal Example in React

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/modal/modal.md

Illustrates how to create nested modals, such as a select component within a dialog. It highlights the recommendation against stacking more than two modals or any two with a backdrop.

```jsx
import React from 'react';
import Modal from '@mui/material/Modal';
import Button from '@mui/material/Button';

function NestedModal() {
  const [open, setOpen] = React.useState(false);
  const [openNested, setOpenNested] = React.useState(false);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleOpenNested = () => {
    setOpenNested(true);
  };
  const handleCloseNested = () => {
    setOpenNested(false);
  };

  return (
    <div>
      <Button onClick={handleOpen}>Open Parent Modal</Button>
      <Modal open={open} onClose={handleClose}>
        <div>
          <h2>Parent Modal</h2>
          <Button onClick={handleOpenNested}>Open Nested Modal</Button>
          <Modal open={openNested} onClose={handleCloseNested}>
            <div>
              <h3>Nested Modal</h3>
              <button type="button" onClick={handleCloseNested}>
                Close Nested
              </button>
            </div>
          </Modal>
        </div>
      </Modal>
    </div>
  );
}

export default NestedModal;
```

--------------------------------

### Nested List Example - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

Illustrates how to create nested lists, allowing for hierarchical data presentation within a list structure. This is useful for organizing related items under parent categories.

```jsx
{{"demo": "NestedList.js", "bg": true}}
```

--------------------------------

### Selected ListItem Example - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

Shows how to visually indicate when a list item has been selected by the user. This typically involves applying specific styling or classes to the selected ListItem.

```jsx
{{"demo": "SelectedListItem.js", "bg": true}}
```

--------------------------------

### Autocomplete Playground Demo (React JSX)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/autocomplete/autocomplete.md

This code snippet is a placeholder for the Autocomplete component's playground example, allowing users to interact with and test various features of the component.

```jsx
{{
  "demo": "Playground.js"
}}
```

--------------------------------

### Import Roboto Font Styles in Entry Point

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/typography/typography.md

Imports specific weights of the Roboto font after it has been installed. These CSS files define the font styles to be used throughout the application.

```tsx
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
```

--------------------------------

### Nested Grid Container Example (JavaScript)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/grid/grid.md

Demonstrates a nested grid container that inherits properties like columns and spacing from its parent. If a grid container has non-grid elements between it and its parent grid, it becomes a new root container.

```javascript
import { Grid } from '@mui/material';

<Grid container>
  <Grid container>
    {/* A nested grid container that inherits columns and spacing from above. */}
    <div>
      <Grid container>
        {/* A new root grid container with its own variables scope. */}
      </Grid>
    </div>
  </Grid>
</Grid>
```

--------------------------------

### Customizing Box with `sx` Prop (React)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/box/box.md

Shows how to customize the Box component using the `sx` prop. This prop allows for a superset of CSS with access to theme-aware properties from MUI System. The example demonstrates applying theme colors.

```jsx
{{
  "demo": "BoxSx.js",
  "defaultCodeOpen": true
}}
```

--------------------------------

### Material UI Grid: Basic Layout Example (React)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/grid/grid.md

Demonstrates the basic usage of the Material UI Grid component to create a layout with a container and items. Items are configured with a size prop to occupy half of the grid's width.

```jsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';

export default function BasicGrid() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <Item>xs=6</Item>
        </Grid>
        <Grid item xs={6}>
          <Item>xs=6</Item>
        </Grid>
        <Grid item xs={6}>
          <Item>xs=6</Item>
        </Grid>
        <Grid item xs={6}>
          <Item>xs=6</Item>
        </Grid>
      </Grid>
    </Box>
  );
}
```

--------------------------------

### Install Roboto Font with Package Managers

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/typography/typography.md

Installs the Roboto font package using different package managers (npm, pnpm, yarn). This is the first step to using the Roboto font in your Material UI project.

```bash
npm install @fontsource/roboto
```

```bash
pnpm add @fontsource/roboto
```

```bash
yarn add @fontsource/roboto
```

--------------------------------

### Autocomplete Referential Stability Warning (React TSX)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/autocomplete/autocomplete.md

Highlights a common pitfall when controlling the 'value' prop: ensuring referential stability to prevent unnecessary re-renders. Shows a bad example and a good example using `React.useMemo`.

```tsx
// ⚠️ BAD
return <Autocomplete multiple value={allValues.filter((v) => v.selected)} />;

// 👍 GOOD
const selectedValues = React.useMemo(
  () => allValues.filter((v) => v.selected),
  [allValues],
);
return <Autocomplete multiple value={selectedValues} />;
```

--------------------------------

### Inset List Item Example - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

Shows how to use the `inset` prop on `ListItem` to create list items that align correctly with other items, especially when the list item lacks a leading icon or avatar. This ensures consistent visual spacing.

```jsx
{{"demo": "InsetList.js", "bg": true}}
```

--------------------------------

### React AppBar: useScrollTrigger Hook Example

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/app-bar/app-bar.md

Illustrates the use of the `useScrollTrigger` hook in React to control the visibility of UI elements based on scroll position. This example shows how to hide a component (like an AppBar) when scrolling down.

```jsx
import useScrollTrigger from '@mui/material/useScrollTrigger';

function HideOnScroll(props) {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>
      <div>Hello</div>
    </Slide>
  );
}
```

--------------------------------

### Mock Database API Utilities

Source: https://context7.com/idprm/nextjs-demo/llms.txt

Utilities for performing CRUD operations on mock data using the `mockApi` function.

```APIDOC
## Mock Database API Utilities

### Description
This section details the usage of the `mockApi` utility for performing Create, Read, Update, and Delete (CRUD) operations on mock data collections.

### Method
N/A (Utility functions)

### Endpoint
N/A (Utility functions)

### Parameters
N/A

### Request Example

#### Create new item
```typescript
const newContact = await api.create({
  name: 'Jane Smith',
  email: 'jane@example.com',
  phone: '+1234567890'
});
```

#### Find single item by ID
```typescript
const contact = await api.find('contact-id-123');
```

#### Find by query parameters
```typescript
const workContacts = await api.find({ company: 'Acme Corp' });
```

#### Find all items
```typescript
const allContacts = await api.findAll();
```

#### Find with filters
```typescript
const filteredContacts = await api.findAll({
  company: 'Tech Inc',
  active: 'true'
});
```

#### Update single item
```typescript
const updated = await api.update('contact-id-123', {
  name: 'Jane Doe',
  phone: '+0987654321'
});
```

#### Update multiple items
```typescript
await api.updateMany([
  { id: 'id-1', status: 'active' },
  { id: 'id-2', status: 'inactive' }
]);
```

#### Delete items
```typescript
await api.delete(['id-1', 'id-2', 'id-3']);
```

### Response
N/A (Each function returns data based on the operation performed.)
```

--------------------------------

### Basic Speed Dial Example

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/speed-dial/speed-dial.md

Demonstrates the fundamental usage of the Speed Dial component, allowing a floating action button to reveal related actions when clicked. This example showcases the core functionality without advanced configurations.

```javascript
import * as React from 'react';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';

const actions = [
  { icon: <FileCopyIcon />, name: 'Copy' },
  { icon: <FileCopyIcon />, name: 'Print' },
  { icon: <FileCopyIcon />, name: 'Trash' },
  { icon: <FileCopyIcon />, name: 'Favorite' },
];

export default function BasicSpeedDial() {
  return (
    <SpeedDial
      ariaLabel="Navigation speed dial"
      sx={{ position: 'absolute', bottom: 16, right: 16 }}
      icon={<SpeedDialIcon />}
    >
      {actions.map((action) => (
        <SpeedDialAction
          key={action.name}
          icon={action.icon}
          tooltipTitle={action.name}
        />
      ))}
    </SpeedDial>
  );
}
```

--------------------------------

### Virtualize Autocomplete with 10,000 Options using react-window

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/autocomplete/autocomplete.md

This demo showcases virtualization for the Autocomplete component using the `react-window` library, enabling efficient rendering of a large number of options (e.g., 10,000 randomly generated options).

```javascript
// See Virtualize.js for implementation details.
```

--------------------------------

### React Dialog with Slide Transition

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/dialogs/dialogs.md

Example of implementing a dialog with a 'Slide' transition effect. This allows for animated entry and exit of the dialog component.

```jsx
{{
  "demo": "AlertDialogSlide.js"
}}
```

--------------------------------

### Reproduce GitHub's Label Picker with Autocomplete

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/autocomplete/autocomplete.md

This demo showcases how to replicate GitHub's label picker functionality using the Material-UI Autocomplete component. The specific implementation details are contained within the `GitHubLabel.js` file.

```javascript
// See GitHubLabel.js for implementation details.
```

--------------------------------

### React Confirmation Dialog Component

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/dialogs/dialogs.md

An example of a confirmation dialog, which requires explicit user acknowledgment before committing an action. It includes 'OK' and 'Cancel' options.

```jsx
{{
  "demo": "ConfirmationDialog.js"
}}
```

--------------------------------

### Custom ListSubheader with muiSkipListHighlight Prop (TypeScript)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/selects/selects.md

Shows an alternative method for customizing ListSubheader by passing the muiSkipListHighlight prop directly to the custom component instance, facilitating proper focus handling.

```tsx
export default function MyListSubheader(
  props: ListSubheaderProps & { muiSkipListHighlight: boolean },
) {
  const { muiSkipListHighlight, ...other } = props;
  return <ListSubheader {...other} />;
}

// elsewhere:

return (
  <Select>
    <MyListSubheader muiSkipListHighlight>Group 1</MyListSubheader>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
    <MyListSubheader muiSkipListHighlight>Group 2</MyListSubheader>
    <MenuItem value={3}>Option 3</MenuItem>
    <MenuItem value={4}>Option 4</MenuItem>
    {/* ... */}
  </Select>
);
```

--------------------------------

### Custom ListSubheader with muiSkipListHighlight Static Field (TypeScript)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/selects/selects.md

Demonstrates how to wrap Material UI's ListSubheader in a custom component and ensure it's correctly handled for focusable elements by defining a static muiSkipListHighlight field.

```tsx
function MyListSubheader(props: ListSubheaderProps) {
  return <ListSubheader {...props} />;
}

MyListSubheader.muiSkipListHighlight = true;
export default MyListSubheader;

// elsewhere:

return (
  <Select>
    <MyListSubheader>Group 1</MyListSubheader>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
    <MyListSubheader>Group 2</MyListSubheader>
    <MenuItem value={3}>Option 3</MenuItem>
    <MenuItem value={4}>Option 4</MenuItem>
    {/* ... */}
  </Select>
)
```

--------------------------------

### React Responsive Full-Screen Dialog with useMediaQuery

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/dialogs/dialogs.md

Demonstrates how to make a dialog responsive and full-screen using the `useMediaQuery` hook from Material UI. This allows the dialog to adapt its size based on screen breakpoints.

```jsx
import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));

  return <Dialog fullScreen={fullScreen} />;
}
```

--------------------------------

### Using TextField for Select with Automatic Labeling (JSX)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/selects/selects.md

Demonstrates the use of Material UI's TextField component configured as a select input. This approach automatically handles markup and IDs for proper labeling and accessibility.

```jsx
<TextField id="select" label="Age" value="20" select>
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</TextField>
```

--------------------------------

### React Customized Dialog Component

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/dialogs/dialogs.md

An example showcasing how to customize the appearance and behavior of the Dialog component. This includes adding elements like a close button for improved usability.

```jsx
{{
  "demo": "CustomizedDialogs.js"
}}
```

--------------------------------

### Mock Database API Utilities for CRUD Operations

Source: https://context7.com/idprm/nextjs-demo/llms.txt

Provides a utility for performing CRUD (Create, Read, Update, Delete) operations on mock data. It supports finding single or multiple items, updating single or multiple items, and deleting items by their IDs.

```typescript
import mockApi from 'src/@mock-utils/mockApi';

const api = mockApi('contacts');

// Create new item
const newContact = await api.create({
  name: 'Jane Smith',
  email: 'jane@example.com',
  phone: '+1234567890'
});

// Find single item by ID
const contact = await api.find('contact-id-123');

// Find by query parameters
const workContacts = await api.find({ company: 'Acme Corp' });

// Find all items
const allContacts = await api.findAll();

// Find with filters
const filteredContacts = await api.findAll({
  company: 'Tech Inc',
  active: 'true'
});

// Update single item
const updated = await api.update('contact-id-123', {
  name: 'Jane Doe',
  phone: '+0987654321'
});

// Update multiple items
await api.updateMany([
  { id: 'id-1', status: 'active' },
  { id: 'id-2', status: 'inactive' }
]);

// Delete items
await api.delete(['id-1', 'id-2', 'id-3']);
```

--------------------------------

### React Custom Transition Component Example

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/transitions/transitions.md

Demonstrates how to create and use a custom React component with Material UI's Fade transition. It highlights the requirement for the child component to forward its ref and accept a style prop for proper animation rendering, especially in server-side rendering scenarios.

```jsx
import React from 'react';
import Fade from '@mui/material/Fade';

// The `props` object contains a `style` prop.
// You need to provide it to the `div` element as shown here.
const MyComponent = React.forwardRef(function (props, ref) {
  return (
    <div ref={ref} {...props}>
      Fade
    </div>
  );
});

export default function Main() {
  return (
    <Fade>
      {/* MyComponent must be the only child */}
      <MyComponent />
    </Fade>
  );
}
```

--------------------------------

### React Slider: Color Slider

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/slider/slider.md

Demonstrates how to apply custom colors to the slider component. This example uses the `sx` prop to define the color of the slider's track and thumb.

```javascript
import Slider from '@mui/material/Slider';
import Box from '@mui/material/Box';

function ColorSlider() {
  return (
    <Box sx={{ width: 300 }}>
      <Slider
        sx={{
          color: 'secondary',
          '& .MuiSlider-thumb': {
            height: 24,
            width: 24,
            backgroundColor: '#fff',
            border: '2px solid currentColor',
            '&:focus': {
              boxShadow: '0 4px 16px rgba(0,0,0,0.16)',
            },
            '&.Mui-focusVisible': {
              boxShadow: '0 4px 16px rgba(0,0,0,0.16)',
            },
          },
        }}
        aria-label="custom thumb radius"
        defaultValue={50}
        marks
        step={10}
        valueLabelDisplay="auto"
        min={10}
        max={110}
      />
    </Box>
  );
}
```

--------------------------------

### Basic React Popover Example - Material UI

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/popover/popover.md

Demonstrates the fundamental usage of the Popover component in React using Material UI. This snippet shows how to render a simple popover, typically triggered by a button click. It relies on the core Material UI Popover component.

```javascript
import * as React from 'react';
import Button from '@mui/material/Button';
import Popover from '@mui/material/Popover';

export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
      </Popover>
    </div>
  );
}
```

--------------------------------

### Basic List Item with Link - JSX

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/lists/lists.md

Example of rendering a list item as a link using the 'component' and 'href' props. This allows navigation to another section or page directly from a list item. It utilizes ListItemButton and ListItemText components.

```jsx
<ListItemButton component="a" href="#simple-list">
  <ListItemText primary="Spam" />
</ListItemButton>
```

--------------------------------

### Tooltip Custom Child Element Example (React)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/tooltips/tooltips.md

Demonstrates how to use a custom React component as a child of the Tooltip. It shows how to forward refs and spread props to ensure the Tooltip can attach event listeners. This is crucial for custom elements to interact correctly with the Tooltip.

```jsx
const MyComponent = React.forwardRef(function MyComponent(props, ref) {
  // Spread the props to the underlying DOM element.
  return (
    <div {...props} ref={ref}>
      Bin
    </div>
  );
});

// ...

<Tooltip title="Delete">
  <MyComponent />
</Tooltip>;
```

```jsx
class MyComponent extends React.Component {
  render() {
    const { innerRef, ...props } = this.props;
    // Spread the props to the underlying DOM element.
    return (
      <div {...props} ref={innerRef}>
        Bin
      </div>
    );
  }
}

// Wrap MyComponent to forward the ref as expected by Tooltip
const WrappedMyComponent = React.forwardRef(function WrappedMyComponent(props, ref) {
  return <MyComponent {...props} innerRef={ref} />;
});

// ...

<Tooltip title="Delete">
  <WrappedMyComponent />
</Tooltip>;
```

--------------------------------

### Autocomplete Controlled States Example (React JSX)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/autocomplete/autocomplete.md

Demonstrates how to manage the 'value' and 'inputValue' states of the Autocomplete component independently using the `value`/`onChange` and `inputValue`/`onInputChange` props respectively.

```jsx
{{
  "demo": "ControllableStates.js"
}}
```

--------------------------------

### Collapsible Table Rows - React

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/table/table.md

Features expandable rows in a Material UI Table, allowing users to reveal more detailed information by clicking on a row. This example utilizes the `Collapse` component.

```jsx
import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

function createData(name, calories, fat, carbs, protein, history) {
  return {
    name,
    calories,
    fat,
    carbs,
    protein,
    history: history || [],
  };
}

function Row(props) {
  const { row } = props;
  const [open, setOpen] = React.useState(false);

  return (
    <React.Fragment>
      <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {row.name}
        </TableCell>
        <TableCell align="right">{row.calories}</TableCell>
        <TableCell align="right">{row.fat}</TableCell>
        <TableCell align="right">{row.carbs}</TableCell>
        <TableCell align="right">{row.protein}</TableCell>
      </TableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <Box sx={{ margin: 1 }}>
              <Typography variant="h6" gutterBottom component="div">
                History
              </Typography>
              <Table size="small" aria-label="purchases">
                <TableHead>
                  <TableRow>
                    <TableCell>Date</TableCell>
                    <TableCell>Customer</TableCell>
                    <TableCell align="right">Amount</TableCell>
                    <TableCell align="right">Total</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {row.history.map((historyRow) => (
                    <TableRow key={historyRow.date}>
                      <TableCell component="th" scope="row">
                        {historyRow.date}
                      </TableCell>
                      <TableCell>{historyRow.customerId}</TableCell>
                      <TableCell align="right">{historyRow.amount}</TableCell>
                      <TableCell align="right">
                        {Math.round(historyRow.amount * row.price)}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
}

Row.propTypes = {
  row: PropTypes.shape({
    name: PropTypes.string.isRequired,
    calories: PropTypes.number.isRequired,
    fat: PropTypes.number.isRequired,
    carbs: PropTypes.number.isRequired,
    protein: PropTypes.number.isRequired,
    history: PropTypes.arrayOf(
      PropTypes.shape({
        date: PropTypes.string.isRequired,
        customerId: PropTypes.string.isRequired,
        amount: PropTypes.number.isRequired,
      }),
    ).isRequired,
  }).isRequired,
};

const rows = [
  createData('Frozen yoghurt', 159, 6, 24, 4, [
    { date: '2020-01-05', customerId: '11091700', amount: 3 },
    { date: '2020-01-02', customerId: 'Anonymous', amount: 1 },
  ]),
  createData('Ice cream sandwich', 237, 9, 37, 4.3, [
    { date: '2020-01-01', customerId: '1048603', amount: 1 },
  ]),
  createData('Eclair', 262, 16, 24, 6, [
    { date: '2020-01-17', customerId: '11091700', amount: 1 },
    { date: '2020-01-12', customerId: 'Anonymous', amount: 1 },
  ]),
  createData('Cupcake', 305, 3, 67, 4.3, [
    { date: '2020-01-01', customerId: '1048603', amount: 1 },
  ]),
  createData('Gingerbread', 356, 16, 49, 3.9, [
    { date: '2020-01-11', customerId: '1067844', amount: 2 },
  ]),
];

export default function CollapsibleTable() {
  return (
    <TableContainer component={Paper}>
      <Table aria-label="collapsible table">
        <TableHead>
          <TableRow>
            <TableCell />
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <Row key={row.name} row={row} />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}
```

--------------------------------

### Custom Breakpoints with ThemeProvider (JavaScript)

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/grid/grid.md

Illustrates how to define and utilize custom breakpoints within the MUI theme. This allows for responsive design adjustments tailored to specific screen sizes like 'laptop', 'tablet', and 'mobile'.

```javascript
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { Grid } from '@mui/material';

function Demo() {
  return (
    <ThemeProvider
      theme={createTheme({
        breakpoints: {
          values: {
            laptop: 1024,
            tablet: 640,
            mobile: 0,
            desktop: 1280,
          },
        },
      })}
    >
      <Grid container spacing={{ mobile: 1, tablet: 2, laptop: 3 }}>
        {Array.from(Array(4)).map((_, index) => (
          <Grid key={index} size={{ mobile: 6, tablet: 4, laptop: 3 }}>
            <div>{index + 1}</div>
          </Grid>
        ))}
      </Grid>
    </ThemeProvider>
  );
}
```

--------------------------------

### Customizing React Switch Component - Material UI

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/switches/switches.md

Shows examples of customizing the appearance of the Material UI Switch component. Further customization details can be found in the Material UI overrides documentation.

```jsx
import Switch from '@mui/material/Switch';
import { styled } from '@mui/material/styles';

const IOSSwitch = styled((props) => (
  <Switch focusVisibleClassName="& .Mui-focusVisible" disableRipple {...props} />
)) underprops={({ theme }) => ({
  backgroundColor: theme.palette.mode === 'light' ? '#E0E0E0' : '#A0A0A0',
  width: 42,
  height: 26,
  padding: 0,
  '& .MuiSwitch-switchBase': {
    padding: 0,
    margin: 2,
    transitionDuration: '200ms',
    '&.MUS-checked': {
      transform: 'translateX(16px)',
      color: '#fff',
      '& + .MuiSwitch-track': {
        backgroundColor: theme.palette.mode === 'light' ? '#177ddc' : '#1890ff',
        opacity: 1,
        border: 0,
      },
      '&.Mui-disabled + .MuiSwitch-track': {
        backgroundColor: '#474747',
      },
    },
    '&.Mui-focusVisible .MuiSwitch-thumb': {
      color: '#33cf4d',
      border: '6px solid transparent',
    },
    '&.Mui-disabled .MuiSwitch-thumb': {
      color:
        theme.palette.mode === 'light'
          ? theme.palette.grey[100]
          : theme.palette.grey[600],
    },
  },
  '& .MuiSwitch-thumb': {
    boxSizing: 'border-box',
    width: 22,
    height: 22,
  },
  '& .MuiSwitch-track': {
    borderRadius: 26 / 2,
    backgroundColor: theme.palette.mode === 'light' ? '#E0E0E0' : '#727272',
    opacity: 1,
    transition: theme.transitions.create(['background-color', 'border'], {
      duration: 500,
    }),
  },
}))

function CustomizedSwitches() {
  return (
    <div>
      <FormControlLabel control={<IOSSwitch sx={{ m: 1 }} />} label="iOS style" />
    </div>
  );
}
```

--------------------------------

### Divider Accessibility - Purely Stylistic

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/dividers/dividers.md

Example of setting `aria-hidden="true"` on a Divider component when it's used purely for stylistic purposes. This prevents screen readers from announcing it.

```jsx
<Divider aria-hidden="true" />
```

--------------------------------

### React Slider: Customized Slider

Source: https://github.com/idprm/nextjs-demo/blob/main/src/app/(public)/documentation/components/ui/material-ui-components/slider/slider.md

Provides examples of advanced customization for the Slider component. This includes styling the track, thumb, and value label using the `sx` prop and overriding default styles.

```javascript
import Slider from '@mui/material/Slider';
import Box from '@mui/material/Box';

function CustomizedSlider() {
  return (
    <Box sx={{ width: 300 }}>
      <Slider
        sx={{
          color: 'success.main',
          '& .MuiSlider-track': {
            border: 'none',
          },
          '& .MuiSlider-thumb.Mui-focusVisible': {
            boxShadow: '0px 0px 0px 8px',
            backgroundColor: 'white',
            color: 'green',
          },
        }}
        aria-label="custom thumb label"
        defaultValue={30}
        valueLabelDisplay="auto"
        componentsProps={{
          thumb: {
            sx: {
              backgroundColor: 'primary.main',
              '&:hover': {
                boxShadow: '0px 0px 0px 8px rgba(68, 10, 100, 0.16)',
              },
            },
          },
        }}
      />
    </Box>
  );
}
```