endery/voxblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add feature image preview with remove button in MetadataPanel

Browse Source
This commit is contained in:
Ender 2025-10-24 16:00:43 +02:00
parent b36a53fd45
commit b3e6159519
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/admin/src/components/MetadataPanel.tsx
View File

@ -1,4 +1,4 @@
import { Box, Button, Stack, TextField, Typography } from '@mui/material';
import { Box, Button, Stack, TextField, Typography, IconButton } from '@mui/material';
import { useState } from 'react';
export type Metadata = {
@ -25,6 +25,23 @@ export default function MetadataPanel({ value, onChange, onPublish }: {
<TextField label="Tags (comma-separated)" value={value.tagsText} onChange={(e) => set({ tagsText: e.target.value })} fullWidth />
<TextField label="Canonical URL" value={value.canonicalUrl} onChange={(e) => set({ canonicalUrl: e.target.value })} fullWidth />
<TextField label="Feature Image URL" value={value.featureImage || ''} onChange={(e) => set({ featureImage: e.target.value })} fullWidth />
{value.featureImage && (
<Box sx={{ position: 'relative', border: '1px solid #eee', borderRadius: 1, overflow: 'hidden', height: 180, background: '#fafafa' }}>
<img
src={value.featureImage}
alt="feature"
style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
/>
<IconButton
size="small"
onClick={() => set({ featureImage: '' })}
sx={{ position: 'absolute', top: 6, right: 6, bgcolor: 'rgba(255,255,255,0.9)', '&:hover': { bgcolor: 'rgba(255,255,255,1)' } }}
aria-label="Remove feature image"
>
×
</IconButton>
</Box>
)}
<Stack direction="row" spacing={1}>
<Button variant="outlined" disabled={busy} onClick={() => onPublish('draft')}>Save Draft to Ghost</Button>
<Button variant="contained" disabled={busy} onClick={() => onPublish('published')}>Publish to Ghost</Button>