🦴 Add theme page backbone

apps/builder/components/theme/GeneralContent/FontSelector/FontSelector.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react'
+import { Text, Flex } from '@chakra-ui/react'
+import { SearchableDropdown } from './SearchableDropdown'
+
+type FontSelectorProps = {
+  activeFont?: string
+  onSelectFont: (font: string) => void
+}
+
+export const FontSelector = ({
+  activeFont,
+  onSelectFont,
+}: FontSelectorProps) => {
+  const [currentFont, setCurrentFont] = useState(activeFont)
+  const [googleFonts, setGoogleFonts] = useState<string[]>([])
+
+  useEffect(() => {
+    fetchPopularFonts().then(setGoogleFonts)
+  }, [])
+
+  const fetchPopularFonts = async () => {
+    const response = await fetch(
+      `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyD2YAiipBLNYg058Wm-sPE-e2dPDn_zX8w&sort=popularity`
+    )
+    return (await response.json()).items.map(
+      (item: { family: string }) => item.family
+    )
+  }
+
+  return (
+    <Flex justify="space-between" align="center">
+      <Text>Font</Text>
+      <SearchableDropdown
+        selectedItem={activeFont}
+        items={googleFonts}
+        onSelectItem={(nextFont) => {
+          if (nextFont !== currentFont) {
+            setCurrentFont(nextFont)
+            onSelectFont(nextFont)
+          }
+        }}
+      />
+    </Flex>
+  )
+}