split out separate Your items header

This commit is contained in:
Emi Matchu 2020-10-23 23:00:53 -07:00
parent 53d399f46b
commit 5111ebcbfe

View file

@ -5,7 +5,7 @@ import { useParams } from "react-router-dom";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import HangerSpinner from "./components/HangerSpinner"; import HangerSpinner from "./components/HangerSpinner";
import { Heading1 } from "./util"; import { Heading1, Heading2 } from "./util";
import ItemCard, { import ItemCard, {
ItemBadgeList, ItemBadgeList,
ItemCardList, ItemCardList,
@ -28,6 +28,7 @@ function UserItemsPage() {
user(id: $userId) { user(id: $userId) {
id id
username username
contactNeopetsUsername
itemsTheyOwn { itemsTheyOwn {
id id
@ -106,9 +107,12 @@ function UserItemsPage() {
<Box float="right"> <Box float="right">
<WIPCallout details="These lists are simplified and read-only for now. Full power coming soon!" /> <WIPCallout details="These lists are simplified and read-only for now. Full power coming soon!" />
</Box> </Box>
<Heading1 marginBottom="6"> <Heading1 marginBottom="4">
{isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`} {isCurrentUser ? "Your items" : `${data.user.username}'s items`}
</Heading1> </Heading1>
<Heading2 marginBottom="6">
{isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
</Heading2>
<ItemCardList> <ItemCardList>
{sortedItemsTheyOwn.map((item) => ( {sortedItemsTheyOwn.map((item) => (
<ItemCard <ItemCard
@ -124,9 +128,9 @@ function UserItemsPage() {
))} ))}
</ItemCardList> </ItemCardList>
<Heading1 marginBottom="6" marginTop="8"> <Heading2 marginBottom="6" marginTop="8">
{isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`} {isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`}
</Heading1> </Heading2>
<ItemCardList> <ItemCardList>
{sortedItemsTheyWant.map((item) => ( {sortedItemsTheyWant.map((item) => (
<ItemCard <ItemCard