Add a static images manager and polish dashboard layout and fonts.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
e79211e3cd
commit
b9024ad77a
@@ -0,0 +1,279 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { X } from 'lucide-react'
|
||||
import { useT } from '../i18n/useT'
|
||||
import type { WebsiteStaticImageSlotKind } from '../types/websiteStaticImage'
|
||||
import {
|
||||
staticImagePageLabel,
|
||||
staticImagePageOptions,
|
||||
} from '../utils/staticImagePages'
|
||||
import styles from './CategoryModal.module.css'
|
||||
|
||||
export interface WebsiteStaticImageSlotFormValues {
|
||||
key: string
|
||||
label: string
|
||||
kind: WebsiteStaticImageSlotKind
|
||||
aspectRatio: string
|
||||
recommendedWidth: string
|
||||
itemCount: string
|
||||
pageKey: string
|
||||
}
|
||||
|
||||
interface WebsiteStaticImageSlotModalProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSubmit: (values: WebsiteStaticImageSlotFormValues) => void
|
||||
initial?: Partial<WebsiteStaticImageSlotFormValues>
|
||||
title: string
|
||||
submitLabel: string
|
||||
isSubmitting?: boolean
|
||||
lockKey?: boolean
|
||||
}
|
||||
|
||||
const ANIMATION_MS = 220
|
||||
const KEY_PATTERN = /^[a-zA-Z][a-zA-Z0-9_-]*$/
|
||||
const ASPECT_OPTIONS = ['16:9', '16:5', '12:19', '9:4', '4:3', '3:2', '1:1', '21:9']
|
||||
|
||||
function slugifyKey(raw: string): string {
|
||||
const slug = raw
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
if (!slug || !/^[a-z]/.test(slug)) return ''
|
||||
return KEY_PATTERN.test(slug) ? slug : ''
|
||||
}
|
||||
|
||||
export function WebsiteStaticImageSlotModal({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
initial,
|
||||
title,
|
||||
submitLabel,
|
||||
isSubmitting = false,
|
||||
lockKey = false,
|
||||
}: WebsiteStaticImageSlotModalProps) {
|
||||
const t = useT()
|
||||
const formRef = useRef<HTMLFormElement>(null)
|
||||
const [mounted, setMounted] = useState(open)
|
||||
const [closing, setClosing] = useState(false)
|
||||
const [key, setKey] = useState(initial?.key ?? '')
|
||||
const [label, setLabel] = useState(initial?.label ?? '')
|
||||
const [kind, setKind] = useState<WebsiteStaticImageSlotKind>(initial?.kind ?? 'single')
|
||||
const [aspectRatio, setAspectRatio] = useState(initial?.aspectRatio ?? '16:9')
|
||||
const [recommendedWidth, setRecommendedWidth] = useState(initial?.recommendedWidth ?? '1440')
|
||||
const [itemCount, setItemCount] = useState(initial?.itemCount ?? '')
|
||||
const [pageKey, setPageKey] = useState(initial?.pageKey ?? 'home')
|
||||
const [keyTouched, setKeyTouched] = useState(Boolean(initial?.key))
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setMounted(true)
|
||||
setClosing(false)
|
||||
setKey(initial?.key ?? '')
|
||||
setLabel(initial?.label ?? '')
|
||||
setKind(initial?.kind ?? 'single')
|
||||
setAspectRatio(initial?.aspectRatio ?? '16:9')
|
||||
setRecommendedWidth(initial?.recommendedWidth ?? '1440')
|
||||
setItemCount(initial?.itemCount ?? '')
|
||||
setPageKey(initial?.pageKey ?? 'home')
|
||||
setKeyTouched(Boolean(initial?.key) || lockKey)
|
||||
} else if (mounted) {
|
||||
setClosing(true)
|
||||
const timer = setTimeout(() => {
|
||||
setMounted(false)
|
||||
setClosing(false)
|
||||
}, ANIMATION_MS)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [open, mounted, initial, lockKey])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted || closing) return
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
document.addEventListener('keydown', onKey)
|
||||
return () => document.removeEventListener('keydown', onKey)
|
||||
}, [mounted, closing, onClose])
|
||||
|
||||
if (!mounted) return null
|
||||
|
||||
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
const nextLabel = label.trim()
|
||||
const nextKey = slugifyKey(key) || slugifyKey(nextLabel)
|
||||
if (!nextKey || !nextLabel) return
|
||||
onSubmit({
|
||||
key: nextKey,
|
||||
label: nextLabel,
|
||||
kind,
|
||||
aspectRatio,
|
||||
recommendedWidth: recommendedWidth.trim(),
|
||||
itemCount: kind === 'single' ? '1' : itemCount.trim(),
|
||||
pageKey,
|
||||
})
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
|
||||
onClick={(e) => e.target === e.currentTarget && onClose()}
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
className={`${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="static-image-slot-title"
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<h3 id="static-image-slot-title" className={styles.title}>
|
||||
{title}
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.closeBtn}
|
||||
onClick={onClose}
|
||||
aria-label={t('common.close')}
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form ref={formRef} className={styles.form} onSubmit={handleSubmit}>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="static-image-slot-page">{t('website.staticImages.page')}</label>
|
||||
<select
|
||||
id="static-image-slot-page"
|
||||
value={pageKey}
|
||||
onChange={(e) => setPageKey(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{staticImagePageOptions([pageKey]).map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{staticImagePageLabel(option, t)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="static-image-slot-label">{t('website.staticImages.slotLabel')}</label>
|
||||
<input
|
||||
id="static-image-slot-label"
|
||||
type="text"
|
||||
value={label}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value
|
||||
setLabel(next)
|
||||
if (!keyTouched && !lockKey) setKey(slugifyKey(next))
|
||||
}}
|
||||
placeholder={t('website.staticImages.slotLabelPlaceholder')}
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="static-image-slot-key">{t('website.staticImages.slotKey')}</label>
|
||||
<input
|
||||
id="static-image-slot-key"
|
||||
type="text"
|
||||
dir="ltr"
|
||||
value={key}
|
||||
onChange={(e) => {
|
||||
setKeyTouched(true)
|
||||
setKey(e.target.value)
|
||||
}}
|
||||
placeholder="home-hero"
|
||||
disabled={isSubmitting || lockKey}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="static-image-slot-kind">{t('website.staticImages.kind')}</label>
|
||||
<select
|
||||
id="static-image-slot-kind"
|
||||
value={kind}
|
||||
onChange={(e) => setKind(e.target.value as WebsiteStaticImageSlotKind)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<option value="single">{t('website.staticImages.kindSingle')}</option>
|
||||
<option value="list">{t('website.staticImages.kindList')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{kind === 'list' ? (
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="static-image-slot-count">{t('website.staticImages.itemCount')}</label>
|
||||
<input
|
||||
id="static-image-slot-count"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
dir="ltr"
|
||||
value={itemCount}
|
||||
onChange={(e) => setItemCount(e.target.value.replace(/[^\d]/g, ''))}
|
||||
placeholder={t('website.staticImages.itemCountPlaceholder')}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<p className={styles.hint}>{t('website.staticImages.itemCountHint')}</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="static-image-slot-aspect">{t('website.staticImages.aspectRatio')}</label>
|
||||
<select
|
||||
id="static-image-slot-aspect"
|
||||
value={aspectRatio}
|
||||
onChange={(e) => setAspectRatio(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{ASPECT_OPTIONS.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
{aspectRatio && !ASPECT_OPTIONS.includes(aspectRatio) ? (
|
||||
<option value={aspectRatio}>{aspectRatio}</option>
|
||||
) : null}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="static-image-slot-width">
|
||||
{t('website.staticImages.recommendedWidth')}
|
||||
</label>
|
||||
<input
|
||||
id="static-image-slot-width"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
dir="ltr"
|
||||
value={recommendedWidth}
|
||||
onChange={(e) => setRecommendedWidth(e.target.value.replace(/[^\d]/g, ''))}
|
||||
placeholder="1440"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.cancelBtn}
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{t('products.form.cancel')}
|
||||
</button>
|
||||
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
|
||||
{isSubmitting ? t('website.saving') : submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user