Menugroup.res.mjs
1// Generated by ReScript, PLEASE EDIT WITH CARE
2
3import * as Log from "../utils/Log.res.mjs";
4import * as Login from "./Login.res.mjs";
5import * as State from "../State.res.mjs";
6import * as Core__Option from "@rescript/core/lib/es6/src/Core__Option.res.mjs";
7import * as LucidePreact from "lucide-preact";
8import * as Signals from "@preact/signals";
9import * as JsxRuntime from "preact/jsx-runtime";
10import * as Menu from "@base-ui/react/menu";
11
12import logo from '../static/logo.png?inline';
13;
14
15let isOpen = Signals.signal(false);
16
17let loggedIn = Signals.computed(() => Core__Option.map(State.user.value, data => data.registered));
18
19function Menugroup(props) {
20 return JsxRuntime.jsx(JsxRuntime.Fragment, {
21 children: JsxRuntime.jsxs("div", {
22 children: [
23 JsxRuntime.jsx("div", {
24 children: JsxRuntime.jsx("img", {
25 className: "w-28",
26 src: logo
27 }),
28 className: "pr-2"
29 }),
30 JsxRuntime.jsxs("div", {
31 children: [
32 Core__Option.getOr(loggedIn.value, false) ? null : JsxRuntime.jsx("div", {
33 children: "!",
34 className: "absolute top-0 right-0 w-4 h-4 rounded-full bg-[var(--color-red)] z-10 translate-x-1/2 -translate-y-1/2 text-xs text-white font-bold text-center"
35 }),
36 JsxRuntime.jsxs(Menu.Menu.Root, {
37 children: [
38 JsxRuntime.jsx(Menu.Menu.Trigger, {
39 children: JsxRuntime.jsx(LucidePreact.Menu, {
40 size: 20,
41 strokeWidth: 3,
42 className: "text-ui-2 m-auto"
43 })
44 }),
45 JsxRuntime.jsx(Menu.Menu.Portal, {
46 children: JsxRuntime.jsx(Menu.Menu.Positioner, {
47 sideOffset: 14,
48 className: "outline-none",
49 children: JsxRuntime.jsxs(Menu.Menu.Popup, {
50 children: [
51 Core__Option.getOr(loggedIn.value, false) ? JsxRuntime.jsx(Menu.Menu.LinkItem, {
52 href: `/u/` + Core__Option.getOr(Core__Option.map(State.user.value, data => data.id), ""),
53 className: "w-full rounded-sm py-1 px-14 hover:bg-blue-100 flex flex-row items-center justify-center",
54 children: Core__Option.getOr(Core__Option.map(State.user.value, data => "@" + data.handle + "'s account"), "Account")
55 }) : JsxRuntime.jsx(Menu.Menu.Item, {
56 onClick: _evt => {
57 Log.debug("got login button", undefined);
58 State.content.value = JsxRuntime.jsx(Login.make, {});
59 },
60 className: "w-full rounded-sm px-2 py-1 outline-2 outline-offset-2 outline-solid outline-orange hover:bg-[var(--color-orange)] active:bg-[var(--color-orange)] hover:text-white active:text-white focus:bg-(--color-orange) focus:text-white text-center",
61 children: "Login or Sign up"
62 }),
63 JsxRuntime.jsx(Menu.Menu.LinkItem, {
64 href: "/about",
65 className: "rounded-sm hover:bg-blue-100 py-1 mt-2 w-full flex flex-row items-center justify-center hover:outline-none active:outline-(--color-blue) mx-auto",
66 children: "About"
67 }),
68 Core__Option.getOr(loggedIn.value, false) ? null : JsxRuntime.jsxs("div", {
69 children: [
70 JsxRuntime.jsx("div", {
71 children: JsxRuntime.jsx(LucidePreact.OctagonAlert, {
72 size: 24,
73 color: "var(--color-red)",
74 strokeWidth: 3,
75 className: "pr-1"
76 })
77 }),
78 JsxRuntime.jsx("div", {
79 children: "You'll lose your work after 30 days if you don't log in",
80 className: "text-xs text-pretty"
81 })
82 ],
83 className: "flex flex-column mt-5 items-center"
84 })
85 ],
86 className: "popup bg-paper shadow-md p-2 rounded-sm py-2 pt-4 outline-none"
87 })
88 }),
89 className: "max-w-full md:w-fit md:max-w-[20rem] md:min-w-[10rem]"
90 })
91 ]
92 })
93 ],
94 className: "relative bg-paper px-2 pt-1 rounded-sm flex-1",
95 onClick: _evt => {
96 isOpen.value = !isOpen.value;
97 }
98 })
99 ],
100 className: "fixed top-2 right-2 flex flex-row items-center z-1 mr-2"
101 })
102 });
103}
104
105let make = Menugroup;
106
107export {
108 isOpen,
109 loggedIn,
110 make,
111}
112/* Not a pure module */
