mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
feat: Linear-style UI redesign with improved mobile experience
Major changes: - Redesign cabinet with Linear-style components and top navigation - Replace detail modals with dedicated pages (users, broadcasts, email templates) - Add email channel support for broadcasts - Remove pull-to-refresh, improve drag-and-drop on touch devices - Fix Telegram Mini App: fullscreen, back button, scroll restoration - Unify admin pages color scheme to design system - Mobile-first improvements: horizontal tabs for settings, better touch targets
This commit is contained in:
61
src/components/admin/AdminLayout.tsx
Normal file
61
src/components/admin/AdminLayout.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import type { Transition, Variants } from 'framer-motion';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
/**
|
||||
* Centralized animation config for all admin pages.
|
||||
* Change animations here to affect all admin pages at once.
|
||||
*/
|
||||
export const adminPageTransition: Transition = {
|
||||
duration: 0.15,
|
||||
ease: [0.16, 1, 0.3, 1] as const, // easeOutExpo
|
||||
};
|
||||
|
||||
export const adminPageVariants: Variants = {
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
};
|
||||
|
||||
interface AdminLayoutProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* AdminLayout - wrapper for all admin pages with consistent animations.
|
||||
* Use this to wrap admin page content for unified transitions.
|
||||
*/
|
||||
export function AdminLayout({ children, className }: AdminLayoutProps) {
|
||||
return (
|
||||
<motion.div
|
||||
variants={adminPageVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={adminPageTransition}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Admin content animations for lists and cards.
|
||||
* Use with staggered children.
|
||||
*/
|
||||
export const adminStaggerContainer: Variants = {
|
||||
initial: {},
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.03,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const adminStaggerItem: Variants = {
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
};
|
||||
Reference in New Issue
Block a user