@yimingliao/cms 0.0.146 → 0.0.147

package/dist/src/client/interfaces/components/ui/inputs/editor/plugins/word-count-display/word-count-display.js

@@ -0,0 +1,81 @@
+import { Plugin, ButtonView } from 'ckeditor5';
+import 'mime-types';
+import { debounce } from '../../../../../../../../shared/utils/debounce.js';
+import { HTML_ICON, CHARACTERS_ICON, WORDS_ICON } from './icons.js';
+
+const WORD_COUNT = "WordCount";
+const WORD_COUNT_DISPLAY_PLUGIN_NAME = {
+  default: "word-count-display",
+  // CSS Class
+  characters: "word-count-display-characters",
+  // Plugin Name, CSS Class
+  words: "word-count-display-words",
+  // Plugin Name, CSS Class
+  html: "word-count-display-html"
+  // Plugin Name, CSS Class
+};
+class WordCountButtons extends Plugin {
+  init() {
+    const editor = this.editor;
+    const wordCountPlugin = editor.plugins.get(WORD_COUNT);
+    editor.ui.componentFactory.add(
+      WORD_COUNT_DISPLAY_PLUGIN_NAME.html,
+      (locale) => {
+        const button = new ButtonView(locale);
+        button.set({
+          icon: HTML_ICON,
+          label: `${editor.getData()?.length}`,
+          tooltip: true,
+          withText: true,
+          isEnabled: false,
+          class: `${WORD_COUNT_DISPLAY_PLUGIN_NAME.default} ${WORD_COUNT_DISPLAY_PLUGIN_NAME.html}`
+        });
+        const update = debounce(
+          () => button.label = `${editor.getData()?.length}`
+        );
+        editor.model.document.on("change:data", update);
+        return button;
+      }
+    );
+    editor.ui.componentFactory.add(
+      WORD_COUNT_DISPLAY_PLUGIN_NAME.characters,
+      (locale) => {
+        const button = new ButtonView(locale);
+        button.set({
+          icon: CHARACTERS_ICON,
+          label: `${wordCountPlugin.characters}`,
+          tooltip: true,
+          withText: true,
+          isEnabled: false,
+          class: `${WORD_COUNT_DISPLAY_PLUGIN_NAME.default} ${WORD_COUNT_DISPLAY_PLUGIN_NAME.characters}`
+        });
+        const update = debounce(
+          () => button.label = `${wordCountPlugin.characters}`
+        );
+        wordCountPlugin.on("change:characters", update);
+        return button;
+      }
+    );
+    editor.ui.componentFactory.add(
+      WORD_COUNT_DISPLAY_PLUGIN_NAME.words,
+      (locale) => {
+        const button = new ButtonView(locale);
+        button.set({
+          icon: WORDS_ICON,
+          label: `${wordCountPlugin.words}`,
+          tooltip: true,
+          withText: true,
+          isEnabled: false,
+          class: `${WORD_COUNT_DISPLAY_PLUGIN_NAME.default} ${WORD_COUNT_DISPLAY_PLUGIN_NAME.words}`
+        });
+        const update = debounce(
+          () => button.label = `${wordCountPlugin.words}`
+        );
+        wordCountPlugin.on("change:words", update);
+        return button;
+      }
+    );
+  }
+}
+
+export { WORD_COUNT_DISPLAY_PLUGIN_NAME, WordCountButtons as default };

package/dist/src/client/interfaces/components/ui/inputs/editor/use-init-editor/use-init-editor.js

