Function KeyInsight

components/KeyInsight.tsx:37–145

()

};

export const KeyInsight = () => {
    const [url, setUrl] = useState<string>("");
    const [isError, setIsError] = useState<boolean>(false);

    const plausible = usePlausible();

    const {
        data: keyInsight,
        isLoading,
        mutateAsync,
    } = useMutation(findKeyInsight);

    async function makeThread(event: React.FormEvent) {
        event.preventDefault();

        setIsError(false);

        if (url) {
            try {
                await mutateAsync({ url });
            } catch (e) {
                console.error(e);
                setIsError(true);
            }
        }
    }

    return (
        <Box
            sx={{
                textAlign: "center",
            }}
        >
            <h1>What is the point?</h1>
            <Paragraph>
                Reading? Ain&apos;t nobody got time for that. Paste the URL, get
                the point 👇
            </Paragraph>
            <Paragraph>
                Don&apos;t have a URL handy?{" "}
                <Link
                    href="#"
                    onClick={() => {
                        setUrl(
                            "https://swizec.com/blog/why-senior-engineers-get-nothing-done/"
                        );
                    }}
                >
                    Try an example
                </Link>
            </Paragraph>
            <Flex
                as="form"
                onSubmit={makeThread}
                sx={{
                    p: 1,
                    flexDirection: "column",
                    alignItems: "center",