Spaces:
Runtime error
Runtime error
File size: 1,857 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 |
import useLayoutStore from '@/store/use-layout-store';
import { Transitions } from './transitions';
import { Texts } from './texts';
import { Uploads } from './uploads';
import { Audios } from './audios';
import { Elements } from './elements';
import { Images } from './images';
import { Videos } from './videos';
import { X } from 'lucide-react';
import { Button } from '@/components/ui/button';
const Container = ({ children }: { children: React.ReactNode }) => {
const { showMenuItem, setShowMenuItem } = useLayoutStore();
return (
<div
style={{
left: showMenuItem ? '0' : '-100%',
transition: 'left 0.25s ease-in-out',
zIndex: 200,
}}
className="w-[340px] h-[calc(100%-32px-64px)] mt-6 absolute top-1/2 -translate-y-1/2 rounded-lg shadow-lg flex"
>
<div className="w-[74px]"></div>
<div className="flex-1 relative bg-zinc-950 flex">
<Button
variant="ghost"
className="absolute top-2 right-2 w-8 h-8 text-muted-foreground"
size="icon"
>
<X width={16} onClick={() => setShowMenuItem(false)} />
</Button>
{children}
</div>
</div>
);
};
const ActiveMenuItem = () => {
const { activeMenuItem } = useLayoutStore();
if (activeMenuItem === 'transitions') {
return <Transitions />;
}
if (activeMenuItem === 'texts') {
return <Texts />;
}
if (activeMenuItem === 'shapes') {
return <Elements />;
}
if (activeMenuItem === 'videos') {
return <Videos />;
}
if (activeMenuItem === 'audios') {
return <Audios />;
}
if (activeMenuItem === 'images') {
return <Images />;
}
if (activeMenuItem === 'uploads') {
return <Uploads />;
}
return null;
};
export const MenuItem = () => {
return (
<Container>
<ActiveMenuItem />
</Container>
);
};
|