feishin/src/renderer/features/settings/components/settings-option.tsx

import React from 'react';
import { Group, Stack } from '@mantine/core';
import { RiInformationLine } from 'react-icons/ri';
import { Text, Tooltip } from '/@/renderer/components';

interface SettingsOptionProps {
  control: React.ReactNode;
  description?: React.ReactNode | string;
  note?: string;
  title: React.ReactNode | string;
}

export const SettingsOptions = ({ title, description, control, note }: SettingsOptionProps) => {
  return (
    <>
      <Group
        noWrap
        position="apart"
        sx={{ alignItems: 'center' }}
      >
        <Stack
          spacing="xs"
          sx={{
            alignSelf: 'flex-start',
            display: 'flex',
            maxWidth: '50%',
          }}
        >
          <Group>
            <Text
              $noSelect
              size="md"
            >
              {title}
            </Text>
            {note && (
              <Tooltip
                label={note}
                openDelay={0}
              >
                <Group>
                  <RiInformationLine size={15} />
                </Group>
              </Tooltip>
            )}
          </Group>
          {React.isValidElement(description) ? (
            description
          ) : (
            <Text
              $noSelect
              $secondary
              size="sm"
            >
              {description}
            </Text>
          )}
        </Stack>
        <Group position="right">{control}</Group>
      </Group>
    </>
  );
};

SettingsOptions.defaultProps = {
  description: undefined,
  note: undefined,
};