fix some errors
This commit is contained in:
chark1es
parent
9019a97496
commit
2a34588074
3 changed files with 239 additions and 256 deletions
|
|
@ -59,21 +59,9 @@ const fileManager = FileManager.getInstance();
|
|||
</div>
|
||||
|
||||
<div id="tapSection">
|
||||
<TAPSection
|
||||
client:load
|
||||
onDataChange={(data) => {
|
||||
// This will be handled in the client-side script
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("tap-section-change", {
|
||||
detail: data,
|
||||
}),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="asFundingSection" class="hidden">
|
||||
<ASFundingSection client:load />
|
||||
<TAPSection client:load>
|
||||
<ASFundingSection client:load />
|
||||
</TAPSection>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-4 mt-8">
|
||||
|
|
@ -122,45 +110,8 @@ const fileManager = FileManager.getInstance();
|
|||
// Form visibility logic
|
||||
const form = document.getElementById("eventRequestForm") as HTMLFormElement;
|
||||
const prSection = document.getElementById("prSection");
|
||||
const asFundingSection = document.getElementById("asFundingSection");
|
||||
const needsGraphicsRadios = document.getElementsByName("needsGraphics");
|
||||
|
||||
// Debug log for initial state
|
||||
console.log("Initial ASFundingSection state:", {
|
||||
element: asFundingSection,
|
||||
isHidden: asFundingSection?.classList.contains("hidden"),
|
||||
display: asFundingSection?.style.display,
|
||||
});
|
||||
|
||||
// Handle TAPSection changes
|
||||
document.addEventListener("tap-section-change", (event: any) => {
|
||||
const data = event.detail;
|
||||
console.log("TAP section change event received:", data);
|
||||
|
||||
if (asFundingSection) {
|
||||
console.log("Found ASFundingSection element");
|
||||
if (data.as_funding_required) {
|
||||
console.log("Showing AS Funding section");
|
||||
asFundingSection.classList.remove("hidden");
|
||||
asFundingSection.style.removeProperty("display");
|
||||
// Force a reflow
|
||||
void asFundingSection.offsetHeight;
|
||||
} else {
|
||||
console.log("Hiding AS Funding section");
|
||||
asFundingSection.classList.add("hidden");
|
||||
asFundingSection.style.display = "none";
|
||||
}
|
||||
|
||||
// Log the state after change
|
||||
console.log("ASFundingSection state after change:", {
|
||||
isHidden: asFundingSection.classList.contains("hidden"),
|
||||
display: asFundingSection.style.display,
|
||||
});
|
||||
} else {
|
||||
console.error("ASFundingSection element not found");
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide PR section based on radio selection
|
||||
needsGraphicsRadios.forEach((radio) => {
|
||||
radio.addEventListener("change", (e) => {
|
||||
|
|
|
|||
|
|
@ -9,9 +9,10 @@ import { Icon } from '@iconify/react';
|
|||
interface TAPSectionProps {
|
||||
onDataChange?: (data: any) => void;
|
||||
onASFundingChange?: (enabled: boolean) => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const TAPSection: React.FC<TAPSectionProps> = ({ onDataChange, onASFundingChange }) => {
|
||||
const TAPSection: React.FC<TAPSectionProps> = ({ onDataChange, onASFundingChange, children }) => {
|
||||
const [expectedAttendance, setExpectedAttendance] = useState<number>(0);
|
||||
const [roomBooking, setRoomBooking] = useState<string>('');
|
||||
const [needsASFunding, setNeedsASFunding] = useState<boolean>(false);
|
||||
|
|
@ -34,14 +35,12 @@ const TAPSection: React.FC<TAPSectionProps> = ({ onDataChange, onASFundingChange
|
|||
};
|
||||
|
||||
const handleASFundingChange = (enabled: boolean) => {
|
||||
console.log('AS Funding change:', enabled);
|
||||
setNeedsASFunding(enabled);
|
||||
if (!enabled) {
|
||||
setNeedsFoodDrinks(false);
|
||||
onDataChange?.({ needs_food_drinks: false });
|
||||
}
|
||||
onASFundingChange?.(enabled);
|
||||
console.log('Sending data change:', { as_funding_required: enabled });
|
||||
onDataChange?.({ as_funding_required: enabled });
|
||||
|
||||
toast(enabled ? 'AS Funding enabled - please fill out funding details.' : 'AS Funding disabled', {
|
||||
|
|
@ -56,206 +55,227 @@ const TAPSection: React.FC<TAPSectionProps> = ({ onDataChange, onASFundingChange
|
|||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="card bg-base-100/95 backdrop-blur-md shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<div className="card-body">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="card-title text-xl mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent flex items-center gap-2"
|
||||
>
|
||||
<Icon icon="mdi:clipboard-text-outline" className="h-6 w-6" />
|
||||
TAP Form
|
||||
</motion.h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="form-control w-full"
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="card bg-base-100/95 backdrop-blur-md shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<div className="card-body">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="card-title text-xl mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent flex items-center gap-2"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-lg flex items-center gap-2">
|
||||
<Icon icon="mdi:account-group" className="h-5 w-5 text-primary" />
|
||||
Expected Attendance
|
||||
</span>
|
||||
</label>
|
||||
<Tooltip
|
||||
title={tooltips.attendance.title}
|
||||
description={tooltips.attendance.description}
|
||||
position="left"
|
||||
>
|
||||
<div className="badge badge-primary badge-outline p-3 cursor-help">
|
||||
<Icon icon="mdi:information-outline" className="h-4 w-4" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Icon icon="mdi:clipboard-text-outline" className="h-6 w-6" />
|
||||
TAP Form
|
||||
</motion.h2>
|
||||
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
className="input input-bordered w-full pl-12 transition-all duration-300 focus:ring-2 focus:ring-primary/20"
|
||||
value={expectedAttendance || ''}
|
||||
onChange={(e) => handleAttendanceChange(Number(e.target.value))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="space-y-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="form-control w-full"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-lg flex items-center gap-2">
|
||||
<Icon icon="mdi:account-group" className="h-5 w-5 text-primary" />
|
||||
Expected Attendance
|
||||
</span>
|
||||
</label>
|
||||
<Tooltip
|
||||
title={tooltips.attendance.title}
|
||||
description={tooltips.attendance.description}
|
||||
position="left"
|
||||
>
|
||||
<div className="badge badge-primary badge-outline p-3 cursor-help">
|
||||
<Icon icon="mdi:information-outline" className="h-4 w-4" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="form-control w-full"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-lg flex items-center gap-2">
|
||||
<Icon icon="mdi:office-building-outline" className="h-5 w-5 text-primary" />
|
||||
Room Booking
|
||||
</span>
|
||||
</label>
|
||||
<Tooltip
|
||||
title={tooltips.room.title}
|
||||
description={tooltips.room.description}
|
||||
position="left"
|
||||
>
|
||||
<div className="badge badge-primary badge-outline p-3 cursor-help">
|
||||
<Icon icon="mdi:information-outline" className="h-4 w-4" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<InfoCard
|
||||
title={infoNotes.room.title}
|
||||
items={infoNotes.room.items}
|
||||
type="info"
|
||||
className="mb-4"
|
||||
/>
|
||||
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter room number and building (e.g. EBU1 2315)"
|
||||
className="input input-bordered w-full pl-12 transition-all duration-300 focus:ring-2 focus:ring-primary/20"
|
||||
value={roomBooking}
|
||||
onChange={(e) => handleRoomBookingChange(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="form-control w-full"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-lg flex items-center gap-2">
|
||||
<Icon icon="mdi:cash" className="h-5 w-5 text-primary" />
|
||||
AS Funding
|
||||
</span>
|
||||
</label>
|
||||
<Tooltip
|
||||
title={tooltips.asFunding.title}
|
||||
description={tooltips.asFunding.description}
|
||||
position="left"
|
||||
>
|
||||
<div className="badge badge-primary badge-outline p-3 cursor-help">
|
||||
<Icon icon="mdi:information-outline" className="h-4 w-4" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="radio"
|
||||
name="as_funding"
|
||||
className="radio radio-primary"
|
||||
checked={needsASFunding}
|
||||
onChange={() => handleASFundingChange(true)}
|
||||
type="number"
|
||||
min="0"
|
||||
className="input input-bordered w-full pl-12 transition-all duration-300 focus:ring-2 focus:ring-primary/20"
|
||||
value={expectedAttendance || ''}
|
||||
onChange={(e) => handleAttendanceChange(Number(e.target.value))}
|
||||
required
|
||||
/>
|
||||
<span className="label-text">Yes, I need AS Funding</span>
|
||||
</label>
|
||||
<label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="form-control w-full"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-lg flex items-center gap-2">
|
||||
<Icon icon="mdi:office-building-outline" className="h-5 w-5 text-primary" />
|
||||
Room Booking
|
||||
</span>
|
||||
</label>
|
||||
<Tooltip
|
||||
title={tooltips.room.title}
|
||||
description={tooltips.room.description}
|
||||
position="left"
|
||||
>
|
||||
<div className="badge badge-primary badge-outline p-3 cursor-help">
|
||||
<Icon icon="mdi:information-outline" className="h-4 w-4" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<InfoCard
|
||||
title={infoNotes.room.title}
|
||||
items={infoNotes.room.items}
|
||||
type="info"
|
||||
className="mb-4"
|
||||
/>
|
||||
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="radio"
|
||||
name="as_funding"
|
||||
className="radio radio-primary"
|
||||
checked={!needsASFunding}
|
||||
onChange={() => handleASFundingChange(false)}
|
||||
type="text"
|
||||
placeholder="Enter room number and building (e.g. EBU1 2315)"
|
||||
className="input input-bordered w-full pl-12 transition-all duration-300 focus:ring-2 focus:ring-primary/20"
|
||||
value={roomBooking}
|
||||
onChange={(e) => handleRoomBookingChange(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<span className="label-text">No, I don't need AS Funding</span>
|
||||
</label>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{needsASFunding && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="form-control w-full overflow-hidden"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-lg flex items-center gap-2">
|
||||
<Icon icon="mdi:food" className="h-5 w-5 text-primary" />
|
||||
Food/Drinks
|
||||
</span>
|
||||
</label>
|
||||
<Tooltip
|
||||
title={tooltips.food.title}
|
||||
description={tooltips.food.description}
|
||||
position="left"
|
||||
>
|
||||
<div className="badge badge-primary badge-outline p-3 cursor-help">
|
||||
<Icon icon="mdi:information-outline" className="h-4 w-4" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="form-control w-full"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-lg flex items-center gap-2">
|
||||
<Icon icon="mdi:cash" className="h-5 w-5 text-primary" />
|
||||
AS Funding
|
||||
</span>
|
||||
</label>
|
||||
<Tooltip
|
||||
title={tooltips.asFunding.title}
|
||||
description={tooltips.asFunding.description}
|
||||
position="left"
|
||||
>
|
||||
<div className="badge badge-primary badge-outline p-3 cursor-help">
|
||||
<Icon icon="mdi:information-outline" className="h-4 w-4" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
|
||||
<input
|
||||
type="radio"
|
||||
name="food_drinks"
|
||||
className="radio radio-primary"
|
||||
checked={needsFoodDrinks}
|
||||
onChange={() => handleFoodDrinksChange(true)}
|
||||
/>
|
||||
<span className="label-text">Yes, I need food/drinks</span>
|
||||
</label>
|
||||
<label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
|
||||
<input
|
||||
type="radio"
|
||||
name="food_drinks"
|
||||
className="radio radio-primary"
|
||||
checked={!needsFoodDrinks}
|
||||
onChange={() => handleFoodDrinksChange(false)}
|
||||
/>
|
||||
<span className="label-text">No, I don't need food/drinks</span>
|
||||
</label>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
|
||||
<input
|
||||
type="radio"
|
||||
name="as_funding"
|
||||
className="radio radio-primary"
|
||||
checked={needsASFunding}
|
||||
onChange={() => handleASFundingChange(true)}
|
||||
/>
|
||||
<span className="label-text">Yes, I need AS Funding</span>
|
||||
</label>
|
||||
<label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
|
||||
<input
|
||||
type="radio"
|
||||
name="as_funding"
|
||||
className="radio radio-primary"
|
||||
checked={!needsASFunding}
|
||||
onChange={() => handleASFundingChange(false)}
|
||||
/>
|
||||
<span className="label-text">No, I don't need AS Funding</span>
|
||||
</label>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{needsASFunding && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="form-control w-full overflow-hidden"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-lg flex items-center gap-2">
|
||||
<Icon icon="mdi:food" className="h-5 w-5 text-primary" />
|
||||
Food/Drinks
|
||||
</span>
|
||||
</label>
|
||||
<Tooltip
|
||||
title={tooltips.food.title}
|
||||
description={tooltips.food.description}
|
||||
position="left"
|
||||
>
|
||||
<div className="badge badge-primary badge-outline p-3 cursor-help">
|
||||
<Icon icon="mdi:information-outline" className="h-4 w-4" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
|
||||
<input
|
||||
type="radio"
|
||||
name="food_drinks"
|
||||
className="radio radio-primary"
|
||||
checked={needsFoodDrinks}
|
||||
onChange={() => handleFoodDrinksChange(true)}
|
||||
/>
|
||||
<span className="label-text">Yes, I need food/drinks</span>
|
||||
</label>
|
||||
<label className="label cursor-pointer justify-start gap-4 hover:bg-base-200/50 p-4 rounded-lg transition-colors duration-300">
|
||||
<input
|
||||
type="radio"
|
||||
name="food_drinks"
|
||||
className="radio radio-primary"
|
||||
checked={!needsFoodDrinks}
|
||||
onChange={() => handleFoodDrinksChange(false)}
|
||||
/>
|
||||
<span className="label-text">No, I don't need food/drinks</span>
|
||||
</label>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence mode="popLayout">
|
||||
{needsASFunding && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0, y: -20 }}
|
||||
animate={{ opacity: 1, height: 'auto', y: 0 }}
|
||||
exit={{ opacity: 0, height: 0, y: -20 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
height: { duration: 0.4 },
|
||||
opacity: { duration: 0.3 },
|
||||
y: { duration: 0.3 }
|
||||
}}
|
||||
className="mt-8"
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ interface TooltipProps {
|
|||
children: React.ReactNode;
|
||||
className?: string;
|
||||
position?: 'top' | 'bottom' | 'left' | 'right';
|
||||
icon?: string;
|
||||
maxWidth?: string;
|
||||
}
|
||||
|
||||
const positionStyles = {
|
||||
|
|
@ -18,10 +20,10 @@ const positionStyles = {
|
|||
};
|
||||
|
||||
const arrowStyles = {
|
||||
top: 'bottom-[-6px] left-1/2 -translate-x-1/2 border-t-base-300 border-l-transparent border-r-transparent border-b-transparent',
|
||||
bottom: 'top-[-6px] left-1/2 -translate-x-1/2 border-b-base-300 border-l-transparent border-r-transparent border-t-transparent',
|
||||
left: 'right-[-6px] top-1/2 -translate-y-1/2 border-l-base-300 border-t-transparent border-b-transparent border-r-transparent',
|
||||
right: 'left-[-6px] top-1/2 -translate-y-1/2 border-r-base-300 border-t-transparent border-b-transparent border-l-transparent'
|
||||
top: 'bottom-[-6px] left-1/2 -translate-x-1/2 border-t-base-200 border-l-transparent border-r-transparent border-b-transparent',
|
||||
bottom: 'top-[-6px] left-1/2 -translate-x-1/2 border-b-base-200 border-l-transparent border-r-transparent border-t-transparent',
|
||||
left: 'right-[-6px] top-1/2 -translate-y-1/2 border-l-base-200 border-t-transparent border-b-transparent border-r-transparent',
|
||||
right: 'left-[-6px] top-1/2 -translate-y-1/2 border-r-base-200 border-t-transparent border-b-transparent border-l-transparent'
|
||||
};
|
||||
|
||||
export const Tooltip: React.FC<TooltipProps> = ({
|
||||
|
|
@ -29,7 +31,9 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
|||
description,
|
||||
children,
|
||||
className = '',
|
||||
position = 'top'
|
||||
position = 'left',
|
||||
icon = 'mdi:information',
|
||||
maxWidth = '350px'
|
||||
}) => {
|
||||
const [isVisible, setIsVisible] = React.useState(false);
|
||||
|
||||
|
|
@ -48,13 +52,21 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
|||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.1 }}
|
||||
className={`absolute z-50 min-w-[320px] max-w-md p-4 bg-base-100 border border-base-300 rounded-lg shadow-lg ${positionStyles[position]}`}
|
||||
transition={{
|
||||
duration: 0.15,
|
||||
ease: 'easeOut'
|
||||
}}
|
||||
style={{ maxWidth }}
|
||||
className={`absolute z-50 p-3 bg-base-200/95 border border-base-300 rounded-lg shadow-lg backdrop-blur-sm
|
||||
${positionStyles[position]}`}
|
||||
>
|
||||
<div className={`absolute w-0 h-0 border-4 ${arrowStyles[position]}`} />
|
||||
<div className="space-y-2">
|
||||
<p className="font-medium text-base">{title}</p>
|
||||
<p className="text-sm leading-relaxed text-base-content/80">{description}</p>
|
||||
<div className={`absolute w-0 h-0 border-[6px] ${arrowStyles[position]}`} />
|
||||
<div className="flex items-start gap-2">
|
||||
<Icon icon={icon} className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-medium text-base text-base-content">{title}</h3>
|
||||
<p className="text-sm leading-relaxed text-base-content/80 mt-0.5 whitespace-pre-wrap">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue