feat(frontend): restyle format picker and add file size to the config card
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { File as FileIcon } from '@phosphor-icons/react';
|
||||
import { formatBytes } from '../utils/formatBytes.js';
|
||||
|
||||
const QUALITY_FORMATS = ['jpg', 'jpeg', 'webp', 'avif', 'tiff'];
|
||||
const ICON_SIZES = [16, 32, 48, 256, 512];
|
||||
@@ -7,21 +8,28 @@ const DEFAULT_ICON_SIZE = 256;
|
||||
export function FileConfigCard({ item, index, t, onTargetFormatChange, onQualityChange, onIconSizeChange }) {
|
||||
return (
|
||||
<li className="file-config-card">
|
||||
<FileIcon size={24} weight="regular" />
|
||||
<span className="file-config-name">{item.file.name}</span>
|
||||
<div className="file-tile-header">
|
||||
<FileIcon size={24} weight="regular" />
|
||||
<span className="file-tile-name">{item.file.name}</span>
|
||||
<span className="file-tile-size">{formatBytes(item.file.size)}</span>
|
||||
</div>
|
||||
|
||||
{item.targets.length > 0 ? (
|
||||
<div className="file-config-controls">
|
||||
<select
|
||||
value={item.targetFormat ?? ''}
|
||||
onChange={(event) => onTargetFormatChange(index, event.target.value)}
|
||||
>
|
||||
{item.targets.map((target) => (
|
||||
<option key={target} value={target}>
|
||||
{target}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="format-select-group">
|
||||
<select
|
||||
className="format-select"
|
||||
value={item.targetFormat ?? ''}
|
||||
onChange={(event) => onTargetFormatChange(index, event.target.value)}
|
||||
>
|
||||
{item.targets.map((target) => (
|
||||
<option key={target} value={target}>
|
||||
{target}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{item.targetFormat && <span className="format-badge">{item.targetFormat.toUpperCase()}</span>}
|
||||
</div>
|
||||
|
||||
{QUALITY_FORMATS.includes(item.targetFormat) && (
|
||||
<label>
|
||||
|
||||
Reference in New Issue
Block a user