soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2026-02-05 08:16:31 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add global animation system and entrance effects to UI

Browse Source
This commit is contained in:
Sean O'Connor
2025-08-01 14:21:10 -04:00
parent eaf185d89e
commit 93ffdf3c86
18 changed files with 1363 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/layout/floating-action-bar.tsx
View File

@@ -55,6 +55,8 @@ export function FloatingActionBar({
isDocked ? "flex justify-center" : "",
// Dynamic bottom positioning
isDocked ? "bottom-4" : "bottom-0",
// Add entrance animation
"animate-slide-in-bottom",
className,
)}
>
@@ -65,17 +67,19 @@ export function FloatingActionBar({
isDocked ? "mx-auto mb-0 px-4" : "mb-4 px-4",
)}
>
<Card className="bg-card border-border border">
<Card className="hover-lift bg-card border-border border shadow-lg">
<CardContent className="flex items-center justify-between p-4">
{/* Left content */}
{leftContent && (
<div className="flex flex-1 items-center gap-3">
<div className="animate-fade-in flex flex-1 items-center gap-3">
{leftContent}
</div>
)}
{/* Right actions */}
<div className="flex items-center gap-2 sm:gap-3">{children}</div>
<div className="animate-fade-in animate-delay-100 flex items-center gap-2 sm:gap-3">
{children}
</div>
</CardContent>
</Card>
</div>

22
src/components/layout/page-header.tsx
View File

@@ -39,22 +39,24 @@ export function PageHeader({
};
return (
<div className={`mb-8 ${className}`}>
<div className={`animate-fade-in-down mb-8 ${className}`}>
<div className="flex items-start justify-between gap-4">
<h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
<div className="animate-fade-in-up space-y-1">
<h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
{description && (
<p
className={`animate-fade-in-up animate-delay-100 text-muted-foreground ${getDescriptionSpacing()} text-lg`}
>
{description}
</p>
)}
</div>
{children && (
<div className="flex flex-shrink-0 gap-2 sm:gap-3 [&>*]:h-8 [&>*]:px-2 [&>*]:text-sm sm:[&>*]:h-10 sm:[&>*]:px-4 sm:[&>*]:text-base [&>*>span]:hidden sm:[&>*>span]:inline [&>*>svg]:mr-0 sm:[&>*>svg]:mr-2">
<div className="animate-slide-in-right animate-delay-200 flex flex-shrink-0 gap-2 sm:gap-3 [&>*]:h-8 [&>*]:px-2 [&>*]:text-sm sm:[&>*]:h-10 sm:[&>*]:px-4 sm:[&>*]:text-base [&>*>span]:hidden sm:[&>*>span]:inline [&>*>svg]:mr-0 sm:[&>*>svg]:mr-2">
{children}
</div>
)}
</div>
{description && (
<p
className={`text-muted-foreground ${getDescriptionSpacing()} text-lg`}
>
{description}
</p>
)}
</div>
);
}