# Token display

In various places over our application we will need to display one or more NFTs. To simplify, we'll use the same but customisable component based on Material-UI Card component.

Let's create a `components/Token.tsx` file. It will import the following: 

```tsx
import React from "react"
import Card from "@mui/material/Card"
import CardActions from "@mui/material/CardActions"
import CardContent from "@mui/material/CardContent"
import CardMedia from "@mui/material/CardMedia"
import { Grid } from "@mui/material"
import { useTzombiesContext } from "./providers/TzombiesProvider"
import { useMetadataContext } from "./providers/MetadataProvider"
```

## TokenContent

This component will be reused, it displays the Card content with the image according to the token, and a customizable `extra` field. 

```tsx
const TokenContent = ({
  id,
  extra,
}: {
  id: number
  extra?: React.ReactNode
}) => {
  const { tokenInfo } = useTzombiesContext()
  const { ipfsUriToGateway } = useMetadataContext()
  if (!tokenInfo.has(id)) return <React.Fragment />
  return (
    <>
      <CardMedia
        component="img"
        height="200"
        image={ipfsUriToGateway(tokenInfo.get(id)?.displayUri ?? "")}
      />
      <CardContent>
        {tokenInfo.get(id)?.name}
        {extra}
      </CardContent>
    </>
  )
}
```

## Token

The Card itself will be defined as follows. Actions is also a customisable action set:&#x20;

```tsx
interface TokenProps {
  id: number
  actions?: React.ReactNode
  extra?: React.ReactNode
}

const Token = ({ id, actions, extra }: TokenProps) => {
  return (
    <Card sx={{ maxWidth: 200 }}>
      <TokenContent id={id} extra={extra} />
      <CardActions>{actions}</CardActions>
    </Card>
  )
}
```

## TokenList

To display a list of tokens, we create this component using a Grid:

```tsx
interface TokenListProps {
  tokens: number[]
  actions: (id: number) => React.ReactNode
  onClick?: (id: number) => void
  extra?: (id: number) => React.ReactNode
}

const TokenList = ({ tokens, actions, extra }: TokenListProps) => (
  <Grid container spacing={2}>
    {tokens.map((id) => (
      <Grid item key={id}>
        <Token
          id={id}
          actions={actions?.(id)}
          extra={extra?.(id)}
        />
      </Grid>
    ))}
  </Grid>
)
```

## Export

Our token components are now ready to be reused:&#x20;

```tsx
export { Token, TokenList, TokenContent }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://superlouis.gitbook.io/tzombies/front-end/token-display.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.