import { mdiContentSave, mdiSwapHorizontal } from '@mdi/js'; import Head from 'next/head'; import Link from 'next/link'; import React, { ReactElement, useEffect, useState } from 'react'; import BaseButton from '../components/BaseButton'; import CardBox from '../components/CardBox'; import SectionMain from '../components/SectionMain'; import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'; import { getPageTitle } from '../config'; import LayoutAuthenticated from '../layouts/Authenticated'; import { logger } from '../lib/logger'; import { useAppDispatch, useAppSelector } from '../stores/hooks'; import { fetch as fetchGlobalTransitionDefaults, update as updateGlobalTransitionDefaults, } from '../stores/global_transition_defaults/globalTransitionDefaultsSlice'; import type { EasingFunction, TransitionType } from '../types/transition'; const TRANSITION_TYPES: { value: TransitionType; label: string }[] = [ { value: 'fade', label: 'Fade' }, { value: 'none', label: 'None (instant)' }, ]; const EASING_OPTIONS: { value: EasingFunction; label: string }[] = [ { value: 'ease-in-out', label: 'Ease In-Out' }, { value: 'ease-in', label: 'Ease In' }, { value: 'ease-out', label: 'Ease Out' }, { value: 'linear', label: 'Linear' }, ]; const GlobalTransitionDefaultsPage = () => { const dispatch = useAppDispatch(); const defaults = useAppSelector( (state) => state.global_transition_defaults.data, ); const isLoading = useAppSelector( (state) => state.global_transition_defaults.loading, ); const [transitionType, setTransitionType] = useState('fade'); const [durationMs, setDurationMs] = useState(700); const [easing, setEasing] = useState('ease-in-out'); const [overlayColor, setOverlayColor] = useState('#000000'); const [isSaving, setIsSaving] = useState(false); const [saveSuccess, setSaveSuccess] = useState(false); useEffect(() => { dispatch(fetchGlobalTransitionDefaults()); }, [dispatch]); useEffect(() => { if (!defaults) return; setTransitionType(defaults.transition_type); setDurationMs(defaults.duration_ms); setEasing(defaults.easing); setOverlayColor(defaults.overlay_color ?? '#000000'); }, [defaults]); const handleSave = async () => { if (!defaults?.id) return; setIsSaving(true); setSaveSuccess(false); try { await dispatch( updateGlobalTransitionDefaults({ id: defaults.id, data: { transition_type: transitionType, duration_ms: durationMs, easing, overlay_color: overlayColor, }, }), ).unwrap(); setSaveSuccess(true); setTimeout(() => setSaveSuccess(false), 2000); } catch (error) { logger.error('Failed to save global transition defaults:', error); } finally { setIsSaving(false); } }; return ( <> {getPageTitle('Global Transition Defaults')} {''}
Back to Element Type Defaults
{saveSuccess && ( Saved successfully! )}
{isLoading && !defaults ? (

Loading global transition defaults...

) : (
setDurationMs( Math.max(0, parseInt(event.target.value, 10) || 0), ) } />
setOverlayColor(event.target.value)} /> setOverlayColor(event.target.value)} placeholder='#000000' />
)} ); }; GlobalTransitionDefaultsPage.getLayout = function getLayout( page: ReactElement, ) { return ( {page} ); }; export default GlobalTransitionDefaultsPage;