mirror of
https://github.com/mue/mue.git
synced 2026-07-02 12:43:35 +02:00
style(weather): preview background
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user