Code Comparison
A component which compares two code snippets.
user-service.ts
interface User {
name: string;
age: number;
}
function getUser(id: number): User | null {
const user = db.users.find(u => u.id === id);
if (!user) {
return null;
}
return user;
}user-service.ts
interface User {
name: string;
age: number;
email: string;
role: "admin" | "user";
}
async function getUser(id: number): Promise<User> {
const user = await db.users.findUnique({
where: { id },
});
if (!user) {
throw new UserNotFoundError(id);
}
return user;
}fetch_data.py
def fetch_data(url):
response = requests.get(url)
data = response.json()
result = []
for item in data:
if item["status"] == "active":
result.append(item["name"])
return resultfetch_data.py
async def fetch_data(url: str) -> list[str]:
async with httpx.AsyncClient() as client:
response = await client.get(url)
response.raise_for_status()
data = response.json()
return [
item["name"]
for item in data
if item["status"] == "active"
]layout.css
.container {
display: block;
width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
.card {
background-color: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}layout.css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 1200px;
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 2rem);
gap: 1.5rem;
}
.card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}ProductList.tsx
function ProductList() {
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch("/api/products")
.then(res => res.json())
.then(data => {
setProducts(data);
setLoading(false);
});
}, []);
if (loading) return <p>Loading...</p>;
return (
<ul>
{products.map(p => (
<li key={p.id}>{p.name} - ${p.price}</li>
))}
</ul>
);
}ProductList.tsx
function ProductList() {
const { data: products, isLoading } = useSuspenseQuery({
queryKey: ["products"],
queryFn: () => fetch("/api/products").then(r => r.json()),
});
if (isLoading) return <ProductSkeleton />;
return (
<ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{products.map(p => (
<ProductCard key={p.id} product={p} />
))}
</ul>
);
}