254 lines
8.3 KiB
TypeScript
254 lines
8.3 KiB
TypeScript
'use client'
|
|
|
|
import { Pencil, Plus, Trash2 } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { createBanner, deleteBanner, updateBanner } from '@/actions/banners'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { DateTimePicker } from '@/components/ui/date-time-picker'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import { useServerAction } from '@/hooks/use-server-action'
|
|
|
|
interface Banner {
|
|
id: number
|
|
title: string
|
|
subtitle: string
|
|
image: string
|
|
link: string
|
|
color: string
|
|
isActive: number
|
|
sortOrder: number
|
|
startDate: string | null
|
|
endDate: string | null
|
|
}
|
|
|
|
interface Props {
|
|
banners: Banner[]
|
|
}
|
|
|
|
export function BannersManager({ banners }: Props) {
|
|
const { run, isPending } = useServerAction()
|
|
const [showForm, setShowForm] = useState(false)
|
|
const [editingId, setEditingId] = useState<number | null>(null)
|
|
const [form, setForm] = useState({
|
|
title: '',
|
|
subtitle: '',
|
|
image: '',
|
|
link: '',
|
|
color: '',
|
|
isActive: 1,
|
|
sortOrder: 0,
|
|
startDate: '' as string | null,
|
|
endDate: '' as string | null,
|
|
})
|
|
|
|
function resetForm() {
|
|
setForm({
|
|
title: '',
|
|
subtitle: '',
|
|
image: '',
|
|
link: '',
|
|
color: '',
|
|
isActive: 1,
|
|
sortOrder: 0,
|
|
startDate: '',
|
|
endDate: '',
|
|
})
|
|
setEditingId(null)
|
|
setShowForm(false)
|
|
}
|
|
|
|
function handleEdit(b: Banner) {
|
|
setForm({
|
|
title: b.title,
|
|
subtitle: b.subtitle,
|
|
image: b.image,
|
|
link: b.link,
|
|
color: b.color,
|
|
isActive: b.isActive,
|
|
sortOrder: b.sortOrder,
|
|
startDate: b.startDate,
|
|
endDate: b.endDate,
|
|
})
|
|
setEditingId(b.id)
|
|
setShowForm(true)
|
|
}
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
const data = { ...form, startDate: form.startDate || null, endDate: form.endDate || null }
|
|
if (editingId) {
|
|
run(() => updateBanner({ id: editingId, ...data }), { successMessage: 'Banner updated!' })
|
|
} else {
|
|
run(() => createBanner(data), { successMessage: 'Banner created!' })
|
|
}
|
|
resetForm()
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={() => {
|
|
resetForm()
|
|
setShowForm(!showForm)
|
|
}}
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" /> New Banner
|
|
</Button>
|
|
</div>
|
|
|
|
{showForm && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{editingId ? 'Edit Banner' : 'New Banner'}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label>Title</Label>
|
|
<Input
|
|
value={form.title}
|
|
onChange={(e) => setForm({ ...form, title: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Subtitle</Label>
|
|
<Input
|
|
value={form.subtitle}
|
|
onChange={(e) => setForm({ ...form, subtitle: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label>Image URL</Label>
|
|
<Input
|
|
value={form.image}
|
|
onChange={(e) => setForm({ ...form, image: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Link URL</Label>
|
|
<Input
|
|
value={form.link}
|
|
onChange={(e) => setForm({ ...form, link: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="space-y-2">
|
|
<Label>Color</Label>
|
|
<Input
|
|
type="color"
|
|
value={form.color || '#000000'}
|
|
onChange={(e) => setForm({ ...form, color: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Start Date</Label>
|
|
<DateTimePicker
|
|
value={form.startDate}
|
|
onChange={(d) => setForm({ ...form, startDate: d ? d.toISOString() : null })}
|
|
placeholder="Select start date"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>End Date</Label>
|
|
<DateTimePicker
|
|
value={form.endDate}
|
|
onChange={(d) => setForm({ ...form, endDate: d ? d.toISOString() : null })}
|
|
placeholder="Select end date"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-6">
|
|
<div className="flex items-center gap-2">
|
|
<Switch
|
|
checked={form.isActive === 1}
|
|
onCheckedChange={(v) => setForm({ ...form, isActive: v ? 1 : 0 })}
|
|
/>
|
|
<Label>Active</Label>
|
|
</div>
|
|
<div className="space-y-2 flex items-center gap-2">
|
|
<Label>Order</Label>
|
|
<Input
|
|
type="number"
|
|
className="w-20"
|
|
value={form.sortOrder}
|
|
onChange={(e) => setForm({ ...form, sortOrder: Number(e.target.value) })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 justify-end">
|
|
<Button type="button" variant="outline" onClick={resetForm}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={isPending}>
|
|
{editingId ? 'Update' : 'Create'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{banners.length === 0 && (
|
|
<p className="text-muted-foreground col-span-full text-center py-8">No banners yet.</p>
|
|
)}
|
|
{banners.map((b) => (
|
|
<Card key={b.id} className="overflow-hidden">
|
|
{b.image && (
|
|
<div
|
|
className="h-32 bg-cover bg-center"
|
|
style={{ backgroundImage: `url(${b.image})` }}
|
|
/>
|
|
)}
|
|
<CardContent className="p-4">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h3 className="font-medium">{b.title}</h3>
|
|
{b.subtitle && <p className="text-xs text-muted-foreground">{b.subtitle}</p>}
|
|
<div className="flex gap-1 mt-2">
|
|
<Badge variant={b.isActive ? 'default' : 'outline'}>
|
|
{b.isActive ? 'Active' : 'Inactive'}
|
|
</Badge>
|
|
{b.startDate && <Badge variant="secondary">Scheduled</Badge>}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7"
|
|
onClick={() => handleEdit(b)}
|
|
>
|
|
<Pencil className="h-3.5 w-3.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7"
|
|
onClick={() =>
|
|
run(() => deleteBanner({ id: b.id }), { successMessage: 'Banner deleted' })
|
|
}
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5 text-destructive" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|