@yimingliao/cms 0.0.146 → 0.0.147

package/dist/export/client/components/index.js

@@ -0,0 +1,69 @@
+export { createAdminInitializer } from '../../../src/client/interfaces/components/admin-initializer.js';
+export { PageHeader } from '../../../src/client/interfaces/components/ui/blocks/page-header/page-header.js';
+export { ListCardsContainer } from '../../../src/client/interfaces/components/ui/blocks/list-cards-container/list-cards-container.js';
+export { Button } from '../../../src/client/interfaces/components/ui/buttons/button.js';
+export { ReturnButton } from '../../../src/client/interfaces/components/ui/buttons/return-button.js';
+export { ResourceCard } from '../../../src/client/interfaces/components/ui/cards/resource-card/resource-card.js';
+export { ActionButtonsCard } from '../../../src/client/interfaces/components/ui/cards/action-buttons-card.js';
+export { ArrayList } from '../../../src/client/interfaces/components/ui/display/array-list.js';
+export { Badge } from '../../../src/client/interfaces/components/ui/display/badge.js';
+export { HtmlDisplay } from '../../../src/client/interfaces/components/ui/display/html-display.js';
+export { ObjectArrayList } from '../../../src/client/interfaces/components/ui/display/object-array-list.js';
+export { Accordion } from '../../../src/client/interfaces/components/ui/features/accordion/accordion.js';
+export { AccordionContainer } from '../../../src/client/interfaces/components/ui/features/accordion/accordion-container.js';
+export { ExpandableList } from '../../../src/client/interfaces/components/ui/features/expandable-list/expandable-list.js';
+export { createFileInfo } from '../../../src/client/interfaces/components/ui/features/file/file-info/file-info.js';
+export { createFilePreview } from '../../../src/client/interfaces/components/ui/features/file/file-preview/file-preview.js';
+export { createFilePreviewList } from '../../../src/client/interfaces/components/ui/features/file/file-preview/file-preview-list.js';
+export { createFilePicker } from '../../../src/client/interfaces/components/ui/features/file/file-picker/file-picker.js';
+export { createUploader } from '../../../src/client/interfaces/components/ui/features/file/uploader.js';
+export { PickModal } from '../../../src/client/interfaces/components/ui/features/pick-modal/pick-modal.js';
+export { ExternalLink } from '../../../src/client/interfaces/components/ui/features/external-link.js';
+export { createSmartImage } from '../../../src/client/interfaces/components/ui/features/smart-image.js';
+export { Tick } from '../../../src/client/interfaces/components/ui/features/tick.js';
+export { Form } from '../../../src/client/interfaces/components/ui/form/form.js';
+export { Field } from '../../../src/client/interfaces/components/ui/form/field.js';
+export { FieldBody } from '../../../src/client/interfaces/components/ui/form/field-body.js';
+export { FieldsContainer } from '../../../src/client/interfaces/components/ui/form/containers/fields-container.js';
+export { MainFields } from '../../../src/client/interfaces/components/ui/form/containers/main-fields.js';
+export { SideFields } from '../../../src/client/interfaces/components/ui/form/containers/side-fields.js';
+export { IndexField } from '../../../src/client/interfaces/components/ui/form/index-field.js';
+export { SlugField } from '../../../src/client/interfaces/components/ui/form/slug-field.js';
+export { ControlFields } from '../../../src/client/interfaces/components/ui/form/control-fields/control-fields.js';
+export { createEditor } from '../../../src/client/interfaces/components/ui/inputs/editor/editor.js';
+export { createUploadAdapter } from '../../../src/client/interfaces/components/ui/inputs/editor/plugins/file-repository/upload-adapter.js';
+export { ArrayInput } from '../../../src/client/interfaces/components/ui/inputs/array-input.js';
+export { Checkbox } from '../../../src/client/interfaces/components/ui/inputs/checkbox.js';
+export { Input } from '../../../src/client/interfaces/components/ui/inputs/input.js';
+export { PasswordInput } from '../../../src/client/interfaces/components/ui/inputs/password-input.js';
+export { SearchInput } from '../../../src/client/interfaces/components/ui/inputs/search-input.js';
+export { Option, Select } from '../../../src/client/interfaces/components/ui/inputs/select.js';
+export { Textarea } from '../../../src/client/interfaces/components/ui/inputs/textarea.js';
+export { ContentContainer } from '../../../src/client/interfaces/components/ui/layouts/content-container.js';
+export { DashboardSkeleton } from '../../../src/client/interfaces/components/ui/layouts/dashboard-skeleton.js';
+export { AuthSkeleton } from '../../../src/client/interfaces/components/ui/layouts/auth-skeleton.js';
+export { NavMain } from '../../../src/client/interfaces/components/ui/layouts/sidebar/nav-main.js';
+import 'react/jsx-runtime';
+import '@radix-ui/react-avatar';
+import 'react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '../../../src/client/interfaces/components/shadcn/badge.js';
+import '../../../src/client/interfaces/components/shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../../src/client/interfaces/components/shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+export { Sidebar, SidebarContent, SidebarInset, SidebarProvider, useSidebar } from '../../../src/client/interfaces/components/shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+export { createNavbar } from '../../../src/client/interfaces/components/ui/layouts/navbar/navbar.js';
+export { createI18nSelector } from '../../../src/client/interfaces/components/ui/layouts/navbar/i18n-selector.js';
+export { createSignOutButton } from '../../../src/client/interfaces/components/ui/layouts/navbar/sign-out-button.js';
+export { createFileCard } from '../../../src/client/interfaces/components/resources/file/file-card.js';
+export { createFileList } from '../../../src/client/interfaces/components/resources/file/file-list.js';

