From b420c49cd63199d818579239b82d05b3a7bb78c0 Mon Sep 17 00:00:00 2001
From: Unknown Sentinel <63234449+Unknownsentinel193@users.noreply.github.com>
Date: Tue, 23 May 2023 02:24:55 +0530
Subject: [PATCH] Add Chakra Tag Component (#1052)

---
 pynecone/components/__init__.py             |  5 ++
 pynecone/components/datadisplay/__init__.py |  1 +
 pynecone/components/datadisplay/tag.py      | 79 +++++++++++++++++++++
 3 files changed, 85 insertions(+)
 create mode 100644 pynecone/components/datadisplay/tag.py

diff --git a/pynecone/components/__init__.py b/pynecone/components/__init__.py
index 7dfb7cd5e..268dedbb3 100644
--- a/pynecone/components/__init__.py
+++ b/pynecone/components/__init__.py
@@ -41,6 +41,11 @@ stat_group = StatGroup.create
 stat_help_text = StatHelpText.create
 stat_label = StatLabel.create
 stat_number = StatNumber.create
+tag = Tag.create
+tag_label = TagLabel.create
+tag_left_icon = TagLeftIcon.create
+tag_right_icon = TagRightIcon.create
+tag_close_button = TagCloseButton.create
 table = Table.create
 table_caption = TableCaption.create
 table_container = TableContainer.create
diff --git a/pynecone/components/datadisplay/__init__.py b/pynecone/components/datadisplay/__init__.py
index 33ec42815..3d3a15545 100644
--- a/pynecone/components/datadisplay/__init__.py
+++ b/pynecone/components/datadisplay/__init__.py
@@ -8,3 +8,4 @@ from .keyboard_key import KeyboardKey
 from .list import List, ListItem, OrderedList, UnorderedList
 from .stat import Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber
 from .table import Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tr
+from .tag import Tag, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon
diff --git a/pynecone/components/datadisplay/tag.py b/pynecone/components/datadisplay/tag.py
new file mode 100644
index 000000000..f5a24b2d6
--- /dev/null
+++ b/pynecone/components/datadisplay/tag.py
@@ -0,0 +1,79 @@
+"""Chakra Tag Component."""
+from typing import Optional
+
+from pynecone.components.component import Component
+from pynecone.components.libs.chakra import ChakraComponent
+from pynecone.vars import Var
+
+
+class TagLabel(ChakraComponent):
+    """The label of the tag."""
+
+    tag = "TagLabel"
+
+
+class TagLeftIcon(ChakraComponent):
+    """The left icon of the tag."""
+
+    tag = "TagLeftIcon"
+
+
+class TagRightIcon(ChakraComponent):
+    """The right icon of the tag."""
+
+    tag = "TagRightIcon"
+
+
+class TagCloseButton(ChakraComponent):
+    """The close button of the tag."""
+
+    tag = "TagCloseButton"
+
+
+class Tag(ChakraComponent):
+    """The parent wrapper that provides context for its children."""
+
+    tag = "Tag"
+
+    # The visual color appearance of the tag.
+    # options: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" |
+    #  "cyan" | "purple" | "pink"
+    # default: "gray"
+    color_scheme: Var[str]
+
+    # The size of the tag
+    # options: "sm" | "md" | "lg"
+    # default: "md"
+    size: Var[str]
+
+    # The variant of the tag
+    # options: "solid" | "subtle" | "outline"
+    # default: "solid"
+    variant: Var[str]
+
+    @classmethod
+    def create(
+        cls,
+        label: Component,
+        *,
+        left_icon: Optional[Component] = None,
+        right_icon: Optional[Component] = None,
+        close_button: Optional[Component] = None,
+        **props
+    ) -> Component:
+        """Creates a Chakra Tag with a label and optionally left_icon, right_icon, and close_button, and returns it.
+
+        Args:
+            label (Component): The label of the Tag that will be created.
+            left_icon (Optional[Component]): Should be a pc.TagLeftIcon instance.
+            right_icon (Optional[Component]): Should be a pc.TagRightIcon instance.
+            close_button (Optional[Component]): Should be a pc.TagCloseButton instance.
+            props: The properties to be passed to the component.
+
+        Returns:
+            The `create()` method returns a Tag object.
+        """
+        children = [
+            x for x in (left_icon, label, right_icon, close_button) if x is not None
+        ]
+        return super().create(*children, **props)