diff --git a/components/explain.tsx b/components/explain.tsx index 9b3217f..d5c3e77 100644 --- a/components/explain.tsx +++ b/components/explain.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { HiExclamationCircle, HiXCircle } from "react-icons/hi"; import clsx from "clsx"; import { sentenceCase } from "sentence-case"; @@ -45,6 +45,17 @@ const Explain: React.FC = ({ } }, [spec, simpleTokens]); + const [ctaContribToAutocompleteVisible, setCtaContribToAutocompleteVisible] = + useState( + () => localStorage.getItem("cta/contributeToAutocomplete") !== "off" + ); + useEffect(() => { + localStorage.setItem( + "cta/contributeToAutocomplete", + ctaContribToAutocompleteVisible ? "on" : "off" + ); + }, [ctaContribToAutocompleteVisible]); + if (!cmd || !spec || !parsed) return (
@@ -101,49 +112,61 @@ const Explain: React.FC = ({ ); return ( -
+ <> {/* Results */} - {parsed.map((token) => ( -
= token.indices[0] && - selection[0] <= token.indices[1] && - "border-teal-400 opacity-100" - )} - onMouseEnter={() => - onSelectionChange([token.indices[0], token.indices[1]]) - } - onClick={() => - onSelectionChange([token.indices[0], token.indices[1]]) - } - > -
- - {token.value} - {token.displayName ? ` - ${token.displayName}` : ""} - +
+ {parsed.map((token) => ( +
= token.indices[0] && + selection[0] <= token.indices[1] && + "border-teal-400 opacity-100" + )} + onMouseEnter={() => + onSelectionChange([token.indices[0], token.indices[1]]) + } + onClick={() => + onSelectionChange([token.indices[0], token.indices[1]]) + } + > +
+ + {token.value} + {token.displayName ? ` - ${token.displayName}` : ""} + +
+
{token.description || sentenceCase(token.type)}
-
{token.description || sentenceCase(token.type)}
-
- ))} - {/* CTA to contribute */} -
- Want to make the descriptions better? They{"'"}re open-source! - Contribute at{" "} - - withfig/autocomplete on Github - - . + ))}
-
+ {/* CTA to contribute */} + {ctaContribToAutocompleteVisible && ( +
+
+ Could the descriptions be better?
+ Contribute at{" "} + + withfig/autocomplete on Github + + . +
+ +
+ )} + ); };