import { Banner, IconInfo32, Link, Textbox } from '@create-figma-plugin/ui';
import { Controller, useFormContext } from 'react-hook-form';
import { useFigmaContext } from '@ui/context';
import { Stack } from './Stack';
export const MissingFontsSection = () => {
const { missingFonts } = useFigmaContext();
if (!missingFonts || !missingFonts.length) return null;
return (
}>
{missingFonts.length} custom font{missingFonts.length > 1 ? 's' : ''} detected
To export your file with custom fonts, please follow these steps:
Before exporting the file, upload your custom local fonts in Penpot.
Learn how to do it.
Follow this{' '}
step-by-step guide
{' '}
to locate and copy the font IDs from Penpot
Return here and paste the font IDs in the section below
{missingFonts.map(font => (
{font}
))}
);
};
type ControlledTextboxProps = { name: string; placeholder: string };
const ControlledTextbox = ({ name, placeholder }: ControlledTextboxProps) => {
const { control } = useFormContext();
return (
(
)}
/>
);
};