@oberoncms/core
Version:
OberonCMS is a cloud deployable CMS written in typescript based on the Puck visual editor
71 lines (70 loc) • 2.49 kB
JavaScript
"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { Fragment, useOptimistic, startTransition } from "react";
import { filesize } from "filesize";
import Link from "next/link";
import { Button } from "@tohuhono/ui/button";
import { LocalDate } from "@tohuhono/ui/date";
import Image from "next/image";
import { Grid, GridHeading } from "@tohuhono/ui/grid";
import { useOberonActions } from "../hooks/use-oberon.js";
const useOberonImages = (images) => {
const { deleteImage } = useOberonActions();
const [optimisticImages, optimisticImageUpdate] = useOptimistic(images);
return {
images: optimisticImages,
deleteImage: async (key) => {
startTransition(
() => optimisticImageUpdate(
optimisticImages.map(
(image) => image.key === key ? { ...image, pending: true } : image
)
)
);
return deleteImage(key);
}
};
};
function Images({ images: initialImages }) {
const { images, deleteImage } = useOberonImages(initialImages);
return /* @__PURE__ */ jsxs(Grid, { className: "grid-cols-[auto_1fr_auto_auto_auto_auto]", children: [
/* @__PURE__ */ jsx(GridHeading, {}),
/* @__PURE__ */ jsx(GridHeading, { children: "Name" }),
/* @__PURE__ */ jsx(GridHeading, { children: "Size" }),
/* @__PURE__ */ jsx(GridHeading, { children: "Uploaded" }),
/* @__PURE__ */ jsx(GridHeading, { children: "By" }),
/* @__PURE__ */ jsx(GridHeading, {}),
images.map(({ key, alt, size, updatedAt, updatedBy, url }) => {
const pending = false;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(Link, { href: url, prefetch: false, target: "_blank", children: /* @__PURE__ */ jsx(
Image,
{
src: url,
width: 28,
height: 28,
alt,
className: "m-0 lg:m-0"
}
) }),
/* @__PURE__ */ jsx("div", { children: alt }),
/* @__PURE__ */ jsx("div", { children: filesize(size) }),
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(LocalDate, { date: updatedAt }) }),
/* @__PURE__ */ jsx("div", { children: updatedBy }),
/* @__PURE__ */ jsx(
Button,
{
variant: "destructive",
size: "sm",
disabled: pending,
onClick: () => deleteImage(key),
children: "Delete"
}
)
] }, key);
})
] });
}
export {
Images
};