strapi/packages/strapi-plugin-i18n/admin/src/components/LocaleRow/index.js

import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Pencil } from '@buffetjs/icons';
import { Text, IconLinks } from '@buffetjs/core';
import { CustomRow } from '@buffetjs/styles';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { getTrad } from '../../utils';

// Fake permissions
const canUpdate = true;
const canDelete = true;

const LocaleSettingsPage = ({ locale, onDelete }) => {
  const { formatMessage } = useIntl();

  return (
    <CustomRow onClick={() => console.log('open modal')}>
      <td>
        <Text>{locale.code}</Text>
      </td>
      <td>
        <Text fontWeight="semiBold">{locale.displayName}</Text>
      </td>
      <td>
        <Text>
          {locale.isDefault
            ? formatMessage({ id: getTrad('Settings.locales.row.default-locale') })
            : null}
        </Text>
      </td>
      <td>
        <IconLinks
          links={[
            {
              icon: canUpdate ? (
                <span aria-label="Edit locale">
                  <Pencil fill="#0e1622" />
                </span>
              ) : null,
              onClick: () => console.log('edit'),
            },
            {
              icon:
                canDelete && !locale.isDefault ? (
                  <span aria-label="Delete locale">
                    <FontAwesomeIcon icon="trash-alt" />
                  </span>
                ) : null,
              onClick: onDelete,
            },
          ]}
        />
      </td>
    </CustomRow>
  );
};

LocaleSettingsPage.propTypes = {
  locale: PropTypes.shape({
    isDefault: PropTypes.bool,
    displayName: PropTypes.string,
    code: PropTypes.string.isRequired,
  }).isRequired,
  onDelete: PropTypes.func.isRequired,
};

export default LocaleSettingsPage;