Add custom pink scrollbar styles and update Popover and Select components for consistent border styling. Modify Hero and Navbar components to link to booking page.
This commit is contained in:
iamkiddy
parent
c80c05e74d
commit
77ecc28df1
@ -97,7 +97,7 @@ export function Header() {
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[calc(100vw-2rem)] sm:w-80 md:w-96 p-0 bg-white shadow-xl" align="end">
|
||||
<PopoverContent className="w-[calc(100vw-2rem)] sm:w-80 md:w-96 p-0 bg-white shadow-xl border border-gray-200" align="end">
|
||||
{/* Thumbtack Design at Top Right */}
|
||||
<div className="relative">
|
||||
<div className="absolute -top-2 right-8 w-4 h-4 bg-white border-l border-t border-gray-200 rotate-45"></div>
|
||||
@ -170,7 +170,7 @@ export function Header() {
|
||||
<UserCog className="w-4 h-4 sm:w-5 sm:h-5 text-rose-600" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-56 sm:w-64 p-0 bg-white shadow-xl" align="end">
|
||||
<PopoverContent className="w-56 sm:w-64 p-0 bg-white shadow-xl border border-gray-200" align="end">
|
||||
{/* Thumbtack Design at Top Right */}
|
||||
<div className="relative">
|
||||
<div className="absolute -top-2 right-8 w-4 h-4 bg-white border-l border-t border-gray-200 rotate-45"></div>
|
||||
|
||||
392
app/book-now/page.tsx
Normal file
392
app/book-now/page.tsx
Normal file
@ -0,0 +1,392 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Calendar,
|
||||
Clock,
|
||||
User,
|
||||
Mail,
|
||||
Phone,
|
||||
MessageSquare,
|
||||
ArrowLeft,
|
||||
Heart,
|
||||
CheckCircle2,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function BookNowPage() {
|
||||
const router = useRouter();
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
appointmentType: "",
|
||||
preferredDate: "",
|
||||
preferredTime: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission
|
||||
console.log("Form submitted:", formData);
|
||||
// You can add navigation or API call here
|
||||
};
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Main Content */}
|
||||
<main className="min-h-screen flex">
|
||||
{/* Left Side - Image (Fixed) */}
|
||||
<div className="hidden lg:block fixed top-0 left-0 h-screen w-1/2 overflow-hidden z-10 bg-gradient-to-br from-rose-100 via-pink-50 to-orange-50">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="/doctors.png"
|
||||
alt="Therapy session"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
sizes="50vw"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/50"></div>
|
||||
</div>
|
||||
|
||||
{/* Logo at Top */}
|
||||
<div className="absolute top-0 left-0 right-0 z-20 flex items-center p-6">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="bg-gradient-to-r from-rose-500 to-pink-600 p-2 rounded-xl">
|
||||
<Heart className="h-5 w-5 text-white fill-white" />
|
||||
</div>
|
||||
<span className="font-bold text-lg text-rose-500 drop-shadow-lg">
|
||||
Attune Heart Therapy
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Overlay Content - Lower Position */}
|
||||
<div className="relative z-10 w-full h-full flex items-end justify-center px-12 pb-20">
|
||||
<div className="space-y-4 text-center max-w-sm">
|
||||
<h2 className="text-xl md:text-2xl font-bold leading-tight text-white drop-shadow-lg">
|
||||
Begin Your Journey to Wellness
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-white/95 leading-relaxed drop-shadow-md">
|
||||
Take the first step towards healing and growth. Our compassionate team is here to support you every step of the way.
|
||||
</p>
|
||||
|
||||
{/* Features List */}
|
||||
<div className="space-y-2 pt-3">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
||||
</div>
|
||||
<span className="text-white/95 text-xs md:text-sm">Safe and confidential environment</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
||||
</div>
|
||||
<span className="text-white/95 text-xs md:text-sm">Experienced licensed therapists</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
||||
</div>
|
||||
<span className="text-white/95 text-xs md:text-sm">Personalized treatment plans</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
||||
</div>
|
||||
<span className="text-white/95 text-xs md:text-sm">Flexible scheduling options</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Form (Scrollable) */}
|
||||
<div className="w-full lg:w-1/2 lg:ml-auto fixed top-0 right-0 h-screen overflow-y-auto bg-white custom-scrollbar">
|
||||
<div className="flex items-start justify-center min-h-full">
|
||||
<div className="w-full max-w-2xl">
|
||||
{/* Page Header */}
|
||||
<div className="pt-4 sm:pt-6 lg:pt-8 px-6 sm:px-8 lg:px-12 pb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center gap-2 text-black hover:bg-gray-100 mb-4"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
<span className="hidden sm:inline">Back</span>
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-gray-900 mb-1">
|
||||
Book Your Appointment
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
Fill out the form below and we'll get back to you to confirm your appointment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Booking Form */}
|
||||
<div className="px-6 sm:px-8 lg:px-12 pb-6 sm:pb-8 lg:pb-12">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8 border border-gray-200">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Personal Information Section */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||
<User className="w-5 h-5 text-rose-600" />
|
||||
Personal Information
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="firstName"
|
||||
className="text-sm font-medium text-gray-700"
|
||||
>
|
||||
First Name *
|
||||
</label>
|
||||
<Input
|
||||
id="firstName"
|
||||
type="text"
|
||||
placeholder="John"
|
||||
value={formData.firstName}
|
||||
onChange={(e) =>
|
||||
handleChange("firstName", e.target.value)
|
||||
}
|
||||
required
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="lastName"
|
||||
className="text-sm font-medium text-gray-700"
|
||||
>
|
||||
Last Name *
|
||||
</label>
|
||||
<Input
|
||||
id="lastName"
|
||||
type="text"
|
||||
placeholder="Doe"
|
||||
value={formData.lastName}
|
||||
onChange={(e) =>
|
||||
handleChange("lastName", e.target.value)
|
||||
}
|
||||
required
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
||||
>
|
||||
<Mail className="w-4 h-4 text-gray-500" />
|
||||
Email Address *
|
||||
</label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="john.doe@example.com"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange("email", e.target.value)}
|
||||
required
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
||||
>
|
||||
<Phone className="w-4 h-4 text-gray-500" />
|
||||
Phone Number *
|
||||
</label>
|
||||
<Input
|
||||
id="phone"
|
||||
type="tel"
|
||||
placeholder="+1 (555) 123-4567"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleChange("phone", e.target.value)}
|
||||
required
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Appointment Details Section */}
|
||||
<div className="space-y-4 pt-6 border-t border-gray-200">
|
||||
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5 text-rose-600" />
|
||||
Appointment Details
|
||||
</h2>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="appointmentType"
|
||||
className="text-sm font-medium text-gray-700"
|
||||
>
|
||||
Appointment Type *
|
||||
</label>
|
||||
<Select
|
||||
value={formData.appointmentType}
|
||||
onValueChange={(value) =>
|
||||
handleChange("appointmentType", value)
|
||||
}
|
||||
required
|
||||
>
|
||||
<SelectTrigger id="appointmentType" className="h-11">
|
||||
<SelectValue placeholder="Select appointment type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="initial-consultation">
|
||||
Initial Consultation
|
||||
</SelectItem>
|
||||
<SelectItem value="individual-therapy">
|
||||
Individual Therapy
|
||||
</SelectItem>
|
||||
<SelectItem value="family-therapy">Family Therapy</SelectItem>
|
||||
<SelectItem value="couples-therapy">
|
||||
Couples Therapy
|
||||
</SelectItem>
|
||||
<SelectItem value="group-therapy">Group Therapy</SelectItem>
|
||||
<SelectItem value="follow-up">Follow-up Session</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="preferredDate"
|
||||
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
||||
>
|
||||
<Calendar className="w-4 h-4 text-gray-500" />
|
||||
Preferred Date *
|
||||
</label>
|
||||
<Input
|
||||
id="preferredDate"
|
||||
type="date"
|
||||
value={formData.preferredDate}
|
||||
onChange={(e) =>
|
||||
handleChange("preferredDate", e.target.value)
|
||||
}
|
||||
required
|
||||
min={new Date().toISOString().split("T")[0]}
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="preferredTime"
|
||||
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
||||
>
|
||||
<Clock className="w-4 h-4 text-gray-500" />
|
||||
Preferred Time *
|
||||
</label>
|
||||
<Select
|
||||
value={formData.preferredTime}
|
||||
onValueChange={(value) =>
|
||||
handleChange("preferredTime", value)
|
||||
}
|
||||
required
|
||||
>
|
||||
<SelectTrigger id="preferredTime" className="h-11">
|
||||
<SelectValue placeholder="Select time" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="9:00 AM">9:00 AM</SelectItem>
|
||||
<SelectItem value="10:00 AM">10:00 AM</SelectItem>
|
||||
<SelectItem value="11:00 AM">11:00 AM</SelectItem>
|
||||
<SelectItem value="12:00 PM">12:00 PM</SelectItem>
|
||||
<SelectItem value="1:00 PM">1:00 PM</SelectItem>
|
||||
<SelectItem value="2:00 PM">2:00 PM</SelectItem>
|
||||
<SelectItem value="3:00 PM">3:00 PM</SelectItem>
|
||||
<SelectItem value="4:00 PM">4:00 PM</SelectItem>
|
||||
<SelectItem value="5:00 PM">5:00 PM</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Message Section */}
|
||||
<div className="space-y-4 pt-6 border-t border-gray-200">
|
||||
<label
|
||||
htmlFor="message"
|
||||
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
||||
>
|
||||
<MessageSquare className="w-4 h-4 text-gray-500" />
|
||||
Additional Message (Optional)
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
rows={4}
|
||||
placeholder="Tell us about any specific concerns or preferences..."
|
||||
value={formData.message}
|
||||
onChange={(e) => handleChange("message", e.target.value)}
|
||||
className="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-rose-500 focus-visible:border-rose-500 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="pt-6">
|
||||
<Button
|
||||
type="submit"
|
||||
size="lg"
|
||||
className="w-full bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all h-12 text-base font-semibold"
|
||||
>
|
||||
Submit Booking Request
|
||||
</Button>
|
||||
<p className="text-xs text-gray-500 text-center mt-4">
|
||||
We'll review your request and get back to you within 24 hours
|
||||
to confirm your appointment.
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-gray-600">
|
||||
Prefer to book by phone?{" "}
|
||||
<a
|
||||
href="tel:+19548073027"
|
||||
className="text-rose-600 hover:text-rose-700 font-medium underline"
|
||||
>
|
||||
Call us at (954) 807-3027
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -91,4 +91,29 @@
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* Custom Pink Scrollbar */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: rgb(255 228 230);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgb(244 63 94);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(225 29 72);
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(244 63 94) rgb(255 228 230);
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,10 +143,13 @@ export function HeroSection() {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white group cursor-pointer hover:scale-105 hover:shadow-lg transition-all"
|
||||
asChild
|
||||
>
|
||||
<Calendar className="mr-2 h-5 w-5" />
|
||||
Book Appointment
|
||||
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
||||
<a href="/book-now">
|
||||
<Calendar className="mr-2 h-5 w-5" />
|
||||
Book Appointment
|
||||
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
|
||||
@ -84,7 +84,7 @@ export function Navbar() {
|
||||
</Button>
|
||||
<ThemeToggle />
|
||||
<Button size="sm" className="hidden sm:inline-flex hover:opacity-90 hover:scale-105 transition-all dark:hover:bg-emerald-600" asChild>
|
||||
<a href="tel:+19548073027">Book Now</a>
|
||||
<a href="/book-now">Book Now</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,7 +42,7 @@ function DropdownMenuContent({
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border-0 p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -230,7 +230,7 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border-0 p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@ -30,7 +30,7 @@ function PopoverContent({
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-gray-200 p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@ -62,7 +62,7 @@ function SelectContent({
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border-0 shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
|
||||
Loading…
Reference in New Issue
Block a user