@alpaca-editor/core 1.0.4156 → 1.0.4157

package/src/editor/FloatingToolbar.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, useCallback, useEffect, useState } from "react";
+import { ArrowDownLeft, ChevronDown } from "lucide-react";
 
 export default function FloatingToolbar({
   children,
@@ -32,7 +33,7 @@ export default function FloatingToolbar({
         y: e.clientY - position.y,
       });
     },
-    [position]
+    [position],
   );
 
   const handleMouseMove = useCallback(
@@ -45,7 +46,7 @@ export default function FloatingToolbar({
         });
       }
     },
-    [dragging, offset]
+    [dragging, offset],
   );
 
   const handleMouseUp = useCallback(() => {
@@ -77,7 +78,7 @@ export default function FloatingToolbar({
         });
       }
     },
-    [resizing, offset, size]
+    [resizing, offset, size],
   );
 
   const handleResizeMouseUp = useCallback(() => {
@@ -112,7 +113,7 @@ export default function FloatingToolbar({
 
   return (
     <div
-      className="border border-gray-200 drop-shadow z-10 flex flex-col"
+      className="z-10 flex flex-col border border-gray-200 drop-shadow"
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
       style={{
@@ -124,7 +125,7 @@ export default function FloatingToolbar({
       }}
     >
       <div
-        className="bg-gray-100 w-full flex justify-between items-between p-2 text-sm"
+        className="items-between flex w-full justify-between bg-gray-100 p-2 text-sm"
         style={{ cursor: "move", userSelect: "none" }}
         onMouseDown={handleMouseDown}
       >
@@ -132,31 +133,28 @@ export default function FloatingToolbar({
         <div className="flex gap-2">
           {hidden && (
             <div
-              className="border-2 border-gray-800 w-4 h-4 cusor-pointer"
+              className="cusor-pointer h-4 w-4 border-2 border-gray-800"
               onClick={() => setHidden(false)}
             ></div>
           )}
           {!hidden && (
             <div
-              className="border-b-2 border-gray-800 w-4 h-4 cusor-pointer"
+              className="cusor-pointer h-4 w-4 border-b-2 border-gray-800"
               onClick={() => setHidden(true)}
             ></div>
           )}
           {onPin && (
-            <i
-              className="pi pi-arrow-down-left cursor-pointer"
-              onClick={onPin}
-            ></i>
+            <ArrowDownLeft className="h-4 w-4 cursor-pointer" onClick={onPin} />
           )}
         </div>
       </div>
       <div className="flex-1">{!hidden && children}</div>
       <div className="h-4 bg-gray-100"></div>
       <div
-        className="cursor-nwse-resize w-4 h-4 absolute -bottom-1 -right-2 text-gray-500"
+        className="absolute -right-2 -bottom-1 h-4 w-4 cursor-nwse-resize text-gray-500"
         onMouseDown={handleResizeMouseDown}
       >
-        <i className="pi pi-sort-down -rotate-45 w-4 h-4" />
+        <ChevronDown className="h-4 w-4 -rotate-45" />
       </div>
     </div>
   );

package/src/editor/ImageEditButton.tsx

@@ -11,7 +11,7 @@ import { ImagePlus } from "lucide-react";
 export interface MenuAction {
   id: string;
   label: string;
-  icon: string;
+  icon: React.ReactNode;
   onClick: (e?: React.MouseEvent) => void;
   parameters?: any[];
 }
@@ -39,7 +39,7 @@ export function ImageEditButton({
   triggerButton,
 
   buttonText = "Edit",
-  buttonIcon = "pi pi-ellipsis-v",
+  buttonIcon = "MoreVertical",
   testId = "menu-toggle-button",
   buttonClassName,
   defaultActionId = "select",
@@ -99,7 +99,7 @@ export function ImageEditButton({
               setShowMenu(false);
             }}
           >
-            <i className={action.icon} />
+            {action.icon}
             {action.label}
           </DropdownMenuItem>
         ))}

package/src/editor/ImageEditor.tsx

@@ -4,6 +4,7 @@ import { ImageField } from "./fieldTypes";
 //import { useDialog } from "./client/DialogContext";
 import { ClientFieldButton } from "../config/types";
 import { ImageEditButton, MenuAction } from "./ImageEditButton";
+import { Zap, Image as ImageIcon } from "lucide-react";
 
 export function ImageEditor({
   field,
@@ -55,19 +56,30 @@ export function ImageEditor({
     return field.value.alt;
   };
 
+  // Helper function to render icon
+  const renderIcon = (icon: any) => {
+    if (!icon) {
+      return <Zap strokeWidth={1} size={16} />;
+    }
+    if (typeof icon === "string") {
+      return <img src={icon} alt="" className="h-4 w-4" />;
+    }
+    return icon;
+  };
+
   // Build actions for the dropdown menu
   const menuActions: MenuAction[] = [
     {
       id: "select",
       label: getImageSrc() ? "Change Image" : "Select Image",
-      icon: "pi pi-image",
+      icon: <ImageIcon strokeWidth={1} size={16} />,
       onClick: () => selectMedia(),
     },
     ...(editContext?.configuration?.fieldTypes["image"]?.buttons?.map(
       (button: ClientFieldButton) => ({
         id: button.id,
         label: button.label,
-        icon: button.icon || "pi pi-bolt",
+        icon: renderIcon(button.icon),
         onClick: () => {
           button?.clientAction?.({
             field,

package/src/editor/PictureEditor.tsx

@@ -10,7 +10,7 @@ import {
 } from "./FieldActionsOverlay";
 import { ImageEditButton, MenuAction } from "./ImageEditButton";
 import { MagicEditImageIcon } from "./ui/Icons";
-import { ImagePlus, ExternalLink } from "lucide-react";
+import { ImagePlus, ExternalLink, Settings, Zap } from "lucide-react";
 
 export function PictureEditor({
   field,
@@ -118,17 +118,28 @@ export function PictureEditor({
     return true; // Show by default if no visible function
   });
 
+  // Helper function to render icon
+  const renderIcon = (icon: any, isGenerator?: boolean) => {
+    if (!icon) {
+      return isGenerator ? (
+        <Settings strokeWidth={1} size={16} />
+      ) : (
+        <Zap strokeWidth={1} size={16} />
+      );
+    }
+    if (typeof icon === "string") {
+      return <img src={icon} alt="" className="h-4 w-4" />;
+    }
+    return icon;
+  };
+
   // Separate primary actions (outside menu) and menu actions
-  const primaryActions = visibleVariantButtons
+  const primaryActions: MenuAction[] = visibleVariantButtons
     .filter((button) => (button as any).showInMenu === false)
     .map((button) => ({
       id: button.id,
       label: button.label,
-      icon: button.isGenerator
-        ? "pi pi-cog"
-        : button.icon && button.icon.trim() !== ""
-          ? button.icon
-          : "pi pi-bolt",
+      icon: renderIcon(button.icon, button.isGenerator),
       onClick: (e?: React.MouseEvent) => {
         const clientButton = button as any;
         // Handle component actions (like crop)
@@ -136,7 +147,7 @@ export function PictureEditor({
           setShowCropper(true);
           return;
         }
-        
+
         if (button.parameters && button.parameters.length > 0) {
           fieldActionsOverlay.current?.show(e, button);
         } else {
@@ -154,11 +165,7 @@ export function PictureEditor({
       .map((button) => ({
         id: button.id,
         label: button.label,
-        icon: button.isGenerator
-          ? "pi pi-cog"
-          : button.icon && button.icon.trim() !== ""
-            ? button.icon
-            : "pi pi-bolt",
+        icon: renderIcon(button.icon, button.isGenerator),
         onClick: (e?: React.MouseEvent) => {
           const clientButton = button as any;
           // Handle component actions (like crop)
@@ -166,7 +173,7 @@ export function PictureEditor({
             setShowCropper(true);
             return;
           }
-          
+
           if (button.parameters && button.parameters.length > 0) {
             fieldActionsOverlay.current?.show(e, button);
           } else {
@@ -179,11 +186,7 @@ export function PictureEditor({
     ...fieldButtons.map((button) => ({
       id: button.id,
       label: button.label,
-      icon: button.isGenerator
-        ? "pi pi-cog"
-        : button.icon && button.icon.trim() !== ""
-          ? button.icon
-          : "pi pi-bolt",
+      icon: renderIcon(button.icon, button.isGenerator),
       onClick: (e?: React.MouseEvent) => {
         if (button.parameters && button.parameters.length > 0) {
           fieldActionsOverlay.current?.show(e, button);
@@ -233,44 +236,31 @@ export function PictureEditor({
           }}
         >
           {/* Primary action buttons */}
-          {primaryActions.map((action, index) => {
-            // Use appropriate icon for each primary action
-            const renderIcon = () => {
-              if (action.id === 'select-image') {
-                return <ImagePlus strokeWidth={1} size={16} />;
-              } else if (action.id === 'select-from-dam') {
-                return <ExternalLink strokeWidth={1} size={16} />;
-              }
-              // Fallback to configured icon
-              return <i className={action.icon} />;
-            };
+          {primaryActions.map((action, index) => (
+            <button
+              key={action.id}
+              type="button"
+              className={`hover:bg-gray-5 cursor-pointer px-2 py-1.5 ${index > 0 ? "border-gray-3 border-l" : ""}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                action.onClick(e);
+              }}
+              data-testid={`primary-action-${action.id}`}
+            >
+              {action.icon}
+            </button>
+          ))}
 
-            return (
-              <button
-                key={action.id}
-                type="button"
-                className={`hover:bg-gray-5 cursor-pointer px-2 py-1.5 ${index > 0 ? 'border-l border-gray-3' : ''}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  action.onClick(e);
-                }}
-                data-testid={`primary-action-${action.id}`}
-              >
-                {renderIcon()}
-              </button>
-            );
-          })}
-          
           {/* Menu dropdown button */}
           {menuActions.length > 0 && (
-            <ImageEditButton 
-              actions={menuActions} 
-              compact={true} 
+            <ImageEditButton
+              actions={menuActions}
+              compact={true}
               defaultActionId="select"
               triggerButton={
                 <button
                   type="button"
-                  className={`hover:bg-gray-5 flex cursor-pointer items-center gap-2 px-2 py-1.5 ${primaryActions.length > 0 ? 'border-l border-gray-3' : ''}`}
+                  className={`hover:bg-gray-5 flex cursor-pointer items-center gap-2 px-2 py-1.5 ${primaryActions.length > 0 ? "border-gray-3 border-l" : ""}`}
                   data-testid="menu-toggle-button"
                 >
                   <MagicEditImageIcon className="mr-1" /> Edit

package/src/editor/PictureEditorDialog.tsx

@@ -10,6 +10,7 @@ import { useEditContext } from "./client/editContext";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "../components/ui/button";
 import DialogButtons from "./ui/DialogButtons";
+import { AlertTriangle, Pencil } from "lucide-react";
 
 import { getPictureValue } from "./services/editService";
 import {
@@ -231,7 +232,7 @@ export function PictureEditorDialog({
                               {(variant.width < 1 || variant.height < 1) && (
                                 <span>
                                   {" "}
-                                  <i className="pi pi-exclamation-triangle text-red-600"></i>
+                                  <AlertTriangle className="inline h-4 w-4 text-red-600" />
                                 </span>
                               )}
                             </div>
@@ -307,7 +308,7 @@ export function PictureEditorDialog({
                         className="bg-opacity-70 absolute top-0 right-0 flex cursor-pointer flex-col items-center gap-1 bg-gray-100 p-2 text-sm"
                         onClick={() => selectMedia()}
                       >
-                        <i className="pi pi-pencil text-xl"></i>
+                        <Pencil className="h-5 w-5" />
                         Choose
                       </div>
                     )}

package/src/editor/PublishDialog.ignore

@@ -1,9 +1,8 @@
-import { Dialog } from "primereact/dialog";
 
 import { Workbox as WorkboxWidget } from "./sidebar/Workbox";
 
 import DialogButtons from "./DialogButtons";
-import { Button } from "primereact/button";
+
 
 
 export function PublishDialog({

package/src/editor/ai/DancingDots.tsx

@@ -3,11 +3,16 @@ import React from "react";
 // Dancing dots component for streaming indicator
 export function DancingDots() {
   return (
-    <div className="sticky right-0 bottom-0 left-0 z-10 flex justify-start bg-white/80 px-4 py-2">
-      <div className="flex items-center gap-1">
-        <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]"></div>
-        <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]"></div>
-        <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400"></div>
+    <div className="sticky right-0 bottom-2 left-0 z-10 bg-white/80 px-4 pb-4">
+      <div className="flex gap-3">
+        <div className="w-6 flex-shrink-0"></div>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-1">
+            <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]"></div>
+            <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]"></div>
+            <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400"></div>
+          </div>
+        </div>
       </div>
     </div>
   );

package/src/editor/client/AboutDialog.tsx

@@ -1,4 +1,9 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
 import { DialogProps } from "./editContext";
 import { useImperativeHandle, useState, forwardRef, useEffect } from "react";
 import { buildDate, version } from "../../revision";
@@ -30,7 +35,7 @@ export const AboutDialog = forwardRef<DialogProps<void>, DialogProps<void>>(
       >
         <DialogContent style={{ width: 400 }}>
           <DialogHeader>
-            <DialogTitle>About parhelion</DialogTitle>
+            <DialogTitle>About parhelia</DialogTitle>
           </DialogHeader>
           <div className="flex flex-col gap-4 p-2">
             <div className="bg-wizard-demo mt-3 aspect-[1.75] w-full rounded-lg"></div>

package/src/editor/client/EditorShell.tsx

@@ -44,8 +44,6 @@ import {
 import { useEditorWebSocket } from "./hooks/useEditorWebSocket";
 import { useSocketMessageHandler } from "./hooks/useSocketMessageHandler";
 
-import "primeicons/primeicons.css";
-import "primereact/resources/themes/md-light-indigo/theme.css";
 import "react-json-view-lite/dist/index.css";
 import {
   MediaSelector,

package/src/editor/commands/createVersionCommand.ts

@@ -11,7 +11,7 @@ export function getCreateAndSwitchToNewVersionCommand({
     id: "createAndSwitchToNewVersion",
     execute: (context) => execute(context, language),
     label: "Add Version",
-    icon: "pi pi-fw pi-plus",
+    icon: "Plus",
     disabled: (context: CommandContext<any>) =>
       !context.editContext.item?.canLock,
   };

package/src/editor/commands/deleteVersionCommand.ts

@@ -9,7 +9,7 @@ export function getDeleteVersionCommand({}: {
     id: "deleteVersion",
     execute: (context) => execute(context),
     label: "Delete Version",
-    icon: "pi pi-fw pi-times",
+    icon: "X",
     disabled: (context: CommandContext<any>) =>
       !context.editContext.item?.canLock ||
       context.editContext.item.version === 0 ||

package/src/editor/commands/undo.ts

@@ -4,7 +4,7 @@ export function getUndoCommand() {
   return {
     id: "undo",
     label: "Undo",
-    icon: "pi pi-undo",
+    icon: "Undo",
     execute: async (context: CommandContext<any>) => {
       context.editContext.operations.undo();
     },
@@ -23,7 +23,7 @@ export function getRedoCommand() {
   return {
     id: "redo",
     label: "Redo",
-    icon: "pi pi-refresh",
+    icon: "RotateCw",
     execute: async (context: CommandContext<any>) => {
       context.editContext.operations.redo();
     },

package/src/editor/control-center/Status.tsx

@@ -4,6 +4,7 @@ import { usePathname, useSearchParams } from "next/navigation";
 import { useEditContext } from "../client/editContext";
 import { SimpleMenu } from "../ui/SimpleMenu";
 import { Splitter, SplitterPanel } from "../ui/Splitter";
+import { Info } from "lucide-react";
 
 export function Status() {
   const editContext = useEditContext();
@@ -103,7 +104,7 @@ export function Status() {
             selectedPanel.content
           ) : (
             <div className="flex h-full flex-col items-center justify-center text-gray-500">
-              <i className="pi pi-info-circle mb-4 text-4xl"></i>
+              <Info className="mb-4 h-10 w-10" />
               <p>Select a panel from the menu to view its content</p>
             </div>
           )}

package/src/editor/control-center/WebSocketMessages.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { formatTime } from "../utils";
 import { useEditContext } from "../client/editContext";
+import { MessageSquare, ChevronUp, ChevronDown } from "lucide-react";
 
 export function WebSocketMessages() {
   const editContext = useEditContext();
@@ -75,7 +76,7 @@ export function WebSocketMessages() {
       {/* Header */}
       <div className="flex items-center justify-between border-b border-gray-200 p-4">
         <div className="flex items-center gap-2">
-          <i className="pi pi-comments text-lg" />
+          <MessageSquare className="h-5 w-5" />
           <h3 className="text-lg font-semibold">WebSocket Messages</h3>
           <span className="rounded bg-gray-100 px-2 py-1 text-sm text-gray-800">
             {messages.length}
@@ -132,9 +133,11 @@ export function WebSocketMessages() {
                       : String(message.payload)}
                   </span>
                 </div>
-                <i
-                  className={`pi ${expandedMessages.has(message.id) ? "pi-chevron-up" : "pi-chevron-down"} text-gray-400`}
-                />
+                {expandedMessages.has(message.id) ? (
+                  <ChevronUp className="h-4 w-4 text-gray-400" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 text-gray-400" />
+                )}
               </div>
 
               {expandedMessages.has(message.id) && (

package/src/editor/field-types/TreeListEditor.tsx

@@ -12,7 +12,7 @@ import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { normalizeGuid } from "../utils";
 import ItemSearch from "../ui/ItemSearch";
 import { Button } from "../../components/ui/button";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, ExternalLink } from "lucide-react";
 import {
   Tooltip,
   TooltipContent,
@@ -118,7 +118,9 @@ export default function TreeListEditor({
 
     // Clear pending items that are now present on the server (compare by normalized id)
     let pendingChanged = false;
-    const nextPending: Record<string, ReferencedItem> = { ...pendingAddedItems };
+    const nextPending: Record<string, ReferencedItem> = {
+      ...pendingAddedItems,
+    };
     for (const key of Object.keys(nextPending)) {
       if (serverIdsNormalized.has(key)) {
         delete nextPending[key];
@@ -426,7 +428,7 @@ export default function TreeListEditor({
                           }}
                           title="Open"
                         >
-                          <i className="pi pi-arrow-up-right text-xs text-gray-500" />
+                          <ExternalLink className="h-3.5 w-3.5 text-gray-500" />
                         </button>
                       )}
                     </div>

package/src/editor/media-selector/AiImageSearch.tsx

@@ -9,7 +9,6 @@
 // import { Input } from "../../components/ui/input";
 // import { Thumbnail } from "../services/contentService";
 // import { Thumbnails } from "./Thumbnails";
-// import { Splitter, SplitterPanel } from "primereact/splitter";
 // import { Preview } from "./Preview";
 // import DialogButtons from "../ui/DialogButtons";
 // import { Button } from "../../components/ui/button";

package/src/editor/media-selector/UploadZone.tsx

@@ -3,6 +3,7 @@ import { useCallback, useRef } from "react";
 
 import { useState } from "react";
 import { Spinner } from "../ui/Spinner";
+import { Upload } from "lucide-react";
 
 export function UploadZone({
   selectedFolderId,
@@ -122,7 +123,7 @@ export function UploadZone({
         }}
       >
         <div className="flex cursor-pointer items-center gap-2">
-          <i className="pi pi-upload" />
+          <Upload className="h-5 w-5" />
           <span className="text-sm">
             {isDragging
               ? "Drop files here"

package/src/editor/menubar/ActiveUsers.tsx

@@ -10,6 +10,7 @@ import { getItemVisitors, ItemVisitor } from "../services/editService";
 import { VerticalDotsIcon } from "../ui/Icons";
 import { AboutDialog } from "../client/AboutDialog";
 import { formatDateOnly } from "../utils";
+import { Info, LogOut } from "lucide-react";
 
 type UserListItem = {
   type: "active" | "visitor";
@@ -253,10 +254,7 @@ export function ActiveUsers() {
               onClick={handleAbout}
             >
               <div className="flex h-8 w-8 items-center justify-center">
-                <i
-                  className="pi pi-info-circle text-gray-600"
-                  style={{ fontSize: "1rem" }}
-                />
+                <Info className="h-4 w-4 text-gray-600" />
               </div>
               <div className="min-w-0 flex-1">
                 <div className="text-dark text-xs font-medium">About</div>
@@ -267,10 +265,7 @@ export function ActiveUsers() {
               onClick={handleLogout}
             >
               <div className="flex h-8 w-8 items-center justify-center">
-                <i
-                  className="pi pi-sign-out text-gray-600"
-                  style={{ fontSize: "1rem" }}
-                />
+                <LogOut className="h-4 w-4 text-gray-600" />
               </div>
               <div className="min-w-0 flex-1">
                 <div className="text-dark text-xs font-medium">Log Out</div>

package/src/editor/menubar/NavButtons.tsx

@@ -1,5 +1,6 @@
 import { useEditContext } from "../client/editContext";
 import { cn } from "../../lib/utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 export function NavButtons() {
   const editContext = useEditContext();
@@ -39,7 +40,7 @@ export function NavButtons() {
           }
         }}
       >
-        <i className="pi pi-chevron-left text-sm" />
+        <ChevronLeft className="h-4 w-4" />
       </div>
       <div
         key="nav-back"
@@ -65,7 +66,7 @@ export function NavButtons() {
           }
         }}
       >
-        <i className="pi pi-chevron-right text-sm" />
+        <ChevronRight className="h-4 w-4" />
       </div>
     </>
   );

package/src/editor/page-editor-chrome/PlaceholderDropZone.tsx

@@ -217,7 +217,7 @@ export function PlaceholderDropZone({
               )}
               data-testid="placeholder-dropzone-button"
             >
-              <i className="pi pi-plus block" />
+              <Plus className="h-5 w-5" />
             </div>
           </TooltipTrigger>
           <TooltipContent>

package/src/editor/pageModel.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { InsertOption } from "../types";
 
 export type PageSkeleton = {
@@ -95,7 +96,7 @@ export type FieldButton = {
   label: string;
   description: string;
   action?: string;
-  icon?: string;
+  icon?: React.ReactNode;
   isGenerator: boolean;
   parameters?: FieldButtonParameter[];
 };

package/src/editor/reviews/PreviewInfo.tsx

@@ -1,5 +1,6 @@
 import { useEditContext } from "../../client-components";
 import { formatDate } from "../utils";
+import { Check, X } from "lucide-react";
 
 export function PreviewInfo() {
   const editContext = useEditContext();
@@ -19,16 +20,14 @@ export function PreviewInfo() {
         </div>
       </div>
       {review?.approvalDate && (
-        <i
-          className="pi pi-check text-2xl font-bold text-green-400"
-          title={"Approved " + formatDate(new Date(review.approvalDate))}
-        ></i>
+        <span title={"Approved " + formatDate(new Date(review.approvalDate))}>
+          <Check className="h-6 w-6 font-bold text-green-400" />
+        </span>
       )}
       {review?.rejectedDate && (
-        <i
-          className="pi pi-times text-2xl font-bold text-red-400"
-          title={"Rejected " + formatDate(new Date(review.rejectedDate))}
-        ></i>
+        <span title={"Rejected " + formatDate(new Date(review.rejectedDate))}>
+          <X className="h-6 w-6 font-bold text-red-400" />
+        </span>
       )}
     </div>
   );