Components
Starting preview...
A component which compares two code snippets.
npx shadcn@latest add https://21st.dev/r/dillionverma/code-comparisonimport { CodeComparison } from "@/components/ui/code-comparison"
const beforeCode = `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+).*)'],
};`
const afterCode = `import { createMiddleware, type MiddlewareFunctionProps } 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+).*)'],
};`
export function CodeComparisonDemo() {
return (
<CodeComparison
beforeCode={beforeCode}
afterCode={afterCode}
language="typescript"
filename="middleware.ts"
lightTheme="github-light"
darkTheme="github-dark"
/>
)
}