feat(dashboard): Steam avatar and a banner from the most played game

src/components/SteamAvatar.jsx

@@ -0,0 +1,21 @@
+import {useState} from 'react';
+import {UserRound} from 'lucide-react';
+import {cn} from '@/lib/utils';
+
+/**
+ * The Steam avatar, or the default user icon without one or when it does not load.
+ *
+ * @param className for the avatar image
+ * @param iconClassName for the default icon, which should be smaller than the image
+ */
+export default function SteamAvatar({url, className, iconClassName}) {
+    const [failedUrl, setFailedUrl] = useState(null);
+
+    if (!url || failedUrl === url) {
+        return <UserRound className={cn('size-5', iconClassName)}/>;
+    }
+    return (
+        <img src={url} alt="" onError={() => setFailedUrl(url)}
+             className={cn('size-7 rounded-full object-cover', className)}/>
+    );
+}