Device Mockup

import {
    Camera,
    DeviceContent,
    DeviceSelector,
    MobileButtons,
    MutableDeviceMockupRoot,
    Screen,
    TopBar,
    Viewport,
} from '@kit/ui/motion/mutable-device-mockup';

export function MutableDeviceMockupDemo() {
    return (
        <div className="absolute inset-0 p-4 pt-8">
            <MutableDeviceMockupRoot defaultDevice="ios" toggleDeviceOnClick>
                <div className="text-muted-foreground/50 absolute top-0 right-0 border-b border-dashed transition-opacity duration-300">
                    <DeviceSelector
                        itemClassName="border-l border-dashed p-1 hover:bg-surface/40"
                        activeItemClassName="bg-surface text-foreground/80"
                    />
                </div>
                <Viewport origin="top" className="aspect-678/409 w-full">
                    <Screen>
                        <Camera />
                        <TopBar />
                        <MobileButtons />

                        <DeviceContent
                            visibleIf={'desktop'}
                            className="flex items-center justify-center pb-0"
                            visibleAfter={5}
                        >
                        </DeviceContent>
                        <DeviceContent
                            visibleIf={['android', 'ios']}
                            className="flex items-center justify-center pb-0"
                        >
                        </DeviceContent>
                    </Screen>
                </Viewport>
            </MutableDeviceMockupRoot>
        </div>
    );
}