package/dist/src/client/applications/ui/use-parent-pathname.js

@@ -0,0 +1,10 @@
+import { usePathname } from 'next/navigation';
+
+const useParentPathname = () => {
+  const pathname = usePathname();
+  if (pathname === "/") return "/";
+  const index = pathname.lastIndexOf("/");
+  return index <= 0 ? "/" : pathname.slice(0, index);
+};
+
+export { useParentPathname };

package/dist/src/client/interfaces/components/admin-initializer.js

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect } from 'react';
+import { VERIFY_CACHE_KEY } from '../../constants.js';
+
+function createAdminInitializer({
+  useAdmin,
+  useQuery,
+  verifyAction
+}) {
+  return function AdminInitializer() {
+    const { admin: globalAdmin, setAdmin, setIsLoading } = useAdmin();
+    const { data: admin, isFetching } = useQuery(
+      verifyAction,
+      [VERIFY_CACHE_KEY],
+      {
+        select: (data) => data?.admin,
+        enabled: !globalAdmin
+      }
+    );
+    useEffect(() => {
+      if (isFetching) return;
+      if (admin) setAdmin(admin);
+      setIsLoading(false);
+    }, [isFetching, admin, setAdmin, setIsLoading]);
+    return null;
+  };
+}
+
+export { createAdminInitializer };

package/dist/src/client/interfaces/components/resources/file/file-card.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Lock, Trash2 } from 'lucide-react';
+import { PATHS } from '../../../../../constants/paths/index.js';
+import '../../../../../constants/redirect-paths.js';
+import '../../../../../domain/resources/admin/constants.js';
+import { isFileLocked } from '../../../../../domain/resources/file/utils/is-file-locked.js';
+import 'mime-types';
+import { findTranslation } from '../../../../../shared/translation/find-translation.js';
+import { joinUrl } from '../../../../../shared/utils/join-url.js';
+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 '@radix-ui/react-dropdown-menu';
+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 'next/link';
+import { ResourceCard } from '../../ui/cards/resource-card/resource-card.js';
+import 'next/image';
+import 'ckeditor5';
+import 'ckeditor5/translations/en.js';
+import 'ckeditor5/translations/zh.js';
+import 'sonner';
+import '../../../../infrastructure/contexts/admin.js';
+import 'next-themes';
+import '@tanstack/react-query';
+import 'intor/next';
+
+const WIDTH = 160;
+const HEIGHT = 160;
+function createFileCard({
+  SmartImage,
+  storageUrl
+}) {
+  return function FileCard({
+    file,
+    // link
+    openNewTab = false,
+    anchorProps,
+    // base
+    className = ""
+  }) {
+    const { locale } = useTranslator();
+    const isImage = file?.type === "IMAGE";
+    const isVideo = file?.type === "VIDEO";
+    const isLocked = isFileLocked(file);
+    const isTrash = file?.deletedAt;
+    const translation = findTranslation(file?.translations, locale);
+    return /* @__PURE__ */ jsx(
+      ResourceCard,
+      {
+        className,
+        style: { width: `${WIDTH}px`, height: `${HEIGHT}px` },
+        href: `${PATHS.resources.file.path}/${file?.id}`,
+        openNewTab,
+        anchorProps,
+        cardStatusBarProps: {
+          children: /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between", children: [
+            isLocked && /* @__PURE__ */ jsx(Lock, { className: "size-5" }),
+            isTrash && /* @__PURE__ */ jsx(Trash2, { className: "text-error size-5" })
+          ] })
+        },
+        cardTextContentProps: { title: translation?.name },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("flex-center flex-1", "overflow-hidden", "transition"),
+            children: isImage ? /* @__PURE__ */ jsx(SmartImage, { fileKey: file.key, width: WIDTH, height: HEIGHT }) : isVideo ? /* @__PURE__ */ jsx("video", { src: joinUrl(storageUrl, file.key), autoPlay: true, loop: true, muted: true }) : /* @__PURE__ */ jsx("span", { className: cn("scale-[3]", "transition"), children: "\u{1F4C4}" })
+          }
+        )
+      }
+    );
+  };
+}
+
+export { createFileCard };

