Highlight

import { Highlight } from '@kivora/react';

<Highlight highlight="react">Learn React today</Highlight>

<Highlight highlight={["react", "today"]}>
  Learn React today
</Highlight>

<Highlight highlight="important" color="bg-blue-200">
  This is important information
</Highlight>

<Highlight highlight="error" color="bg-red-300/50">
  Error: Something went wrong
</Highlight>

const searchTerm = "kivora";

<Highlight highlight={searchTerm}>
  Kivora is a React component library
</Highlight>

<Highlight highlight={["fast", "modern", "flexible"]}>
  Kivora is a fast, modern, and flexible component library
</Highlight>

<Highlight highlight="warning" color="bg-orange-200">
  Warning: This action cannot be undone
</Highlight>

<Highlight highlight={["props", "component"]}>
  Pass props to the component to customize its behavior
</Highlight>

<Highlight 
  highlight="featured" 
  color="bg-purple-300" 
  className="text-lg font-medium"
>
  This is a featured item
</Highlight>

const query = "design";
const text = "Our design system provides a consistent design language across all components.";

<Highlight highlight={query}>
  {text}
</Highlight>

<Highlight highlight="react">
  Learn REACT, React, and react today
</Highlight>
// Highlights all variations: REACT, React, react

<Highlight highlight="$price">
  The $price is $99.99
</Highlight>

<Highlight highlight="">Normal text</Highlight>
<Highlight highlight={[]}>Normal text</Highlight>

export interface HighlightProps {
  children: string;
  highlight: string | string[];
  color?: string;
  className?: string;
}