x
This commit is contained in:
Your Name committed
1 parent
dba82b26a8
commit
943fd8f1a3
16 files changed
+257
-20
No files matched your search
@@ -110,6 +110,8 @@ export default function BannerForm({
|
||||
onChangeContentWidth={(w) => updatePayloadValue('contentWidth', w)}
|
||||
textColorScheme={editingSection.payload?.textColorScheme}
|
||||
onChangeTextColorScheme={(scheme) => updatePayloadValue('textColorScheme', scheme)}
|
||||
titleSize={editingSection.payload?.titleSize}
|
||||
onChangeTitleSize={(size) => updatePayloadValue('titleSize', size)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Monitor, Smartphone, RotateCcw, Maximize2, Sun, Moon, Palette } from 'lucide-react';
|
||||
import { Monitor, Smartphone, RotateCcw, Maximize2, Sun, Moon, Palette, Type } from 'lucide-react';
|
||||
|
||||
export const GRID_POSITIONS = [
|
||||
{ id: 'top-left', label: 'Top Left (บนซ้าย)', short: 'TL', icon: '↖' },
|
||||
@@ -18,6 +18,13 @@ export const WIDTH_OPTIONS = [
|
||||
{ id: 'compact', label: 'กรอบกระชับ (768px)', desc: 'กล่องกะทัดรัด max-w-3xl' },
|
||||
] as const;
|
||||
|
||||
export const TITLE_SIZE_OPTIONS = [
|
||||
{ id: 'sm', label: 'กะทัดรัด (Small / 44px)', desc: 'เหมาะกับข้อความยาว หรือภาพที่มีสินค้าเด่นด้านข้าง ไม่ชนสินค้า' },
|
||||
{ id: 'md', label: 'ปานกลาง (Medium / 60px)', desc: 'ขนาดมาตรฐานบทความ / Heading ชัดเจน ไม่ล้นจอ' },
|
||||
{ id: 'lg', label: 'ใหญ่ (Large / 76px)', desc: 'ขนาดโปรโมชัน เน้นตัวอักษรเด่นและสะดุดตา' },
|
||||
{ id: 'xl', label: 'ยักษ์ (Display / 96px)', desc: 'ขนาดดั้งเดิม (Display Huge) เหมาะกับคำสั้น 2-3 คำ' },
|
||||
] as const;
|
||||
|
||||
export const COLOR_SCHEME_OPTIONS = [
|
||||
{
|
||||
id: 'light',
|
||||
@@ -45,6 +52,8 @@ export interface ContentPositionPickerProps {
|
||||
onChangeContentWidth?: (width: string) => void;
|
||||
textColorScheme?: 'light' | 'dark' | string;
|
||||
onChangeTextColorScheme?: (scheme: 'light' | 'dark') => void;
|
||||
titleSize?: 'sm' | 'md' | 'lg' | 'xl' | string;
|
||||
onChangeTitleSize?: (size: string) => void;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
compact?: boolean;
|
||||
@@ -60,6 +69,8 @@ export default function ContentPositionPicker({
|
||||
onChangeContentWidth,
|
||||
textColorScheme,
|
||||
onChangeTextColorScheme,
|
||||
titleSize,
|
||||
onChangeTitleSize,
|
||||
title = 'ตำแหน่งปุ่ม & เนื้อหา (Button & Content Position)',
|
||||
subtitle = 'สามารถแยกตำแหน่งระหว่าง Desktop (PC) และ Mobile (มือถือ) ได้อิสระ',
|
||||
compact = false,
|
||||
@@ -255,6 +266,43 @@ export default function ContentPositionPicker({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title Size / Heading Scale Preset Selection */}
|
||||
{onChangeTitleSize && (
|
||||
<div className="bg-night-950/40 border border-white/5 p-3 rounded-2xl space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[11px] font-bold uppercase tracking-wider text-slate-300 flex items-center gap-1.5">
|
||||
<Type className="w-3.5 h-3.5 text-cyan-glow" />
|
||||
ขนาดตัวอักษรหัวข้อ (Title Font Size Preset)
|
||||
</span>
|
||||
<span className="px-2 py-0.5 rounded-md bg-cyan-glow/10 text-cyan-glow font-mono font-bold text-[10px] border border-cyan-glow/20">
|
||||
{(titleSize || 'xl').toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
{TITLE_SIZE_OPTIONS.map((opt) => {
|
||||
const isSelected = (titleSize || 'xl') === opt.id;
|
||||
return (
|
||||
<button
|
||||
key={opt.id}
|
||||
type="button"
|
||||
onClick={() => onChangeTitleSize(opt.id)}
|
||||
className={`px-3 py-2.5 rounded-xl text-left transition-all border cursor-pointer ${
|
||||
isSelected
|
||||
? 'bg-cyan-glow/15 border-cyan-glow/50 text-white shadow-sm ring-1 ring-cyan-glow/30'
|
||||
: 'bg-night-900 border-white/5 text-slate-400 hover:text-white hover:border-white/10'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-bold leading-tight">{opt.label}</span>
|
||||
</div>
|
||||
<div className="text-[9px] text-slate-500 mt-1 leading-tight">{opt.desc}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -72,6 +72,20 @@ export default function HeroArticleForm({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Title Font Size</label>
|
||||
<select
|
||||
value={editingSection.payload?.titleSize || 'xl'}
|
||||
onChange={(e) => updatePayloadValue('titleSize', e.target.value)}
|
||||
className="admin-input w-full bg-slate-900 border-white/10"
|
||||
>
|
||||
<option value="sm">Small (กะทัดรัด / 44px)</option>
|
||||
<option value="md">Medium (ปานกลาง / 60px)</option>
|
||||
<option value="lg">Large (ใหญ่ / 76px)</option>
|
||||
<option value="xl">Display (ยักษ์ / 96px)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Author</label>
|
||||
<input
|
||||
|
||||
@@ -236,6 +236,8 @@ export default function HeroForm({
|
||||
onChangeContentWidth={(w) => updatePayloadValue('contentWidth', w)}
|
||||
textColorScheme={editingSection.payload?.textColorScheme}
|
||||
onChangeTextColorScheme={(scheme) => updatePayloadValue('textColorScheme', scheme)}
|
||||
titleSize={editingSection.payload?.titleSize}
|
||||
onChangeTitleSize={(size) => updatePayloadValue('titleSize', size)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -71,6 +71,20 @@ export default function HeroV2Form({
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Title Font Size</label>
|
||||
<select
|
||||
value={editingSection.payload?.titleSize || 'lg'}
|
||||
onChange={(e) => updatePayloadValue('titleSize', e.target.value)}
|
||||
className="admin-input w-full bg-slate-900 border-white/10"
|
||||
>
|
||||
<option value="sm">Small (กะทัดรัด / 44px)</option>
|
||||
<option value="md">Medium (ปานกลาง / 60px)</option>
|
||||
<option value="lg">Large (ใหญ่ / 76px)</option>
|
||||
<option value="xl">Display (ยักษ์ / 96px)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 flex items-center gap-2 pt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
|
||||
@@ -303,6 +303,8 @@ export default function HeroVideoForm({
|
||||
onChangeContentWidth={(w) => updatePayloadValue('contentWidth', w)}
|
||||
textColorScheme={payload.textColorScheme}
|
||||
onChangeTextColorScheme={(scheme) => updatePayloadValue('textColorScheme', scheme)}
|
||||
titleSize={payload.titleSize}
|
||||
onChangeTitleSize={(size) => updatePayloadValue('titleSize', size)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user