package/dist/src/client/interfaces/components/resources/file/file-list.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import '../../../../../constants/paths/auth.js';
+import '../../../../../constants/paths/main.js';
+import '../../../../../constants/paths/resources.js';
+import { CACHE_KEYS } from '../../../../../constants/cache-keys.js';
+import '../../../../../constants/redirect-paths.js';
+import 'mime-types';
+import { debounce } from '../../../../../shared/utils/debounce.js';
+import { ensureArray } from '../../../../../shared/utils/ensure-array.js';
+import { DO_NOT_FETCH_KEY } from '../../../../../shared/list-items.js';
+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 '@radix-ui/react-select';
+import { Separator } from '../../shadcn/separator.js';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import 'intor/react';
+import { ListCardsContainer } from '../../ui/blocks/list-cards-container/list-cards-container.js';
+import 'next/link';
+import '../../../../../domain/resources/admin/constants.js';
+import 'next/image';
+import { Tick } from '../../ui/features/tick.js';
+import 'ckeditor5';
+import 'ckeditor5/translations/en.js';
+import 'ckeditor5/translations/zh.js';
+import 'sonner';
+import '../../../../infrastructure/contexts/admin.js';
+import 'next-themes';
+import '@tanstack/react-query';
+import 'intor/next';
+import { IsLockedButtons } from './is-locked-buttons.js';
+import { TypeButtons } from './type-buttons.js';
+
+function createFileList({
+  useQuery,
+  fileFindListCardsAction,
+  FileCard
+}) {
+  return function FileList({
+    setItemStates,
+    // search
+    folderId,
+    // Use in File Manager, Folder page
+    isDeleted,
+    // Use in Trash Page
+    fileIds,
+    // link
+    openNewTab = false,
+    // pick
+    pickedItems,
+    handleClick
+  }) {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(20);
+    const [searchString, setSearchString] = useState("");
+    const debouncedSetSearchString = useMemo(
+      () => debounce((v) => setSearchString(v), 300),
+      []
+    );
+    const [type, setType] = useState(null);
+    const [isLocked, setIsLocked] = useState(null);
+    useEffect(() => {
+      setPage(1);
+    }, [setPage, type, isLocked]);
+    const { data, isFetching, refetch } = useQuery(
+      () => fileFindListCardsAction({
+        page,
+        pageSize,
+        searchString,
+        type,
+        isLocked,
+        ...folderId && { folderId },
+        ...isDeleted && { isDeleted },
+        // Use in Trash
+        ...fileIds && { fileIds }
+      }),
+      [
+        CACHE_KEYS.findListCards("file"),
+        page,
+        pageSize,
+        searchString,
+        type,
+        isLocked,
+        folderId,
+        isDeleted,
+        JSON.stringify(fileIds)
+      ],
+      { enabled: folderId !== DO_NOT_FETCH_KEY }
+      // Use in File Manager
+    );
+    const files = useMemo(() => ensureArray(data?.items), [data?.items]);
+    useEffect(() => {
+      setItemStates?.({
+        items: files,
+        count: data?.total ?? 0,
+        isFetching,
+        refetch
+      });
+    }, [files, data?.total, isFetching, setItemStates]);
+    return /* @__PURE__ */ jsx(
+      ListCardsContainer,
+      {
+        page,
+        setPage,
+        pageSize,
+        setPageSize,
+        total: data?.total ?? 0,
+        searchString,
+        setSearchString: debouncedSetSearchString,
+        isFetching,
+        headerChildren: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsx(TypeButtons, { type: type || null, setType }),
+          /* @__PURE__ */ jsx("div", { className: "py-1", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }) }),
+          /* @__PURE__ */ jsx(IsLockedButtons, { isLocked, setIsLocked })
+        ] }),
+        children: files.map((file) => {
+          const isPicked = pickedItems?.some((item) => item.id === file.id);
+          return /* @__PURE__ */ jsxs("div", { className: "relative w-fit", children: [
+            /* @__PURE__ */ jsx(
+              FileCard,
+              {
+                file,
+                openNewTab,
+                className: cn(pickedItems && !isPicked && "opacity-50"),
+                anchorProps: handleClick && {
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleClick(file);
+                  }
+                }
+              }
+            ),
+            pickedItems && /* @__PURE__ */ jsx(
+              Tick,
+              {
+                isPicked: isPicked ?? false,
+                className: "absolute top-2 right-2"
+              }
+            )
+          ] }, file.id);
+        })
+      }
+    );
+  };
+}
+
+export { createFileList };

