Vel vs React

 #UserList
  @users: std::vector<User> = await fetchUsers()
  @filter = ""

  V g=md p=lg
    In placeholder="Search…" value=$filter
    List of=$users as=u
      Card -> click => open(u.id)
        H g=sm
          Avatar src=$u.avatar
          V
            T $u.name font=bold
            T $u.email fg=fgMuted 

 import { useState, useEffect } from "react";

export function UserList() {
  const [users, setUsers] = useState([]);
  const [filter, setFilter] = useState("");
  useEffect(() => { fetchUsers().then(setUsers); }, []);
  return (
    <div className="flex flex-col gap-4 p-6">
      <input
        className="rounded-md border px-3 py-2"
        placeholder="Search…"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      {users.map((u) => (
        <div
          key={u.id}
          onClick={() => open(u.id)}
          className="flex items-center gap-2 rounded-lg
                     border p-4 hover:bg-gray-50 cursor-pointer"
        >
          <img className="h-9 w-9 rounded-full" src={u.avatar} />
          <div className="flex flex-col">
            <span className="font-bold">{u.name}</span>
            <span className="text-gray-500">{u.email}</span>
          </div>
        </div>
      ))}
    </div>
  );
}