Code Comparison Demo

1import { CodeComparison } from "@/registry/magicui/code-comparison"
2 
3const beforeCode = `import { NextRequest } from 'next/server';
4 
5export const middleware = async (req: NextRequest) => {
6  let user = undefined;
7  let team = undefined;
8  const token = req.headers.get('token'); 
9 
10  if(req.nextUrl.pathname.startsWith('/auth')) {
11    user = await getUserByToken(token);
12 
13    if(!user) {
14      return NextResponse.redirect('/login');
15    }
16  }
17 
18  if(req.nextUrl.pathname.startsWith('/team')) {
19    user = await getUserByToken(token);
20 
21    if(!user) {
22      return NextResponse.redirect('/login');
23    }
24 
25    const slug = req.nextUrl.query.slug;
26    team = await getTeamBySlug(slug); // [!code highlight]
27 
28    if(!team) { // [!code highlight]
29      return NextResponse.redirect('/'); // [!code highlight]
30    } // [!code highlight]
31  } // [!code highlight]
32 
33  return NextResponse.next(); // [!code highlight]
34}
35 
36export const config = {
37  matcher: ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'], // [!code highlight]
38};`
39 
40const afterCode = `import { createMiddleware, type MiddlewareFunctionProps } from '@app/(auth)/auth/_middleware';
41import { auth } from '@/app/(auth)/auth/_middleware'; // [!code --]
42import { auth } from '@/app/(auth)/auth/_middleware'; // [!code ++]
43import { team } from '@/app/(team)/team/_middleware';
44 
45const middlewares = {
46  '/auth{/:path?}': auth,
47  '/team{/:slug?}': [ auth, team ],
48};
49 
50export const middleware = createMiddleware(middlewares); // [!code focus]
51 
52export const config = {
53  matcher: ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'],
54};`
55 
56export default function CodeComparisonDemo() {
57  return (
58    <CodeComparison
59      beforeCode={beforeCode}
60      afterCode={afterCode}
61      language="typescript"
62      filename="middleware.ts"
63      lightTheme="github-light"
64      darkTheme="github-dark"
65      highlightColor="rgba(101, 117, 133, 0.16)"
66    />
67  )
68}