import React, { useEffect, useState, useRef } from "react"; // swr import useSWR from "swr"; // headless ui import { Tab, Transition, Popover } from "@headlessui/react"; // services import fileService from "services/file.service"; // components import { Input, Spinner, PrimaryButton } from "components/ui"; // hooks import useOutsideClickDetector from "hooks/use-outside-click-detector"; const unsplashEnabled = process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" || process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "1"; const tabOptions = [ { key: "unsplash", title: "Unsplash", }, { key: "upload", title: "Upload", }, ]; type Props = { label: string | React.ReactNode; value: string | null; onChange: (data: string) => void; }; export const ImagePickerPopover: React.FC = ({ label, value, onChange }) => { const ref = useRef(null); const [isOpen, setIsOpen] = useState(false); const [searchParams, setSearchParams] = useState(""); const [formData, setFormData] = useState({ search: "", }); const { data: images } = useSWR(`UNSPLASH_IMAGES_${searchParams}`, () => fileService.getUnsplashImages(1, searchParams) ); useOutsideClickDetector(ref, () => { setIsOpen(false); }); useEffect(() => { if (!images || value !== null) return; onChange(images[0].urls.regular); }, [value, onChange, images]); if (!unsplashEnabled) return null; return ( setIsOpen((prev) => !prev)} > {label}
{tabOptions.map((tab) => ( `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${ selected ? "bg-brand-accent text-white" : "text-brand-base" }` } > {tab.title} ))}
setFormData({ ...formData, search: e.target.value })} placeholder="Search for images" /> setSearchParams(formData.search)} size="sm"> Search
{images ? (
{images.map((image) => (
{image.alt_description} { setIsOpen(false); onChange(image.urls.regular); }} />
))}
) : (
)}

Coming Soon...

); };