Add KeyboardKey, AspectRatio Components (#685)

CONTRIBUTING.md

@@ -91,7 +91,7 @@ poetry run ruff check .
 poetry run pyright pynecone tests
 find pynecone tests -name "*.py" -not -path pynecone/pc.py | xargs poetry run darglint
 ```
-Finally run `black` to format your code.
+Finally, run `black` to format your code.
 ``` bash
 poetry run black pynecone tests
 ```

pynecone/components/__init__.py

@@ -203,3 +203,5 @@ markdown = Markdown.create
 span = Span.create
 text = Text.create
 script = ScriptTag.create
+aspect_ratio = AspectRatio.create
+kbd = KeyboardKey.create

pynecone/components/datadisplay/__init__.py

@@ -4,6 +4,7 @@ from .badge import Badge
 from .code import Code, CodeBlock
 from .datatable import DataTable
 from .divider import Divider
+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

pynecone/components/datadisplay/keyboard_key.py

@@ -0,0 +1,9 @@
+"""A Keyboard Key Component."""
+
+from pynecone.components.libs.chakra import ChakraComponent
+
+
+class KeyboardKey(ChakraComponent):
+    """Display a keyboard key text."""
+
+    tag = "Kbd"

pynecone/components/layout/__init__.py

@@ -1,5 +1,6 @@
 """Convenience functions to define layout components."""
 
+from .aspect_ratio import AspectRatio
 from .box import Box
 from .center import Center, Circle, Square
 from .cond import Cond, cond

pynecone/components/layout/aspect_ratio.py

@@ -0,0 +1,13 @@
+"""A AspectRatio component."""
+
+from pynecone.components.libs.chakra import ChakraComponent
+from pynecone.var import Var
+
+
+class AspectRatio(ChakraComponent):
+    """AspectRatio component is used to embed responsive videos and maps, etc."""
+
+    tag = "AspectRatio"
+
+    # The aspect ratio of the Box
+    ratio: Var[float]