Highlight

import { Highlight } from "@chakra-ui/react"

export const HighlightBasic = () => {
  return (
    <Highlight
      query="spotlight"
      styles={{ px: "0.5", bg: "orange.subtle", color: "orange.fg" }}
    >
      With the Highlight component, you can spotlight words.
    </Highlight>
  )
}

import { Heading, Highlight } from "@chakra-ui/react"

export const HighlightMultiple = () => {
  return (
    <Heading lineHeight="tall">
      <Highlight
        query={["spotlight", "emphasize", "Accentuate"]}
        styles={{ px: "0.5", bg: "teal.muted" }}
      >
        With the Highlight component, you can spotlight, emphasize and
        accentuate words.
      </Highlight>
    </Heading>
  )
}

import { Highlight } from "@chakra-ui/react"

export const HighlightWithCustomStyle = () => {
  return (
    <Highlight query="component" styles={{ fontWeight: "semibold" }}>
      With the Highlight component, you can spotlight words.
    </Highlight>
  )
}

import { Highlight, Stack, Text } from "@chakra-ui/react"

const query = "spot"
const results = ["Spotlight bulb", "Spot cleaner", "Spot ceiling"]

export const HighlightSearchQuery = () => {
  return (
    <Stack gap="6">
      <Text>Search result for: spot</Text>
      <Stack gap="1">
        {results.map((item) => (
          <p key={item}>
            <Highlight
              ignoreCase
              query={query}
              styles={{ fontWeight: "semibold" }}
            >
              {item}
            </Highlight>
          </p>
        ))}
      </Stack>
    </Stack>
  )
}