@@ -0,0 +1,50 @@
+import { FileRepository } from 'ckeditor5';
+import { useRef, useEffect } from 'react';
+import 'mime-types';
+import { debounce } from '../../../../../../../shared/utils/debounce.js';
+import { BaseEditor } from '../base/base-editor.js';
+import { OPEN_ASSET_MANAGER_KEY } from '../plugins/asset-manager/asset-manager.js';
+import 'intor/react';
+
+const DOCUMENT_EVENTS = {
+  CHANGE: "change"};
+const useInitEditor = ({
+  enabled = true,
+  containerRef,
+  locale,
+  value,
+  onEditorChange,
+  createUploadAdapter,
+  openAssetManager
+}) => {
+  const editorRef = useRef(null);
+  useEffect(() => {
+    if (!enabled || !containerRef.current) return;
+    BaseEditor.create(containerRef.current, {
+      ...BaseEditor.defaultConfig,
+      language: locale,
+      initialData: value
+    }).then((editor) => {
+      editorRef.current = editor;
+      const debouncedChange = debounce(
+        () => onEditorChange?.(editor.getData())
+      );
+      editor.model.document.on(DOCUMENT_EVENTS.CHANGE, debouncedChange);
+      editor.plugins.get(FileRepository.pluginName).createUploadAdapter = createUploadAdapter;
+      editor.config.set(OPEN_ASSET_MANAGER_KEY, openAssetManager);
+      return () => {
+        editor.model.document.off(DOCUMENT_EVENTS.CHANGE, debouncedChange);
+        debouncedChange.clear();
+      };
+    }).catch((error) => {
+      console.error("CKEditor init error:", error);
+    });
+    return () => {
+      void editorRef.current?.destroy();
+      editorRef.current = null;
+    };
+  }, [enabled, containerRef]);
+  return editorRef;
+};
+
+export { useInitEditor };

package/dist/src/client/interfaces/components/ui/inputs/search-input.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Search } from 'lucide-react';
+import { useRef, useState } from 'react';
+import '@radix-ui/react-avatar';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '../../shadcn/badge.js';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import { InputGroupAddon } from '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar.js';
+import { Spinner } from '../../shadcn/spinner.js';
+import '@radix-ui/react-tooltip';
+import { Input } from './input.js';
+
+function SearchInput({
+  searchString = "",
+  setSearchString,
+  isLoading = false,
+  isDisabled = false,
+  ...props
+}) {
+  const { t } = useTranslator();
+  const isComposingRef = useRef(false);
+  const [inputValue, setInputValue] = useState(searchString);
+  const handleCompositionEnd = (e) => {
+    isComposingRef.current = false;
+    setInputValue(e.currentTarget.value);
+    setSearchString(e.currentTarget.value);
+  };
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+    if (!isComposingRef.current) setSearchString(e.target.value);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "relative size-full", children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      isDisabled,
+      placeholder: isLoading ? "" : t("ui.search.text"),
+      autoComplete: "off",
+      value: inputValue,
+      onChange: handleChange,
+      onCompositionStart: () => isComposingRef.current = true,
+      onCompositionEnd: handleCompositionEnd,
+      className: "w-full pr-9",
+      ...props,
+      children: /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Search, {}) })
+    }
+  ) });
+}
+
+export { SearchInput };

package/dist/src/client/interfaces/components/ui/inputs/select.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../shadcn/badge.js';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import { SelectItem, Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel } from '../../shadcn/select.js';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+
+function Select({
+  // form context
+  fieldName,
+  setFormData,
+  // ui states
+  isDisabled = false,
+  isLoading = false,
+  // base
+  placeholder,
+  label,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1,
+    {
+      onValueChange: (value) => {
+        if (!setFormData || !fieldName) return;
+        setFormData((p) => ({ ...p, [fieldName]: value }));
+      },
+      disabled: isDisabled || isLoading,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            className: cn("w-full", className),
+            disabled: isDisabled || isLoading,
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsxs(SelectGroup, { children: [
+          label && /* @__PURE__ */ jsx(SelectLabel, { children: label }),
+          children
+        ] }) })
+      ]
+    }
+  );
+}
+function Option({
+  value,
+  isDisabled = false,
+  children
+}) {
+  return /* @__PURE__ */ jsx(SelectItem, { value, disabled: isDisabled, children });
+}
+
+export { Option, Select };

package/dist/src/client/interfaces/components/ui/inputs/textarea.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import '@radix-ui/react-avatar';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '../../shadcn/badge.js';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import { InputGroup, InputGroupAddon } from '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar.js';
+import { Spinner } from '../../shadcn/spinner.js';
+import { Textarea as Textarea$1 } from '../../shadcn/textarea.js';
+import '@radix-ui/react-tooltip';
+
+function Textarea({
+  // form context
+  fieldName,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isError = false,
+  // base
+  ...props
+}) {
+  isDisabled = isDisabled || isLoading;
+  const textareaRef = useRef(null);
+  const resetHeight = (element) => {
+    element.style.height = "40px";
+    element.style.height = `${element.scrollHeight + 2}px`;
+  };
+  useEffect(() => {
+    if (!textareaRef.current) return;
+    resetHeight(textareaRef.current);
+  }, [props.value, isLoading]);
+  return /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsx(InputGroup, { "data-disabled": isDisabled, className: "h-10", children: /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) }) : /* @__PURE__ */ jsx(
+    Textarea$1,
+    {
+      ref: textareaRef,
+      disabled: isDisabled,
+      "aria-invalid": isError,
+      value: isLoading ? "" : props.value,
+      onChange: (e) => {
+        resetHeight(e.target);
+        if (!setFormData || !fieldName) return;
+        setFormData((p) => ({ ...p, [fieldName]: e.target.value }));
+      },
+      ...props
+    }
+  ) });
+}
+
+export { Textarea };

package/dist/src/client/interfaces/components/ui/layouts/content-container.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { NAVBAR_HEIGHT, PAGE_HEADER_HEIGHT } from '../../../styles/constants.js';
+
+function ContentContainer({
+  className = "",
+  children,
+  isNotFound = false,
+  isFixHeight,
+  ...props
+}) {
+  const { t } = useTranslator();
+  const ABOVE_HEIGHT = NAVBAR_HEIGHT + PAGE_HEADER_HEIGHT;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: isFixHeight ? `calc(100vh - ${ABOVE_HEIGHT}px)` : "auto"
+      },
+      className: cn(
+        className,
+        "relative",
+        "flex flex-col gap-4",
+        "px-6 pt-6",
+        isFixHeight ? "pb-6" : "flex-1 pb-64"
+      ),
+      ...props,
+      children: isNotFound ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("ui.no-data.text") }) : children
+    }
+  );
+}
+
+export { ContentContainer };

package/dist/src/client/interfaces/components/ui/layouts/navbar/i18n-selector.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Link } from 'intor/next';
+import { Languages } from 'lucide-react';
+import '@radix-ui/react-avatar';
+import 'react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../shadcn/dropdown-menu.js';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import { Button } from '../../buttons/button.js';
+import 'intor/react';
+
+function createI18nSelector({
+  enabled,
+  locales,
+  localeDisplay
+}) {
+  return function I18nSelector() {
+    if (!enabled) return null;
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "icon", children: [
+        /* @__PURE__ */ jsx(Languages, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Switch Languages" })
+      ] }) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: locales.map((locale) => /* @__PURE__ */ jsx(Link, { locale, children: /* @__PURE__ */ jsx(DropdownMenuItem, { children: localeDisplay[locale] }) }, locale)) })
+    ] });
+  };
+}
+
+export { createI18nSelector };

package/dist/src/client/interfaces/components/ui/layouts/navbar/nav-user.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { UserCircle, ChevronsUpDown, PenLine } from 'lucide-react';
+import Link from 'next/link';
+import { PATHS } from '../../../../../../constants/paths/index.js';
+import '../../../../../../constants/redirect-paths.js';
+import 'mime-types';
+import { findTranslation } from '../../../../../../shared/translation/find-translation.js';
+import { joinUrl } from '../../../../../../shared/utils/join-url.js';
+import { Avatar, AvatarImage, AvatarFallback } from '../../../shadcn/avatar.js';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import 'react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from '../../../shadcn/dropdown-menu.js';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import { SidebarMenu, SidebarMenuItem, SidebarMenuButton } from '../../../shadcn/sidebar.js';
+import { Spinner } from '../../../shadcn/spinner.js';
+import '@radix-ui/react-tooltip';
+import { Button } from '../../buttons/button.js';
+
+function NavUser({
+  storageUrl,
+  admin,
+  isLoading = false,
+  SignOutButton
+}) {
+  const { t, locale } = useTranslator();
+  const { name } = findTranslation(admin?.translations, locale);
+  if (isLoading)
+    return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", disabled: true, className: "w-64", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  if (!admin)
+    return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", disabled: true, className: "w-64", children: /* @__PURE__ */ jsx(UserCircle, { className: "size-4" }) });
+  return /* @__PURE__ */ jsx(SidebarMenu, { className: "w-64", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        size: "lg",
+        className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+        disabled: isLoading,
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+            admin.avatarImage?.key && /* @__PURE__ */ jsx(
+              AvatarImage,
+              {
+                src: joinUrl(storageUrl, admin.avatarImage?.key),
+                alt: name ?? ""
+              }
+            ),
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: name }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: admin.email })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto size-4" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
+        side: "bottom",
+        align: "end",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
+            /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+              admin.avatarImage?.key && /* @__PURE__ */ jsx(
+                AvatarImage,
+                {
+                  src: joinUrl(storageUrl, admin.avatarImage?.key),
+                  alt: name ?? ""
+                }
+              ),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: name }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: admin.email })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(Link, { href: PATHS.auth.changePassword.path, children: /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+            /* @__PURE__ */ jsx(PenLine, {}),
+            t("auth.change-password.text")
+          ] }) }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          SignOutButton
+        ]
+      }
+    )
+  ] }) }) });
+}
+
+export { NavUser };

