diff --git a/src/app/UserOutfitsPage.js b/src/app/UserOutfitsPage.js
index 608ef78..3e75a24 100644
--- a/src/app/UserOutfitsPage.js
+++ b/src/app/UserOutfitsPage.js
@@ -44,6 +44,14 @@ function UserOutfitsPageContent() {
svgUrl
imageUrl(size: $size)
}
+ species {
+ id
+ name
+ }
+ color {
+ id
+ name
+ }
...PetAppearanceForGetVisibleLayers
}
itemAppearances {
@@ -55,6 +63,10 @@ function UserOutfitsPageContent() {
}
...ItemAppearanceForGetVisibleLayers
}
+ wornItems {
+ id
+ name
+ }
}
}
}
@@ -96,11 +108,38 @@ function UserOutfitsPageContent() {
}
function OutfitCard({ outfit }) {
- const thumbnailUrl = buildOutfitThumbnailUrl(
- outfit.petAppearance,
- outfit.itemAppearances
+ const image = (
+
);
+ return (
+
+
+
+ );
+}
+
+function OutfitCardLayout({ image, caption }) {
const { brightBackground } = useCommonStyles();
return (
@@ -114,26 +153,17 @@ function OutfitCard({ outfit }) {
width="calc(150px + 2em)"
backgroundColor={brightBackground}
transition="all 0.2s"
- as={Link}
- to={`/outfits/${outfit.id}`}
- _hover={{ transform: `scale(1.05)` }}
- _focus={{
- transform: `scale(1.05)`,
- boxShadow: "outline",
- outline: "none",
- }}
>
- {outfit.name}
+ >
+ {image}
+
+ {caption}
);
}