import classNames from 'classnames'; import React, { useMemo } from 'react'; import { defaultSettings } from 'soapbox/actions/settings'; import { normalizeSoapboxConfig } from 'soapbox/normalizers'; import { generateThemeCss } from 'soapbox/utils/theme'; interface ISitePreview { /** Raw Soapbox configuration. */ soapbox: any, } /** Renders a preview of the website's style with the configuration applied. */ const SitePreview: React.FC = ({ soapbox }) => { const soapboxConfig = useMemo(() => normalizeSoapboxConfig(soapbox), [soapbox]); const settings = defaultSettings.mergeDeep(soapboxConfig.defaultSettings); const bodyClass = classNames('site-preview', `theme-mode-${settings.get('themeMode')}`, { 'no-reduce-motion': !settings.get('reduceMotion'), 'underline-links': settings.get('underlineLinks'), 'dyslexic': settings.get('dyslexicFont'), 'demetricator': settings.get('demetricator'), }); return (
Site Preview
); }; export default SitePreview;