asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: fix command bar position outside modal in category images guide (#13987)

Browse Source
This commit is contained in:
Shahed Nasser
2025-11-06 19:19:43 +02:00
committed by GitHub
parent e42e6f0daa
commit 01a5ce949e
3 changed files with 154 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
www/apps/resources/app/how-to-tutorials/tutorials/category-images/page.mdx
View File

@@ -1385,54 +1385,51 @@ Finally, you'll render the modal. Replace the `// TODO render modal` comment wit
```tsx title="src/admin/components/category-media/category-media-modal.tsx"
return (
<>
{/* TODO show command bar */}
<FocusModal open={open} onOpenChange={handleOpenChange}>
<FocusModal.Trigger asChild>
<Button size="small" variant="secondary">
Edit
</Button>
</FocusModal.Trigger>
<FocusModal open={open} onOpenChange={handleOpenChange}>
<FocusModal.Trigger asChild>
<Button size="small" variant="secondary">
Edit
</Button>
</FocusModal.Trigger>
<FocusModal.Content>
<FocusModal.Header>
<Heading>Edit Media</Heading>
</FocusModal.Header>
<FocusModal.Content>
<FocusModal.Header>
<Heading>Edit Media</Heading>
</FocusModal.Header>
<FocusModal.Body className="flex h-full overflow-hidden">
<div className="flex w-full h-full flex-col-reverse lg:grid lg:grid-cols-[1fr_560px]">
<CategoryImageGallery
existingImages={existingImages}
uploadedFiles={uploadedFiles}
currentThumbnailId={currentThumbnailId}
/>
<CategoryImageUpload
fileInputRef={fileInputRef}
isUploading={uploadFilesMutation.isPending}
onFileSelect={handleUploadFile}
/>
</div>
</FocusModal.Body>
<FocusModal.Footer>
<div className="flex items-center justify-end gap-x-2">
<FocusModal.Close asChild>
<Button size="small" variant="secondary">
Cancel
</Button>
</FocusModal.Close>
<Button
size="small"
onClick={handleSave}
isLoading={isSaving}
>
Save
<FocusModal.Body className="flex h-full overflow-hidden">
<div className="flex w-full h-full flex-col-reverse lg:grid lg:grid-cols-[1fr_560px]">
<CategoryImageGallery
existingImages={existingImages}
uploadedFiles={uploadedFiles}
currentThumbnailId={currentThumbnailId}
/>
<CategoryImageUpload
fileInputRef={fileInputRef}
isUploading={uploadFilesMutation.isPending}
onFileSelect={handleUploadFile}
/>
</div>
{/* TODO show command bar */}
</FocusModal.Body>
<FocusModal.Footer>
<div className="flex items-center justify-end gap-x-2">
<FocusModal.Close asChild>
<Button size="small" variant="secondary">
Cancel
</Button>
</div>
</FocusModal.Footer>
</FocusModal.Content>
</FocusModal>
</>
</FocusModal.Close>
<Button
size="small"
onClick={handleSave}
isLoading={isSaving}
>
Save
</Button>
</div>
</FocusModal.Footer>
</FocusModal.Content>
</FocusModal>
)
```