93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import type { MicrositeV2Template } from '../../../services/api/types';
|
|
|
|
const cardStyle = (selected: boolean): React.CSSProperties => ({
|
|
border: selected ? '2px solid var(--primary)' : '1px solid var(--border)',
|
|
borderRadius: 'var(--radius-card)',
|
|
padding: '12px',
|
|
cursor: 'pointer',
|
|
background: selected ? 'color-mix(in srgb, var(--primary) 8%, var(--card))' : 'var(--card)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '8px',
|
|
minWidth: 0,
|
|
});
|
|
|
|
export function TemplatePicker({
|
|
templates,
|
|
selectedId,
|
|
onSelect,
|
|
loading,
|
|
}: {
|
|
templates: MicrositeV2Template[];
|
|
selectedId?: string;
|
|
onSelect: (t: MicrositeV2Template) => void;
|
|
loading?: boolean;
|
|
}) {
|
|
if (loading) {
|
|
return <p style={{ fontSize: 'var(--text-sm)', color: 'var(--muted)' }}>Loading templates…</p>;
|
|
}
|
|
if (templates.length === 0) {
|
|
return <p style={{ fontSize: 'var(--text-sm)', color: 'var(--muted)' }}>No templates available.</p>;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
|
|
gap: '12px',
|
|
}}
|
|
>
|
|
{templates.map((t) => {
|
|
const selected = t._id === selectedId;
|
|
return (
|
|
<button
|
|
key={t._id}
|
|
type="button"
|
|
onClick={() => onSelect(t)}
|
|
style={{ ...cardStyle(selected), textAlign: 'left' }}
|
|
>
|
|
<div
|
|
style={{
|
|
aspectRatio: '16/10',
|
|
borderRadius: 'var(--radius-button)',
|
|
background: 'var(--muted)',
|
|
overflow: 'hidden',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{t.thumbnailUrl ? (
|
|
<img
|
|
src={t.thumbnailUrl}
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
) : (
|
|
<span style={{ fontSize: 'var(--text-xs)', color: 'var(--card)' }}>No preview</span>
|
|
)}
|
|
</div>
|
|
<span
|
|
style={{
|
|
fontSize: 'var(--text-sm)',
|
|
fontWeight: 600,
|
|
color: 'var(--foreground)',
|
|
fontFamily: 'var(--font-inter)',
|
|
}}
|
|
>
|
|
{t.name}
|
|
</span>
|
|
{t.description ? (
|
|
<span style={{ fontSize: 'var(--text-xs)', color: 'var(--muted)', lineHeight: 1.3 }}>
|
|
{t.description}
|
|
</span>
|
|
) : null}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|