💄 animate popup

This commit is contained in:
Fred KISSIE
2025-11-05 07:30:01 +01:00
parent 162c6d567c
commit 44f419d4f7

View File

@@ -7,13 +7,12 @@ import { versionsQueries } from "@app/lib/queries";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { ArrowRight, BellIcon, XIcon } from "lucide-react"; import { ArrowRight, BellIcon, XIcon } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useState } from "react";
interface ProductUpdatesProps {} interface ProductUpdatesProps {}
export default function ProductUpdates({}: ProductUpdatesProps) { export default function ProductUpdates({}: ProductUpdatesProps) {
return ( return (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1 relative z-1 overflow-clip">
{/* <small className="text-xs text-muted-foreground flex items-center gap-1"> {/* <small className="text-xs text-muted-foreground flex items-center gap-1">
<BellIcon className="flex-none size-3" /> <BellIcon className="flex-none size-3" />
<span>3 more updates</span> <span>3 more updates</span>
@@ -34,15 +33,16 @@ function NewVersionAvailable() {
const showNewVersionPopup = const showNewVersionPopup =
version?.data && version?.data &&
ignoredVersionUpdate !== version.data.pangolin.latestVersion; ignoredVersionUpdate !== version.data.pangolin.latestVersion &&
env.app.version !== version.data.pangolin.latestVersion;
if (!showNewVersionPopup) return null;
return ( return (
<div <div
className={cn( className={cn(
"rounded-md border bg-muted p-2 py-3 w-full flex items-start gap-2 text-sm", "rounded-md border bg-muted p-2 py-3 w-full flex items-start gap-2 text-sm",
"transition duration-500", "animate-in slide-in-from-bottom duration-300"
"opacity-0 h-0 pointer-events-none",
showNewVersionPopup && "opacity-100 h-full pointer-events-auto"
)} )}
> >
{version?.data && ( {version?.data && (
@@ -60,7 +60,7 @@ function NewVersionAvailable() {
})} })}
</small> </small>
<a <a
href={version?.data?.pangolin.releaseNotes} href={version.data.pangolin.releaseNotes}
target="_blank" target="_blank"
className="inline-flex items-center gap-0.5 text-xs font-medium" className="inline-flex items-center gap-0.5 text-xs font-medium"
> >
@@ -74,7 +74,7 @@ function NewVersionAvailable() {
className="p-1 cursor-pointer" className="p-1 cursor-pointer"
onClick={() => onClick={() =>
setIgnoredVersionUpdate( setIgnoredVersionUpdate(
version?.data?.pangolin.latestVersion ?? null version.data?.pangolin.latestVersion ?? null
) )
} }
> >