0
Fork 0
mirror of https://github.com/penpot/penpot-exporter-figma-plugin.git synced 2024-12-22 13:43:03 -05:00
penpot-exporter-figma-plugin/ui-src/App.tsx

39 lines
1 KiB
TypeScript
Raw Normal View History

import { useEffect } from 'react';
import useResizeObserver from 'use-resize-observer';
import Penpot from '@ui/assets/penpot.svg?react';
import { PenpotExporter } from '@ui/components/PenpotExporter';
import { Stack } from '@ui/components/Stack';
2024-05-13 03:12:58 -05:00
import { Wrapper } from '@ui/components/Wrapper';
// Safe default value to avoid overflowing from the screen
const MAX_HEIGHT = 800;
export const App = () => {
const { ref, height } = useResizeObserver<HTMLDivElement>({ box: 'border-box' });
useEffect(() => {
if (height === undefined) return;
const capHeight = Math.min(height, MAX_HEIGHT);
parent.postMessage({ pluginMessage: { type: 'resize', height: capHeight } }, '*');
}, [height]);
return (
<Wrapper ref={ref} overflowing={(height ?? 0) > MAX_HEIGHT}>
<Stack>
<Penpot
style={{
alignSelf: 'center',
height: 'auto',
width: '8.125rem',
fill: 'var(--figma-color-icon)'
}}
/>
<PenpotExporter />
</Stack>
</Wrapper>
);
};