A tool that renders differently based on User Role Name

SuperSecretTool.jsx

import React from 'react'
import {Box, Card, Container, Text} from '@sanity/ui'

import {useCurrentUser} from './useCurrentUser'

export default function SuperSecretTool() {
  const {roles} = useCurrentUser()
  const isAdmin = roles?.length ? roles.find((role) => role?.name === 'administrator') : false

  if (!isAdmin) {
    return (
      <Box padding={5}>
        <Container>
          <Card tone="critical" padding={5} radius={3} shadow={1}>
            <Text>Permission Denied</Text>
          </Card>
        </Container>
      </Box>
    )
  }

  return (
    <Box padding={5}>
      <Container>
        <Card tone="positive" padding={5} radius={3} shadow={1}>
          <Text>Only Admins should see this!</Text>
        </Card>
      </Container>
    </Box>
  )
}