diff --git a/components/IframeHandler/IframeHandler.tsx b/components/IframeHandler/IframeHandler.tsx index fed509c..81ef02e 100644 --- a/components/IframeHandler/IframeHandler.tsx +++ b/components/IframeHandler/IframeHandler.tsx @@ -1,11 +1,12 @@ 'use client'; import { ALLOWED_IFRAME_URLS, REDIRECT_URL } from '@/lib/config'; -import { redirect } from 'next/navigation'; -import { useEffect } from 'react'; +import { redirect, useSearchParams } from 'next/navigation'; +import { Suspense, useEffect } from 'react'; import { useTheme } from 'next-themes'; -export const IframeHandler = () => { +const IframeHandler = () => { + const queryParamScale = useSearchParams().get('scale') === 'true'; const { setTheme } = useTheme(); /** @@ -32,5 +33,26 @@ export const IframeHandler = () => { } }, []); + /** + * Scale UI if the param is set + */ + useEffect(() => { + if (!queryParamScale) return; + const root = document.documentElement; + root.classList.add('u-scale'); + + return () => root.classList.remove('u-scale'); + }, [queryParamScale]); + return null; }; + +const IframeHandlerSuspense = () => { + return ( + + + + ); +}; + +export { IframeHandlerSuspense as IframeHandler }; diff --git a/package.json b/package.json index 6c12ad8..87a51f1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@joonassandell/ui-lab", "description": "User interface laboratory by Joonas Sandell", - "version": "0.1.8", + "version": "0.1.9", "type": "module", "author": { "name": "Joonas Sandell", diff --git a/stylesheets/index.css b/stylesheets/index.css index d40b600..8f9e56a 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -90,4 +90,8 @@ } } } + + .u-scale { + font-size: clamp(16px, 2.25vw, 999px); + } }