mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 21:46:49 +00:00
Maurice
c8d8ddfd3e
ApplyTemplateButton and the packing list header drew the same template row in their menus. PackingTemplateOption now draws it; the header's faded hover stays a parameter (fade).
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { Package } from 'lucide-react';
|
|
import type { TranslationFn } from '../../types';
|
|
|
|
interface PackingTemplateOptionProps {
|
|
name: string;
|
|
itemCount: number;
|
|
onClick: () => void;
|
|
t: TranslationFn;
|
|
/** Fade the hover background in rather than switching it. */
|
|
fade?: boolean;
|
|
}
|
|
|
|
/** One packing template in an apply menu: its name over how many items it adds. */
|
|
export function PackingTemplateOption({ name, itemCount, onClick, t, fade = false }: PackingTemplateOptionProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
width: '100%',
|
|
padding: '8px 12px',
|
|
borderRadius: 8,
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
background: 'transparent',
|
|
fontFamily: 'inherit',
|
|
fontSize: 'calc(12px * var(--fs-scale-body, 1))',
|
|
color: 'var(--text-primary)',
|
|
transition: fade ? 'background 0.1s' : undefined,
|
|
}}
|
|
onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--bg-tertiary)')}
|
|
onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
|
|
>
|
|
<Package size={13} className="text-content-faint" />
|
|
<div style={{ flex: 1, textAlign: 'start' }}>
|
|
<div style={{ fontWeight: 600 }}>{name}</div>
|
|
<div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>
|
|
{itemCount} {t('admin.packingTemplates.items', { count: itemCount })}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|