1 files changed, 72 insertions, 0 deletions
diff --git a/examples/gtk3/js/popover/app.tsx b/examples/gtk3/js/popover/app.tsx
new file mode 100644
index 0000000..5386b66
--- /dev/null
+++ b/examples/gtk3/js/popover/app.tsx
@@ -0,0 +1,72 @@
+import { App, Astal, Gtk } from "astal/gtk3"
+import { Variable } from "astal"
+import Popover from "./Popover"
+import Popover2 from "./Popover2"
+const { TOP, RIGHT, LEFT } = Astal.WindowAnchor
+
+const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis semper risus."
+
+App.start({
+    instanceName: "popup-example",
+    css: `
+        .popup {
+            background-color: @theme_bg_color;
+            box-shadow: 2px 3px 7px 0 rgba(0,0,0,0.4);
+            border-radius: 12px;
+            padding: 12px;
+        }
+    `,
+    main() {
+        const visible1 = Variable(false);
+        const visible2 = Variable(false);
+
+        const _popover1 = <Popover
+            className="Popup"
+            onClose={() => visible1.set(false)}
+            visible={visible1()}
+            marginTop={36}
+            marginRight={60}
+            valign={Gtk.Align.START}
+            halign={Gtk.Align.END}
+        >
+            <box className="popup" vertical>
+                {/* maxWidthChars is needed to make wrap work */}
+                <label label={lorem} wrap maxWidthChars={8} />
+                <button onClicked={() => visible1.set(false)}>
+                    Click me to close the popup
+                </button>
+            </box>
+        </Popover>
+
+
+        const _popover2 = <Popover2
+            className="Popup"
+            onClose={() => visible2.set(false)}
+            visible={visible2()}
+        >
+            <box className="popup" vertical>
+                {/* maxWidthChars is needed, wrap will work as intended */}
+                <label label={lorem} wrap />
+                <button onClicked={() => visible2.set(false)}>
+                    Click me to close the popup
+                </button>
+            </box>
+        </Popover2>
+
+        return (
+            <window
+                anchor={TOP | LEFT | RIGHT}
+                exclusivity={Astal.Exclusivity.EXCLUSIVE}
+            >
+                <box halign={Gtk.Align.END}>
+                    <button onClicked={() => visible2.set(true)} halign={Gtk.Align.END}>
+                        Click to open popover2
+                    </button>
+                    <button onClicked={() => visible1.set(true)} halign={Gtk.Align.END}>
+                        Click to open popover
+                    </button>
+                </box>
+            </window>
+        )
+    },
+})