# Code Comparison

A component which compares two code snippets.

## Preview

PreviewCode

```javascript
import { NextRequest } from 'next/server';

export const middleware = async (req: NextRequest) => {
  let user = undefined;
  let team = undefined;
  const token = req.headers.get('token');

if(req.nextUrl.pathname.startsWith('/auth')) {
    user = await getUserByToken(token);

if(!user) {
      return NextResponse.redirect('/login');
    }
  }

if(req.nextUrl.pathname.startsWith('/team')) {
    user = await getUserByToken(token);

if(!user) {
      return NextResponse.redirect('/login');
    }

const slug = req.nextUrl.query.slug;
    team = await getTeamBySlug(slug);

if(!team) {
      return NextResponse.redirect('/');
    }
  }

return NextResponse.next();
}

export const config = {
  matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'],
};
```

```javascript
import { createMiddleware, type MiddlewareFunctionProps } from '@app/(auth)/auth/_middleware';
import { auth } from '@/app/(auth)/auth/_middleware';
import { auth } from '@/app/(auth)/auth/_middleware';
import { team } from '@/app/(team)/team/_middleware';

const middlewares = {
  '/auth{/:path?}': auth,
  '/team{/:slug?}': [ auth, team ],
};

export const middleware = createMiddleware(middlewares);

export const config = {
  matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'],
};
```

## Installation

### CLI

```
```

### Manual

```
```

## Usage

```
```

## Props

| Prop                | Type   | Default  | Description                                                |
|---------------------|--------|----------|------------------------------------------------------------|
| `className`         | `string` | `-`     | The class name to be applied to the component              |
| `beforeCode`       | `string` | `-`     | The code snippet to display in the "before" section      |
| `afterCode`        | `string` | `-`     | The code snippet to display in the "after" section       |
| `language`         | `string` | `-`     | The language of the code snippets (e.g., "typescript")   |
| `filename`         | `string` | `-`     | The filename to display for the code snippets              |
| `lightTheme`       | `string` | `github-light` | The theme to use for light mode                               |
| `darkTheme`        | `string` | `github-dark`  | The theme to use for dark mode                                |
| `highlightColor`   | `string` | `rgba(101, 117, 133, 0.16)` | The color to use for highlighting the code snippets         |