Translate UI

Translate.tsx

import { Stack, Text, Flex, Button, Radio, Grid, Container } from "@sanity/ui";
import { useState } from "react";

const LANGUAGES = [
  { code: "en", label: "English" },
  { code: "fr", label: "Français" },
  { code: "de", label: "Deutsch" },
  { code: "it", label: "Italiano" },
  { code: "es", label: "Español" },
  { code: "ko", label: "한국어" },
];

type LanguageRadioProps = {
  language: {
    code: string;
    label: string;
  };
  name: string;
  selectedValue: string;
  onChange: (value: string) => void;
  disabled: boolean;
};

function LanguageRadio({
  language,
  name,
  selectedValue,
  onChange,
  disabled,
}: LanguageRadioProps) {
  return (
    <Flex
      as="label"
      htmlFor={`${name}-${language.code}`}
      key={language.code}
      align="center"
      gap={2}
    >
      <Radio
        id={`${name}-${language.code}`}
        name={name}
        value={language.code}
        checked={selectedValue === language.code}
        onChange={(event) => onChange(event.currentTarget.value)}
        disabled={disabled}
      />
      <Text size={2}>{language.label}</Text>
    </Flex>
  );
}

export function Translate() {
  const [fromLanguage, setFromLanguage] = useState(LANGUAGES[0].code);
  const [toLanguage, setToLanguage] = useState(LANGUAGES[1].code);

  const fromLanguageLabel = LANGUAGES.find(
    (language) => language.code === fromLanguage
  )?.label;
  const toLanguageLabel = LANGUAGES.find(
    (language) => language.code === toLanguage
  )?.label;

  const handleTranslate = () => {
    console.log("translate", { fromLanguage, toLanguage });
  };

  return (
    <Container width={1} padding={6}>
      <Stack space={6}>
        <Text size={4} weight="semibold" align="center">
          Translate from {fromLanguageLabel} to {toLanguageLabel}
        </Text>

        <Stack space={5}>
          {/* From Section */}
          <Stack space={3}>
            <Text weight="semibold">From:</Text>
            <Grid columns={3} gap={3}>
              {LANGUAGES.map((language) => (
                <LanguageRadio
                  key={language.code}
                  language={language}
                  name="from-language"
                  selectedValue={fromLanguage}
                  onChange={setFromLanguage}
                  disabled={toLanguage === language.code}
                />
              ))}
            </Grid>
          </Stack>

          {/* To Section */}
          <Stack space={3}>
            <Text weight="semibold">To:</Text>
            <Grid columns={3} gap={3}>
              {LANGUAGES.map((language) => (
                <LanguageRadio
                  key={language.code}
                  language={language}
                  name="to-language"
                  selectedValue={toLanguage}
                  onChange={setToLanguage}
                  disabled={fromLanguage === language.code}
                />
              ))}
            </Grid>
          </Stack>
        </Stack>

        {/* Action Buttons */}
        <Flex justify="center" gap={3} marginTop={4}>
          <Button
            mode="default"
            text="Translate ↑"
            tone="primary"
            padding={4}
            fontSize={2}
            onClick={handleTranslate}
          />
        </Flex>
      </Stack>
    </Container>
  );
}