fix typo
This commit is contained in:
@@ -153,23 +153,23 @@ const AdminGallery = () => {
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Event Gallery Management
|
||||
</h1>
|
||||
<p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Upload and manage photos for event galleries
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Event Selection */}
|
||||
<Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
|
||||
<Card className="p-6 bg-background border-[var(--neutral-800)] rounded-xl">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Select Event
|
||||
</Label>
|
||||
<Select value={selectedEvent || ''} onValueChange={setSelectedEvent}>
|
||||
<SelectTrigger className="border-var(--neutral-800) rounded-xl">
|
||||
<SelectTrigger className="border-[var(--neutral-800)] rounded-xl">
|
||||
<SelectValue placeholder="Choose an event..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -184,19 +184,19 @@ const AdminGallery = () => {
|
||||
|
||||
{/* Empty State Message */}
|
||||
{events.length === 0 && (
|
||||
<div className="mt-4 p-4 bg-var(--lavender-300) border-2 border-var(--neutral-800) rounded-xl">
|
||||
<div className="mt-4 p-4 bg-[var(--lavender-300)] border-2 border-[var(--neutral-800)] rounded-xl">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
|
||||
<AlertCircle className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h4 className="text-sm font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
No Events Available
|
||||
</h4>
|
||||
<p className="text-sm text-var(--purple-lavender) mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-[var(--purple-lavender)] mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
You need to create an event before uploading gallery images. Events help organize photos by occasion.
|
||||
</p>
|
||||
<Link to="/admin/events">
|
||||
<Button
|
||||
className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl text-sm"
|
||||
className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
<Calendar className="h-4 w-4 mr-2" />
|
||||
@@ -221,7 +221,7 @@ const AdminGallery = () => {
|
||||
<Button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploading}
|
||||
className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl"
|
||||
className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
{uploading ? (
|
||||
@@ -236,7 +236,7 @@ const AdminGallery = () => {
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
You can select multiple images. Max {formatFileSize(maxFileSize)} per image.
|
||||
</p>
|
||||
</div>
|
||||
@@ -246,12 +246,12 @@ const AdminGallery = () => {
|
||||
|
||||
{/* Gallery Grid */}
|
||||
{selectedEvent && (
|
||||
<Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
|
||||
<Card className="p-6 bg-background border-[var(--neutral-800)] rounded-xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h2 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Gallery Images
|
||||
</h2>
|
||||
<Badge className="bg-var(--purple-lavender) text-white px-3 py-1">
|
||||
<Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1">
|
||||
{galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
|
||||
</Badge>
|
||||
</div>
|
||||
@@ -260,7 +260,7 @@ const AdminGallery = () => {
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{galleryImages.map((image) => (
|
||||
<div key={image.id} className="relative group">
|
||||
<div className="aspect-square rounded-xl overflow-hidden bg-var(--lavender-500)">
|
||||
<div className="aspect-square rounded-xl overflow-hidden bg-[var(--lavender-500)]">
|
||||
<img
|
||||
src={image.image_url}
|
||||
alt={image.caption || 'Gallery image'}
|
||||
@@ -275,7 +275,7 @@ const AdminGallery = () => {
|
||||
<Button
|
||||
onClick={() => openEditCaption(image)}
|
||||
size="sm"
|
||||
className="bg-background/90 hover:bg-background text-var(--purple-ink) rounded-lg"
|
||||
className="bg-background/90 hover:bg-background text-[var(--purple-ink)] rounded-lg"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-1" />
|
||||
@@ -299,7 +299,7 @@ const AdminGallery = () => {
|
||||
{/* Caption Preview */}
|
||||
{image.caption && (
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-var(--purple-lavender) line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-[var(--purple-lavender)] line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{image.caption}
|
||||
</p>
|
||||
</div>
|
||||
@@ -307,7 +307,7 @@ const AdminGallery = () => {
|
||||
|
||||
{/* File Size */}
|
||||
<div className="mt-1">
|
||||
<p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{formatFileSize(image.file_size_bytes)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -316,11 +316,11 @@ const AdminGallery = () => {
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-16">
|
||||
<ImageIcon className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<ImageIcon className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
No Images Yet
|
||||
</h3>
|
||||
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Upload images to create a gallery for this event.
|
||||
</p>
|
||||
</div>
|
||||
@@ -332,14 +332,14 @@ const AdminGallery = () => {
|
||||
<Dialog open={!!editingCaption} onOpenChange={() => setEditingCaption(null)}>
|
||||
<DialogContent className="bg-background sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<DialogTitle className="text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Edit Image Caption
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{editingCaption && (
|
||||
<div className="space-y-4">
|
||||
<div className="aspect-video rounded-xl overflow-hidden bg-var(--lavender-500)">
|
||||
<div className="aspect-video rounded-xl overflow-hidden bg-[var(--lavender-500)]">
|
||||
<img
|
||||
src={editingCaption.image_url}
|
||||
alt="Preview"
|
||||
@@ -348,7 +348,7 @@ const AdminGallery = () => {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Label className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Caption
|
||||
</Label>
|
||||
<Textarea
|
||||
@@ -356,7 +356,7 @@ const AdminGallery = () => {
|
||||
onChange={(e) => setNewCaption(e.target.value)}
|
||||
placeholder="Add a caption for this image..."
|
||||
rows={3}
|
||||
className="border-var(--neutral-800) rounded-xl mt-2"
|
||||
className="border-[var(--neutral-800)] rounded-xl mt-2"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
/>
|
||||
</div>
|
||||
@@ -367,14 +367,14 @@ const AdminGallery = () => {
|
||||
<Button
|
||||
onClick={() => setEditingCaption(null)}
|
||||
variant="outline"
|
||||
className="border-var(--neutral-800) text-var(--purple-lavender) rounded-xl"
|
||||
className="border-[var(--neutral-800)] text-[var(--purple-lavender)] rounded-xl"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleUpdateCaption}
|
||||
className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl"
|
||||
className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
Save Caption
|
||||
|
||||
Reference in New Issue
Block a user