feature: support Hightlight component (#1079)

pynecone/components/__init__.py

@@ -214,6 +214,7 @@ popover_header = PopoverHeader.create
 popover_trigger = PopoverTrigger.create
 tooltip = Tooltip.create
 heading = Heading.create
+highlight = Highlight.create
 markdown = Markdown.create
 span = Span.create
 text = Text.create

pynecone/components/typography/__init__.py

@@ -3,6 +3,7 @@
 from pynecone.components.component import Component
 
 from .heading import Heading
+from .highlight import Highlight
 from .markdown import Markdown
 from .span import Span
 from .text import Text

pynecone/components/typography/highlight.py

@@ -1,9 +1,10 @@
-"""A heading component."""
+"""A highlight component."""
 
 from typing import List
 
 from pynecone.components.libs.chakra import ChakraComponent
-from pynecone.vars import Var
+from pynecone.components.tags import Tag
+from pynecone.vars import Dict, Var
 
 
 class Highlight(ChakraComponent):
@@ -13,3 +14,10 @@ class Highlight(ChakraComponent):
 
     # A query for the text to highlight. Can be a string or a list of strings.
     query: Var[List[str]]
+
+    # The style of the content.
+    # Note: styles and style are different prop.
+    styles: Var[Dict] = {"px": "2", "py": "1", "rounded": "full", "bg": "teal.100"}  # type: ignore
+
+    def _render(self) -> Tag:
+        return super()._render().add_props(styles=self.style)