Kailasdevdas
264 lines
8.1 KiB
TypeScript
264 lines
8.1 KiB
TypeScript
import { BytescaleUploader } from '@/components/BytescaleUploader/BytescaleUploader';
|
||
import { useEffect } from 'react';
|
||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Switch } from '@/components/ui/switch';
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||
|
||
interface Props {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
editingBanner: any;
|
||
bannerForm: any;
|
||
setBannerForm: any;
|
||
onSave: () => void;
|
||
}
|
||
|
||
export default function HomepageBannerModal({
|
||
open,
|
||
onOpenChange,
|
||
editingBanner,
|
||
bannerForm,
|
||
setBannerForm,
|
||
onSave,
|
||
}: Props) {
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="w-full !max-w-4xl h-[90vh] flex flex-col p-0 overflow-hidden">
|
||
<DialogHeader className="px-6 py-5 border-b bg-background sticky top-0 z-20">
|
||
<DialogTitle className="text-2xl font-bold">
|
||
{editingBanner ? 'Edit Homepage Banner' : 'Create Homepage Banner'}
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
<div className="flex-1 overflow-y-auto p-6 space-y-8">
|
||
<div className="space-y-5">
|
||
<div className="border-b pb-2">
|
||
<h3 className="text-lg font-bold">Media Configuration</h3>
|
||
<p className="text-sm text-muted-foreground">Manage your banner files for desktop and mobile layouts</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="space-y-2">
|
||
<Label className="font-semibold">Media Type</Label>
|
||
<Select
|
||
value={bannerForm.mediaType}
|
||
onValueChange={(v) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
mediaType: v,
|
||
})
|
||
}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Select media type" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="IMAGE">Image Asset</SelectItem>
|
||
<SelectItem value="VIDEO">Video Loop</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30">
|
||
<div>
|
||
<p className="font-semibold">Active Visibility</p>
|
||
<p className="text-sm text-muted-foreground">Publish this banner live on the homepage</p>
|
||
</div>
|
||
<Switch
|
||
checked={bannerForm.isActive}
|
||
onCheckedChange={(val) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
isActive: val,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="space-y-2">
|
||
<Label className="font-semibold">Desktop Media URL</Label>
|
||
<p className="text-xs text-muted-foreground">
|
||
{bannerForm.mediaType === 'VIDEO'
|
||
? 'Recommended: 1920 × 650 MP4 Format '
|
||
: 'Recommended: 1920 × 650 Widescreen'}
|
||
</p>
|
||
<BytescaleUploader
|
||
value={bannerForm.desktopMediaUrl || ''}
|
||
folderPath="/homepage-banners"
|
||
onChange={(url) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
desktopMediaUrl: url,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="font-semibold">Mobile Media URL (Optional)</Label>
|
||
<p className="text-xs text-muted-foreground">
|
||
{bannerForm.mediaType === 'VIDEO' ? 'Recommended: 340 × 390 MP4 Format' : 'Recommended: 340 × 390 '}
|
||
</p>
|
||
<BytescaleUploader
|
||
value={bannerForm.mobileMediaUrl || ''}
|
||
folderPath="/homepage-banners"
|
||
onChange={(url) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
mobileMediaUrl: url,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-5">
|
||
<div className="border-b pb-2">
|
||
<h3 className="text-lg font-bold">Banner Copy & Styles</h3>
|
||
<p className="text-sm text-muted-foreground">Modify text details and text alignment configurations</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label className="font-semibold">Main Heading / Title</Label>
|
||
<Input
|
||
value={bannerForm.title || ''}
|
||
placeholder="e.g., Advanced Healthcare, Exceptional Compassion"
|
||
onChange={(e) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
title: e.target.value,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="font-semibold">Sub-Heading / Subtitle</Label>
|
||
<Input
|
||
value={bannerForm.subtitle || ''}
|
||
placeholder="e.g., Book appointments online with top multi-specialty doctors."
|
||
onChange={(e) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
subtitle: e.target.value,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label className="font-semibold">Text Alignment Alignment</Label>
|
||
<Select
|
||
value={bannerForm.textAlignment || 'left'}
|
||
onValueChange={(v) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
textAlignment: v,
|
||
})
|
||
}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Select text position" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="left">Left Aligned</SelectItem>
|
||
<SelectItem value="center">Center Aligned</SelectItem>
|
||
<SelectItem value="right">Right Aligned</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="font-semibold">Display Priority Order</Label>
|
||
<Input
|
||
type="number"
|
||
value={bannerForm.sortOrder}
|
||
onChange={(e) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
sortOrder: Number(e.target.value),
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-5">
|
||
<div className="border-b pb-2">
|
||
<h3 className="text-lg font-bold">Call To Action (CTA Button)</h3>
|
||
<p className="text-sm text-muted-foreground">Hyperlinks for optional button element overlays</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label className="font-semibold">Button Label</Label>
|
||
<Input
|
||
value={bannerForm.buttonText || ''}
|
||
placeholder="e.g., Find a Doctor"
|
||
onChange={(e) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
buttonText: e.target.value,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="font-semibold">Button Redirect Link</Label>
|
||
<Input
|
||
value={bannerForm.buttonLink || ''}
|
||
placeholder="e.g., /doctors or https://..."
|
||
onChange={(e) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
buttonLink: e.target.value,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30">
|
||
<div>
|
||
<p className="font-semibold">Target Tab Redirection</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
Force-launch the button link target into a completely new browser tab window
|
||
</p>
|
||
</div>
|
||
<Switch
|
||
checked={bannerForm.openInNewTab}
|
||
onCheckedChange={(val) =>
|
||
setBannerForm({
|
||
...bannerForm,
|
||
openInNewTab: val,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter className="p-6 border-t bg-background sticky bottom-0 z-20">
|
||
<Button variant="ghost" onClick={() => onOpenChange(false)}>
|
||
Cancel
|
||
</Button>
|
||
<Button className="px-10" onClick={onSave}>
|
||
{editingBanner ? 'Save Changes' : 'Create Banner'}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|