Spaces:
Runtime error
Runtime error
File size: 2,443 Bytes
229b3b8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import { ScrollArea } from '@/components/ui/scroll-area';
import {
ANIMATIONS,
EDIT_OBJECT,
IAnimate,
dispatcher,
useEditorState,
} from '@designcombo/core';
import React from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
const Animations = () => {
const handleOnClick = (animation: any) => {
dispatcher.dispatch(EDIT_OBJECT, {
payload: {
animation: {
[animation.type]: {
name: animation.name,
},
},
},
});
};
const { trackItemsMap, activeIds } = useEditorState();
const targetType = trackItemsMap[activeIds[0]]?.type;
const filteredAnimations =
targetType === 'text'
? ANIMATIONS
: ANIMATIONS.filter((animation) => animation.category === 'element');
return (
<div className="flex-1 flex flex-col">
<div className="text-md flex-none text-text-primary font-medium h-12 flex items-center px-4">
Animations
</div>
<div className="px-4">
<Tabs defaultValue="in" className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="in">In</TabsTrigger>
<TabsTrigger value="out">Out</TabsTrigger>
</TabsList>
<TabsContent value="in">
{filteredAnimations
.filter((i) => i.type === 'in')
.map((animation, index) => (
<div
onClick={() => handleOnClick(animation)}
key={index}
className="flex items-center gap-2 cursor-pointer"
>
<div className="w-8 h-8 bg-zinc-600"></div>
<div> {animation.name || animation.type}</div>
</div>
))}
</TabsContent>
<TabsContent value="out">
{' '}
{filteredAnimations
.filter((i) => i.type === 'out')
.map((animation, index) => (
<div
onClick={() => handleOnClick(animation)}
key={index}
className="flex items-center gap-2 cursor-pointer"
>
<div className="w-8 h-8 bg-zinc-600"></div>
<div> {animation.name || animation.type}</div>
</div>
))}
</TabsContent>
</Tabs>
</div>
</div>
);
};
export default Animations;
|