kmod-cli 1.0.10

package/component-templates/components/masonry-gallery.tsx

@@ -0,0 +1,221 @@
+import 'react-loading-skeleton/dist/skeleton.css';
+
+import React from 'react';
+
+import { Ellipsis } from 'lucide-react';
+import Skeleton from 'react-loading-skeleton';
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
+
+import { Button } from '../ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../ui/popover';
+import { Image } from './image';
+
+// ================== Types ==================
+export type ImageInfo = {
+  id: any;
+  key: string;
+  url: string;
+  preview_image: string;
+  mimetype: string;
+  name: string;
+  size: number;
+  alt: string;
+  created_at: string;
+  show_edit: boolean;
+  user: {
+    id: number;
+    name: string;
+    avt: string;
+  };
+};
+
+export type ImageCardAction = {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick: (item: ImageInfo) => void;
+  className?: string;
+};
+
+type ImageCardProps = {
+  item: ImageInfo;
+  onClick: (item: ImageInfo) => void;
+  actions?: ImageCardAction[];
+  renderHeader?: (item: ImageInfo) => React.ReactNode;
+  renderFooter?: (item: ImageInfo) => React.ReactNode;
+};
+
+// ================== ImageCard ==================
+const ImageCard: React.FC<ImageCardProps> = ({
+  item,
+  onClick,
+  actions = [],
+  renderHeader,
+  renderFooter,
+}) => {
+  return (
+    <div className="group animate-fade-up relative flex w-full flex-col overflow-hidden rounded-xl transition-all duration-300 hover:bg-foreground/5">
+      {/* Header */}
+      {renderHeader ? (
+        renderHeader(item)
+      ) : (
+        item.mimetype && (
+          <span className="absolute top-2 left-2 rounded-md bg-foreground/10 px-2 py-0.5 text-xs font-medium text-background backdrop-blur-sm">
+            {item.mimetype.replace(/^image\//, "").toUpperCase()}
+          </span>
+        )
+      )}
+
+      {/* Image */}
+      <Image
+        src={item.preview_image}
+        alt={item.alt}
+        className="border-border bg-background min-h-[100px] cursor-pointer rounded-xl border transition-all duration-300 group-hover:border-green-500"
+        imageClass="transition-all duration-300 group-hover:scale-105"
+        onClick={() => onClick(item)}
+      />
+
+      {/* Footer */}
+      {renderFooter ? (
+        renderFooter(item)
+      ) : (
+        <div className="flex w-full items-center justify-between gap-2 p-3">
+          <div className="flex items-center gap-2">
+            <Image src={item.user.avt} className="h-5 w-5 rounded-full" />
+            <p className="line-clamp-1 text-sm font-medium text-foreground">
+              {item.user.name}
+            </p>
+          </div>
+          {actions.length > 0 && (
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="rounded-full p-1 shadow-none"
+                >
+                  <Ellipsis className="h-4 w-4" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="z-[120] max-w-[200px] p-1">
+                <div className="flex flex-col">
+                  {actions.map((action) => (
+                    <Button
+                      key={action.key}
+                      variant="ghost"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        action.onClick(item);
+                      }}
+                      className={`flex items-center gap-2 shadow-none ${action.className ?? ""}`}
+                    >
+                      {action.icon}
+                      <p className="text-sm font-medium">{action.label}</p>
+                    </Button>
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ================== MasonryWithSkeleton ==================
+type MasonryWithSkeletonProps = {
+  items: ImageInfo[];
+  loading?: boolean;
+  onClick: (item: ImageInfo) => void;
+  actions?: ImageCardAction[];
+  renderHeader?: (item: ImageInfo) => React.ReactNode;
+  renderFooter?: (item: ImageInfo) => React.ReactNode;
+  breakpoint?: Record<number, number>;
+};
+
+const MasonryWithSkeleton: React.FC<MasonryWithSkeletonProps> = ({
+  items,
+  loading = false,
+  onClick,
+  actions,
+  renderHeader,
+  renderFooter,
+  breakpoint = { 350: 2, 750: 3, 1200: 5 },
+}) => {
+  const placeholders = Array.from({ length: 12 });
+  return (
+    <ResponsiveMasonry columnsCountBreakPoints={breakpoint}>
+      <Masonry>
+        {loading &&
+          placeholders.map((_, i) => <ImageCardSkeleton key={i} keyId={i} />)}
+        {!loading &&
+          items.map((item) => (
+            <ImageCard
+              key={item.id}
+              item={item}
+              onClick={onClick}
+              actions={actions}
+              renderHeader={renderHeader}
+              renderFooter={renderFooter}
+            />
+          ))}
+      </Masonry>
+    </ResponsiveMasonry>
+  );
+};
+
+export default MasonryWithSkeleton;
+
+// ================== Skeleton ==================
+const ImageCardSkeleton = ({ keyId }: { keyId: number }) => (
+  <div className="group animate-fade-up flex w-full flex-col overflow-hidden rounded-xl transition-all duration-300">
+    <Skeleton height={keyId % 2 === 0 ? 320 : 200} className="rounded-xl" />
+    <div className="flex w-full justify-between p-3">
+      <div className="flex items-center gap-2">
+        <Skeleton circle width={20} height={20} />
+        <Skeleton width={80} height={14} />
+      </div>
+      <Skeleton width={32} height={32} circle />
+    </div>
+  </div>
+);
+
+// // ================== Example actions ==================
+// export const defaultActions: ImageCardAction[] = [
+//   {
+//     key: "share",
+//     label: "Share",
+//     icon: <Share2 className="h-4 w-4" />,
+//     onClick: (item) => console.log("share", item),
+//   },
+//   {
+//     key: "save",
+//     label: "Save",
+//     icon: <FolderPlus className="h-4 w-4" />,
+//     onClick: (item) => console.log("save", item),
+//   },
+//   {
+//     key: "edit",
+//     label: "Edit",
+//     icon: <PenLine className="h-4 w-4" />,
+//     onClick: (item) => console.log("edit", item),
+//   },
+//   {
+//     key: "download",
+//     label: "Download",
+//     icon: <Download className="h-4 w-4" />,
+//     onClick: (item) => downloadImage(item.url),
+//   },
+//   {
+//     key: "delete",
+//     label: "Delete",
+//     icon: <Trash2 className="h-4 w-4 text-red-500" />,
+//     onClick: (item) => console.log("delete", item),
+//     className: "text-red-500",
+//   },
+// ];

package/component-templates/components/modal.tsx

@@ -0,0 +1,110 @@
+"use client";
+import React, {
+  ReactNode,
+  useEffect,
+  useRef,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { cn } from '../lib/utils';
+
+/** base z-100 */
+type ModalProps = {
+  open: boolean;
+  type: "modal" | "drawer";
+  onClose: () => void;
+  title?: ReactNode | string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+  pos?: "center" | "top" | "bottom" | "right" | "left";
+  containerClassName?: string;
+};
+
+export default function Modal({
+  open,
+  type = "modal",
+  onClose,
+  title,
+  children,
+  footer,
+  pos = "center",
+  className = "",
+  containerClassName = "",
+}: ModalProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === overlayRef.current) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    const onEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (open) {
+      document.body.style.overflow = "hidden";
+      document.addEventListener("keydown", onEsc);
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open]);
+
+  if (typeof window === "undefined") return null;
+
+  if (type === "modal")
+    return createPortal(
+      open && (
+        <div
+          ref={overlayRef}
+          onClick={handleOverlayClick}
+          className={cn("fixed inset-0 backdrop-blur-lg !z-[100] flex justify-center bg-black/10 p-6 transition-opacity duration-300", containerClassName)}
+        >
+          <div
+            className={cn(
+              pos === "center" && "top-1/2 -translate-y-1/2",
+              pos === "top" && "top-0",
+              pos === "bottom" && "bottom-0 translate-y-full",
+              pos === "right" && "right-0",
+              pos === "left" && "left-0",
+              `animate-fade-up !animate-duration-500 relative mx-4 h-fit w-full max-w-lg scale-100 transform rounded-lg bg-white p-6 opacity-100 shadow-xl transition-all duration-300 dark:bg-zinc-900`,
+              className,
+            )}
+          >
+            {title && <h2 className="text-lg font-semibold">{title}</h2>}
+            {children}
+            {footer && footer}
+          </div>
+        </div>
+      ),
+      document.body,
+    );
+  if (type === "drawer")
+    return createPortal(
+      open && (
+        <div
+          ref={overlayRef}
+          onClick={handleOverlayClick}
+          className={cn("fixed inset-0 !z-[100] flex justify-end bg-black/50 transition-opacity duration-300")}
+        >
+          <div
+            className={cn(
+              `animate-fade-up !animate-duration-500 h-full w-full max-w-full transform bg-white p-6 shadow-xl transition-all duration-300 dark:bg-zinc-900`,
+              className,
+            )}
+          >
+            {title && <div className="text-lg font-semibold">{title}</div>}
+            {children}
+            {footer && footer}
+          </div>
+        </div>
+      ),
+      document.body,
+    );
+}