Highlight

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

const Demo = () => {
  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"

const Demo = () => {
  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"

const Demo = () => {
  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"]

const Demo = () => {
  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>
  )
}

"use client"

import { Heading, Mark, useHighlight } from "@chakra-ui/react"
import { Fragment } from "react"

const Demo = () => {
  const chunks = useHighlight({
    text: "Endless scale, powered by real humans.",
    query: ["endless", "real humans."],
  })

  return (
    <Heading size="2xl" maxW="20ch">
      {chunks.map((chunk, index) => {
        return chunk.match ? (
          <Mark
            key={index}
            css={{
              fontStyle: "italic",
              color: "red.500",
              position: "relative",
            }}
          >
            {chunk.text}
            <img
              style={{ position: "absolute", left: 0 }}
              src="https://uploads-ssl.webflow.com/5fac11c3554384e2baf6481c/61c4dc7572d22f05ba26fd34_hero-underline.svg"
              loading="lazy"
              alt=""
            />
          </Mark>
        ) : (
          <Fragment key={index}>{chunk.text}</Fragment>
        )
      })}
    </Heading>
  )
}