set the selected font value

apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx

@@ -33,7 +33,7 @@ const usePickerSideOffset = (
 export const FontFamilyControl = ({
   currentStyle,
   inheritedStyle,
-  //setProperty,
+  setProperty,
   styleConfig,
 }: ControlProps) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -47,7 +47,7 @@ export const FontFamilyControl = ({
 
   if (value === undefined) return null;
 
-  //const setValue = setProperty(styleConfig.property);
+  const setValue = setProperty(styleConfig.property);
 
   return (
     <Grid columns={2}>
@@ -68,7 +68,7 @@ export const FontFamilyControl = ({
         <PopoverPortal>
           <PopoverContent sideOffset={sideOffset} side="right" hideArrow>
             <PopoverHeader title="Fonts" />
-            <FontsManager value={String(value.value)} />
+            <FontsManager value={String(value.value)} onChange={setValue} />
           </PopoverContent>
         </PopoverPortal>
       </Popover>

apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx

@@ -18,9 +18,10 @@ const getItems = (assets: Array<Asset | PreviewAsset>) =>
 
 type FontsManagerProps = {
   value: string;
+  onChange: (value: string) => void;
 };
 
-export const FontsManager = ({ value }: FontsManagerProps) => {
+export const FontsManager = ({ value, onChange }: FontsManagerProps) => {
   const { assets, onSubmitAssets, onActionData } = useAssets("font");
   const items = getItems(assets);
 
@@ -43,10 +44,8 @@ export const FontsManager = ({ value }: FontsManagerProps) => {
         name="prop"
         items={items}
         selectedItem={{ label: value }}
-        //itemToString={(item) => item ?? ""}
         onItemSelect={(value) => {
-          console.log("onItemSelect", value);
-          //onChange(id, "prop", value);
+          onChange(value.label);
         }}
         renderTextField={({ inputProps: { value, ...inputProps } }) => (
           <TextField {...inputProps} placeholder="Search" />