componenets standardization 1

This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 21:42:04 +00:00
parent c880e24fc0
commit a4691ad2da
95 changed files with 3597 additions and 1745 deletions

View File

@@ -7,6 +7,7 @@
*/
import React, { useState, useRef } from 'react';
import { Button } from '../ui/button/Button';
import IconButton from '../ui/button/IconButton';
import { Dropdown } from '../ui/dropdown/Dropdown';
import {
MoreDotIcon,
@@ -66,14 +67,15 @@ export const ContentActionsMenu: React.FC<ContentActionsMenuProps> = ({
return (
<>
<button
<IconButton
ref={buttonRef}
aria-label="more actions"
icon={<MoreDotIcon className="h-5 w-5" />}
variant="ghost"
tone="neutral"
size="sm"
title="more actions"
onClick={() => setIsOpen(!isOpen)}
className="dropdown-toggle flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
>
<MoreDotIcon className="h-5 w-5" />
</button>
/>
<Dropdown
isOpen={isOpen}
@@ -86,61 +88,76 @@ export const ContentActionsMenu: React.FC<ContentActionsMenuProps> = ({
{/* WordPress Publishing - Only show if images are ready */}
{canPublishToWordPress && (
<>
<button
<Button
variant="ghost"
tone="neutral"
size="sm"
onClick={handlePublishClick}
className="flex w-full items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
startIcon={<PaperPlaneIcon className="h-4 w-4" />}
className="w-full justify-start px-4 py-2"
>
<PaperPlaneIcon className="h-4 w-4" />
<span>Publish to Site</span>
</button>
Publish to Site
</Button>
<div className="my-1 border-t border-gray-200 dark:border-gray-700" />
</>
)}
{/* Edit Action */}
{onEdit && (
<button
<Button
variant="ghost"
tone="neutral"
size="sm"
onClick={() => handleMenuAction(onEdit)}
className="flex w-full items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
startIcon={<PencilIcon className="h-4 w-4" />}
className="w-full justify-start px-4 py-2"
>
<PencilIcon className="h-4 w-4" />
<span>Edit</span>
</button>
Edit
</Button>
)}
{/* Generate Image Action */}
{onGenerateImage && (
<button
<Button
variant="ghost"
tone="neutral"
size="sm"
onClick={() => handleMenuAction(onGenerateImage)}
className="flex w-full items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
startIcon={<FileIcon className="h-4 w-4" />}
className="w-full justify-start px-4 py-2"
>
<FileIcon className="h-4 w-4" />
<span>Generate Image Prompts</span>
</button>
Generate Image Prompts
</Button>
)}
{/* Export Action */}
{onExport && (
<button
<Button
variant="ghost"
tone="neutral"
size="sm"
onClick={() => handleMenuAction(onExport)}
className="flex w-full items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
startIcon={<DownloadIcon className="h-4 w-4" />}
className="w-full justify-start px-4 py-2"
>
<DownloadIcon className="h-4 w-4" />
<span>Export</span>
</button>
Export
</Button>
)}
{/* Delete Action */}
{onDelete && (
<>
<div className="my-1 border-t border-gray-200 dark:border-gray-700" />
<button
<Button
variant="ghost"
tone="danger"
size="sm"
onClick={() => handleMenuAction(onDelete)}
className="flex w-full items-center gap-3 px-4 py-2 text-sm text-error-600 hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-500/10"
startIcon={<TrashBinIcon className="h-4 w-4" />}
className="w-full justify-start px-4 py-2"
>
<TrashBinIcon className="h-4 w-4" />
<span>Delete</span>
</button>
Delete
</Button>
</>
)}
</div>