pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 07:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Animate detailed view transitions

Browse Source 
Improve user experience by adding smooth animation transitions to expand/collapse of All Fields (Detailed View) sections, enhance collapsible base to support animation, and apply transitions to detailed view wrapper and chevron indicators.

X-Lovable-Edit-ID: edt-9a567ba5-b52f-46b3-bdef-b847b9ba7963
This commit is contained in:
gpt-engineer-app[bot]
2025-11-12 14:53:19 +00:00
parent c09a343d08 3330a8fac9
commit d7158756ef
2 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/moderation/DetailedViewCollapsible.tsx
View File

@@ -1,4 +1,4 @@
import { ChevronDown, ChevronUp } from 'lucide-react'; import { ChevronDown } from 'lucide-react';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'; import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@@ -49,16 +49,17 @@ export function DetailedViewCollapsible({
<span className="text-xs text-muted-foreground normal-case font-normal"> <span className="text-xs text-muted-foreground normal-case font-normal">
{isCollapsed ? 'Show' : 'Hide'} {isCollapsed ? 'Show' : 'Hide'}
</span> </span>
{isCollapsed ? ( <ChevronDown
<ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200" /> className={cn(
) : ( "h-4 w-4 text-muted-foreground transition-all duration-300 ease-out",
<ChevronUp className="h-4 w-4 text-muted-foreground transition-transform duration-200" /> !isCollapsed && "rotate-180"
)} )}
/>
</div> </div>
</Button> </Button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent className="mt-3 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"> <CollapsibleContent className="mt-3">
{children} {children}
</CollapsibleContent> </CollapsibleContent>
</div> </div>

23
src/components/ui/collapsible.tsx
View File

@@ -1,9 +1,30 @@
import * as React from "react";
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"; import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
import { cn } from "@/lib/utils";
const Collapsible = CollapsiblePrimitive.Root; const Collapsible = CollapsiblePrimitive.Root;
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger; const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent; const CollapsibleContent = React.forwardRef<
React.ElementRef<typeof CollapsiblePrimitive.Content>,
React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>
>(({ className, children, ...props }, ref) => (
<CollapsiblePrimitive.Content
ref={ref}
className={cn(
"overflow-hidden transition-all duration-300 ease-out",
"data-[state=closed]:animate-accordion-up",
"data-[state=open]:animate-accordion-down",
className
)}
{...props}
>
<div className="animate-fade-in">
{children}
</div>
</CollapsiblePrimitive.Content>
));
CollapsibleContent.displayName = "CollapsibleContent";
export { Collapsible, CollapsibleTrigger, CollapsibleContent }; export { Collapsible, CollapsibleTrigger, CollapsibleContent };