package/dist/src/client/interfaces/components/resources/file/is-locked-buttons.js

@@ -0,0 +1,71 @@
+import { jsxs, 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 'lucide-react';
+import '@radix-ui/react-avatar';
+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 '@radix-ui/react-separator';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import { Button } from '../../ui/buttons/button.js';
+import 'next/link';
+import '../../../../../constants/paths/auth.js';
+import '../../../../../constants/paths/main.js';
+import '../../../../../constants/paths/resources.js';
+import '../../../../../constants/redirect-paths.js';
+import 'mime-types';
+import '../../../../../domain/resources/admin/constants.js';
+import 'next/image';
+import 'ckeditor5';
+import 'ckeditor5/translations/en.js';
+import 'ckeditor5/translations/zh.js';
+import 'sonner';
+import '../../../../infrastructure/contexts/admin.js';
+import 'next-themes';
+import '@tanstack/react-query';
+import 'intor/next';
+
+function IsLockedButtons({
+  isLocked,
+  setIsLocked
+}) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-fit gap-3", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: "secondary",
+        onClick: () => {
+          setIsLocked(isLocked === true ? null : true);
+        },
+        className: cn(isLocked !== true ? "opacity-35" : "shadow"),
+        children: t("resources.file.locked.text")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: "secondary",
+        onClick: () => setIsLocked(isLocked === false ? null : false),
+        className: cn(isLocked !== false ? "opacity-35" : "shadow"),
+        children: t("resources.file.not-locked.text")
+      }
+    )
+  ] });
+}
+
+export { IsLockedButtons };

package/dist/src/client/interfaces/components/resources/file/type-buttons.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import '../../../../../domain/resources/admin/constants.js';
+import { FILE_TYPES } from '../../../../../domain/resources/file/props.js';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import 'lucide-react';
+import '@radix-ui/react-avatar';
+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 '@radix-ui/react-separator';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import { Button } from '../../ui/buttons/button.js';
+import 'next/link';
+import '../../../../../constants/paths/auth.js';
+import '../../../../../constants/paths/main.js';
+import '../../../../../constants/paths/resources.js';
+import '../../../../../constants/redirect-paths.js';
+import 'mime-types';
+import 'next/image';
+import 'ckeditor5';
+import 'ckeditor5/translations/en.js';
+import 'ckeditor5/translations/zh.js';
+import 'sonner';
+import '../../../../infrastructure/contexts/admin.js';
+import 'next-themes';
+import '@tanstack/react-query';
+import 'intor/next';
+
+function TypeButtons({ type, setType }) {
+  const { t } = useTranslator();
+  const handleClick = (fileType) => {
+    if (fileType === type) {
+      setType(null);
+    } else {
+      setType(fileType);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex h-fit gap-3", children: Object.values(FILE_TYPES).map((fileType) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      size: "sm",
+      variant: "secondary",
+      onClick: () => handleClick(fileType),
+      className: cn(fileType !== type ? "opacity-35" : "shadow"),
+      children: t(`resources.file.file-type.${fileType.toLowerCase()}.text`)
+    },
+    fileType
+  )) });
+}
+
+export { TypeButtons };

