46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
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>
|
|
)
|
|
}
|