feat: start of avatars

packages/website-ue/src/components/AvatarCard/index.css

@@ -0,0 +1,19 @@
+.avatar-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .avatar-image {
+    width: 100%;
+    aspect-ratio: 7 / 8;
+
+    background-size: cover;
+    background-position: center;
+  }
+
+  .avatar-label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

packages/website-ue/src/components/AvatarCard/index.tsx

@@ -0,0 +1,19 @@
+import type { Avatar } from "../../protos/avatar";
+import { Text } from "../Text";
+import "./index.css";
+
+interface Props {
+  avatar: Avatar;
+}
+
+export function AvatarCard({ avatar }: Props) {
+  return (
+    <div className="avatar-card">
+      <div
+        className="avatar-image"
+        style={{ backgroundImage: `url(/api/avatars/${avatar.name}.webp)` }}
+      />
+      <Text className="avatar-label">{avatar.name}</Text>
+    </div>
+  );
+}