create-weave-frontend-app 0.1.0

package/template/+nextjs+azure-web-pubsub/components/room-components/help/help-tools.tsx

@@ -0,0 +1,89 @@
+import {
+  Brush,
+  Frame,
+  ImagePlus,
+  MousePointer,
+  PenTool,
+  Square,
+  SwatchBook,
+  Type,
+} from 'lucide-react';
+import { SYSTEM_OS } from '@/lib/utils';
+import { HelpShortcutElement } from './help-shortcut-element';
+
+export const HelpTools = () => {
+  return (
+    <div className="w-full grid grid-cols-3 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<MousePointer />}
+          label="Select tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'S',
+            [SYSTEM_OS.OTHER]: 'S',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Frame />}
+          label="Frame tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'F',
+            [SYSTEM_OS.OTHER]: 'F',
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Square />}
+          label="Rectangle tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'R',
+            [SYSTEM_OS.OTHER]: 'R',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<PenTool />}
+          label="Pen tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'L',
+            [SYSTEM_OS.OTHER]: 'L',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Brush />}
+          label="Brush tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'B',
+            [SYSTEM_OS.OTHER]: 'B',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Type />}
+          label="Text tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'T',
+            [SYSTEM_OS.OTHER]: 'T',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ImagePlus />}
+          label="Image tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'I',
+            [SYSTEM_OS.OTHER]: 'I',
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<SwatchBook />}
+          label="Color token tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'P',
+            [SYSTEM_OS.OTHER]: 'P',
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/help/help-view.tsx

@@ -0,0 +1,30 @@
+import { Eye, MousePointer } from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpView = () => {
+  return (
+    <div className="w-full grid grid-cols-2 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Eye />}
+          label="Show/Hide UI / Zen mode"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ \\",
+            [SYSTEM_OS.OTHER]: "Ctrl \\",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<MousePointer />}
+          label="Users cursors"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌥ ⌘ U",
+            [SYSTEM_OS.OTHER]: "Alt Ctrl U",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/help/help-zoom.tsx

@@ -0,0 +1,46 @@
+import { Fullscreen, Maximize, ZoomIn, ZoomOut } from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpZoom = () => {
+  return (
+    <div className="w-full grid grid-cols-2 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<ZoomIn />}
+          label="Zoom in"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ +",
+            [SYSTEM_OS.OTHER]: "Ctrl +",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ZoomOut />}
+          label="Zoom out"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ -",
+            [SYSTEM_OS.OTHER]: "Ctrl -",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Maximize />}
+          label="Fit to screen"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ 1",
+            [SYSTEM_OS.OTHER]: "⇧ 1",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Fullscreen />}
+          label="Fit to selection"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ 2",
+            [SYSTEM_OS.OTHER]: "⇧ 2",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/help/shortcut-element.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { cn, SYSTEM_OS } from "@/lib/utils";
+import { useGetOs } from "../hooks/use-get-os";
+
+type ShortcutElement = {
+  variant?: "default" | "light";
+  shortcuts: Record<string, string>;
+};
+
+export const ShortcutElement = ({
+  variant = "default",
+  shortcuts,
+}: Readonly<ShortcutElement>) => {
+  const os = useGetOs();
+
+  const isMac = React.useMemo(() => os === SYSTEM_OS.MAC, [os]);
+
+  const keys = React.useMemo(() => {
+    return isMac ? shortcuts[SYSTEM_OS.MAC] : shortcuts[SYSTEM_OS.OTHER];
+  }, [isMac, shortcuts]);
+
+  return (
+    <div className="flex gap-1 justify-start items-center">
+      {keys.split(" ").map((key) => {
+        return (
+          <span
+            key={key}
+            className={cn(
+              "inline-flex justify-start items-center p-0.5 px-1.5 rounded-xs font-noto-sans-mono text-xs",
+              {
+                ["bg-accent text-black"]: variant === "light",
+                ["bg-zinc-800 text-white"]: variant === "default",
+              }
+            )}
+          >
+            {key}
+          </span>
+        );
+      })}
+    </div>
+  );
+};