style(weather): preview background

This commit is contained in:
alexsparkes
2024-12-16 12:52:18 +00:00
parent 965395bf92
commit a4ae9496a3
2 changed files with 21 additions and 21 deletions

View File

@@ -11,7 +11,9 @@ const Preview = (props) => {
<div className="h-full flex flex-col">
<h1 className="py-3 uppercase tracking-tight text-neutral-300">Preview</h1>
<div className="bg-modal-content-light dark:bg-modal-content-dark p-10 rounded flex-grow">
{props.children}
<div className="relative w-full h-[300px] bg-gradient-to-br from-neutral-900 to-neutral-800 rounded-lg overflow-hidden grid place-items-center">
{props.children}
</div>
</div>
</div>
);

View File

@@ -8,26 +8,24 @@ const ClockPreview = ({ zoomLevel = 100 }) => {
previewTime.setHours(10, 10, 30);
return (
<div className="relative w-full h-[300px] bg-gradient-to-br from-neutral-900 to-neutral-800 rounded-lg overflow-hidden grid place-items-center">
<AnimatePresence mode="crossfade">
<motion.div
className="absolute"
key={`clock-preview-${timeType}`}
initial={{ opacity: 0, scale: 0.95 }}
animate={{
opacity: 1,
scale: zoomLevel / 100,
}}
exit={{ opacity: 0, scale: 0.95 }}
transition={{
opacity: { duration: 0.2 },
scale: { duration: 0.3, ease: 'anticipate' },
}}
>
<Clock isPreview={true} staticTime={previewTime} />
</motion.div>
</AnimatePresence>
</div>
<AnimatePresence mode="crossfade">
<motion.div
className="absolute"
key={`clock-preview-${timeType}`}
initial={{ opacity: 0, scale: 0.95 }}
animate={{
opacity: 1,
scale: zoomLevel / 100,
}}
exit={{ opacity: 0, scale: 0.95 }}
transition={{
opacity: { duration: 0.2 },
scale: { duration: 0.3, ease: 'anticipate' },
}}
>
<Clock isPreview={true} staticTime={previewTime} />
</motion.div>
</AnimatePresence>
);
};