package/dist/src/client/interfaces/components/ui/layouts/navbar/navbar.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { SidebarIcon, House, SquareArrowOutUpRight } from 'lucide-react';
+import { PATHS } from '../../../../../../constants/paths/index.js';
+import '../../../../../../constants/redirect-paths.js';
+import { useAdmin } from '../../../../../infrastructure/contexts/admin.js';
+import 'next-themes';
+import '@tanstack/react-query';
+import 'react';
+import 'mime-types';
+import 'sonner';
+import '@radix-ui/react-avatar';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import { Separator } from '../../../shadcn/separator.js';
+import { useSidebar } from '../../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import { Button } from '../../buttons/button.js';
+import { NavUser } from './nav-user.js';
+import { ThemeSelector } from './theme-selector.js';
+
+function createNavbar({
+  webUrl,
+  storageUrl,
+  I18nSelector,
+  SignOutButton
+}) {
+  return function Navbar() {
+    const { toggleSidebar } = useSidebar();
+    const { admin, isLoading } = useAdmin();
+    const { t } = useTranslator();
+    return /* @__PURE__ */ jsx("header", { className: "bg-background sticky top-0 z-50 flex w-full items-center border-b", children: /* @__PURE__ */ jsxs("div", { className: "flex h-(--header-height) w-full items-center gap-2 px-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "h-8 w-8",
+          variant: "ghost",
+          size: "icon",
+          onClick: toggleSidebar,
+          children: /* @__PURE__ */ jsx(SidebarIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mr-1 h-4" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          href: PATHS.main.dashboard.path,
+          children: /* @__PURE__ */ jsx(House, {})
+        }
+      ),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", href: webUrl, openNewTab: true, children: [
+        /* @__PURE__ */ jsx(SquareArrowOutUpRight, {}),
+        t("ui.layout.navbar.website-homepage.text")
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto" }),
+      /* @__PURE__ */ jsx(I18nSelector, {}),
+      /* @__PURE__ */ jsx(ThemeSelector, {}),
+      /* @__PURE__ */ jsx(
+        NavUser,
+        {
+          storageUrl,
+          SignOutButton: /* @__PURE__ */ jsx(SignOutButton, {}),
+          admin,
+          isLoading
+        }
+      )
+    ] }) });
+  };
+}
+
+export { createNavbar };

package/dist/src/client/interfaces/components/ui/layouts/navbar/sign-out-button.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { LogOut } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { PATHS } from '../../../../../../constants/paths/index.js';
+import '../../../../../../constants/redirect-paths.js';
+import 'react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import { isConfirm } from '../../../../../applications/ui/is-confirm.js';
+import { useAdmin } from '../../../../../infrastructure/contexts/admin.js';
+import 'next-themes';
+import '@tanstack/react-query';
+import 'mime-types';
+import 'sonner';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import { DropdownMenuItem } from '../../../shadcn/dropdown-menu.js';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import { Spinner } from '../../../shadcn/spinner.js';
+import '@radix-ui/react-tooltip';
+
+function createSignOutButton({
+  useCommand,
+  signOutAction
+}) {
+  return function SignOutButton() {
+    const { t } = useTranslator();
+    const router = useRouter();
+    const { setAdmin } = useAdmin();
+    const { execute, isRedirecting } = useCommand(signOutAction, {
+      onSuccess: () => {
+        setAdmin(null);
+        router.push(PATHS.auth.signIn.path);
+      }
+    });
+    const handleSignOut = () => {
+      if (!isConfirm(t)) return;
+      void execute();
+    };
+    const buttonText = isRedirecting ? /* @__PURE__ */ jsx(Spinner, {}) : t("auth.sign-out.text");
+    return /* @__PURE__ */ jsx("button", { onClick: handleSignOut, className: "w-full", children: /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", children: [
+      /* @__PURE__ */ jsx(LogOut, {}),
+      buttonText
+    ] }) });
+  };
+}
+
+export { createSignOutButton };