import React from "react";
import {
AspectRatio,
Badge,
Box,
Skeleton,
VStack,
useColorModeValue,
} from "@chakra-ui/core";
import { ExternalLinkIcon } from "@chakra-ui/icons";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import { useParams } from "react-router-dom";
import {
ItemBadgeList,
ItemThumbnail,
NcBadge,
NpBadge,
} from "./components/ItemCard";
import { Heading1, usePageTitle } from "./util";
import OutfitPreview from "./components/OutfitPreview";
function ItemPage() {
const { itemId } = useParams();
return (
);
}
function ItemPageHeader({ itemId }) {
const { error, data } = useQuery(
gql`
query ItemPage($itemId: ID!) {
item(id: $itemId) {
id
name
isNc
thumbnailUrl
}
}
`,
{ variables: { itemId }, returnPartialData: true }
);
usePageTitle(data?.item?.name);
if (error) {
return {error.message};
}
const item = data?.item;
return (
{item?.name || "Item name here"}
);
}
function ItemPageBadges({ item }) {
const searchBadgesAreLoaded = item?.name != null && item?.isNc != null;
return (
{item?.isNc ? : }
Old DTI
Jellyneo
{!item?.isNc && (
Shop Wiz
)}
{!item?.isNc && (
Super Wiz
)}
{!item?.isNc && (
Trades
)}
{!item?.isNc && (
Auctions
)}
);
}
function LinkBadge({ children, href }) {
return (
{children}
);
}
function ItemPageOutfitPreview({ itemId }) {
const borderColor = useColorModeValue("green.700", "green.400");
return (
);
}
export default ItemPage;