From 2903d7a7ad6a89a684a53091472a84538be68ce4 Mon Sep 17 00:00:00 2001
From: TaiJuWu <33004323+TaiJuWu@users.noreply.github.com>
Date: Sat, 27 May 2023 02:40:42 +0800
Subject: [PATCH] feature: support Hightlight component (#1079)

---
 pynecone/components/__init__.py             |  1 +
 pynecone/components/typography/__init__.py  |  1 +
 pynecone/components/typography/highlight.py | 12 ++++++++++--
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/pynecone/components/__init__.py b/pynecone/components/__init__.py
index 7a56fe4a85..f1cbb03357 100644
--- a/pynecone/components/__init__.py
+++ b/pynecone/components/__init__.py
@@ -214,6 +214,7 @@
 popover_trigger = PopoverTrigger.create
 tooltip = Tooltip.create
 heading = Heading.create
+highlight = Highlight.create
 markdown = Markdown.create
 span = Span.create
 text = Text.create
diff --git a/pynecone/components/typography/__init__.py b/pynecone/components/typography/__init__.py
index 6db3cc1531..07f7166ba4 100644
--- a/pynecone/components/typography/__init__.py
+++ b/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
diff --git a/pynecone/components/typography/highlight.py b/pynecone/components/typography/highlight.py
index e23658998c..961c6744e4 100644
--- a/pynecone/components/typography/highlight.py
+++ b/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)