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="sm">
              {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,
};