package/dist/src/client/interfaces/components/shadcn/sidebar.js

@@ -14,7 +14,7 @@ import { Input } from './input.js';
 import { Separator } from './separator.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './sheet.js';
 import { Skeleton } from './skeleton.js';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './tooltip.js';
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;

package/dist/src/client/interfaces/components/ui/blocks/list-cards-container/list-cards-container.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { 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 '../../../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 'next/link';
+import '../../../../../../constants/paths/auth.js';
+import '../../../../../../constants/paths/main.js';
+import '../../../../../../constants/paths/resources.js';
+import '../../../../../../constants/redirect-paths.js';
+import 'mime-types';
+import '../../../../../../domain/resources/admin/constants.js';
+import 'next/image';
+import 'ckeditor5';
+import 'ckeditor5/translations/en.js';
+import 'ckeditor5/translations/zh.js';
+import 'sonner';
+import { SearchInput } from '../../inputs/search-input.js';
+import { PageSizeSelector } from './page-size-selector.js';
+import { Pagination } from './pagination.js';
+
+function ListCardsContainer({
+  // pagination
+  page,
+  setPage,
+  pageSize,
+  setPageSize,
+  total,
+  // search string
+  searchString,
+  setSearchString,
+  // ui states
+  isFetching,
+  // base
+  children,
+  headerChildren
+}) {
+  const { t } = useTranslator();
+  const isNotFound = total === 0;
+  useEffect(() => {
+    setPage(1);
+  }, [searchString, setPage]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      headerChildren,
+      /* @__PURE__ */ jsx("div", { className: "ml-auto w-64", children: /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          searchString,
+          setSearchString,
+          isLoading: isFetching
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-[88%] flex-1 overflow-y-auto", children: isFetching ? /* @__PURE__ */ jsx(Spinner, {}) : isNotFound ? /* @__PURE__ */ jsx("p", { className: "text-sm opacity-50", children: t("ui.no-data.text") }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-52" }),
+      /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          page,
+          setPage,
+          pageSize,
+          total
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PageSizeSelector,
+        {
+          pageSize,
+          setPageSize,
+          setPage
+        }
+      )
+    ] })
+  ] });
+}
+
+export { ListCardsContainer };

package/dist/src/client/interfaces/components/ui/blocks/list-cards-container/page-size-selector.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import 'react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import 'lucide-react';
+import '@radix-ui/react-avatar';
+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 '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import 'next/link';
+import '../../../../../../constants/paths/auth.js';
+import '../../../../../../constants/paths/main.js';
+import '../../../../../../constants/paths/resources.js';
+import '../../../../../../constants/redirect-paths.js';
+import 'mime-types';
+import '../../../../../../domain/resources/admin/constants.js';
+import 'next/image';
+import 'ckeditor5';
+import 'ckeditor5/translations/en.js';
+import 'ckeditor5/translations/zh.js';
+import 'sonner';
+import { Select, Option } from '../../inputs/select.js';
+
+function PageSizeSelector({
+  pageSize,
+  setPageSize,
+  setPage
+}) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-52 items-center gap-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm whitespace-nowrap", children: t("ui.layout.item-list-container.items-per-page.text") }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: String(pageSize),
+        onValueChange: (value) => {
+          setPageSize(Number(value ?? 20));
+          setPage(1);
+        },
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsx(Option, { value: String(20), children: "20" }),
+          /* @__PURE__ */ jsx(Option, { value: String(40), children: "40" }),
+          /* @__PURE__ */ jsx(Option, { value: String(80), children: "80" })
+        ]
+      }
+    )
+  ] });
+}
+
+export { PageSizeSelector };