Translate Feature

import { TranslateFeature } from "@/registry/new-york/gencn-ui/items/shared/components/gencn-ui-translate-feature";
import { GencnUIProvider } from "@/registry/new-york/gencn-ui/items/shared/provider/gencn-ui-provider";

function MyComponent() {
  const [open, setOpen] = React.useState(false);
  const [text, setText] = React.useState("Hello, world!");

  const handleAccept = (translatedText: string) => {
    setText(translatedText);
  };

  const translateTargets = ["fr", "es", "de", "ja", "zh"];
  const translateLanguageMap = {
    fr: "French",
    es: "Spanish",
    de: "German",
    ja: "Japanese",
    zh: "Chinese",
  };

  return (
    <GencnUIProvider>
      <button onClick={() => setOpen(true)}>Translate</button>
      <TranslateFeature
        open={open}
        onOpenChange={setOpen}
        onAccept={handleAccept}
        getCurrentValue={() => text}
        translateTargets={translateTargets}
        translateLanguageMap={translateLanguageMap}
      />
    </GencnUIProvider>
  );
}