Theme

Code Block 3 - Split Comparison

Pro

A split-pane code comparison component for showing before and after snippets, API migrations, or competing implementations.

Implementation comparison

Compare two approaches side by side

REST endpoint

Several manual response branches

api/users.ts

export async function GET(request: Request) {
  const url = new URL(request.url);
  const teamId = url.searchParams.get("teamId");

  if (!teamId) {
    return Response.json({ error: "Missing teamId" }, { status: 400 });
  }

  const users = await db.user.findMany({ where: { teamId } });

  return Response.json({ users });
}

Typed action

Validated input with one return shape

users.action.ts

const input = z.object({
  teamId: z.string().min(1),
});

export const listUsers = action(input, async ({ teamId }) => {
  const users = await db.user.findMany({ where: { teamId } });

  return { users };
});

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.