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

import React from 'react';

import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text';
import { Tooltip } from '/@/shared/components/tooltip/tooltip';

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

export const SettingsOptions = ({ control, description, note, title }: SettingsOptionProps) => {
    return (
        <>
            <Group
                justify="space-between"
                style={{ alignItems: 'center' }}
                wrap="nowrap"
            >
                <Stack
                    gap="xs"
                    style={{
                        alignSelf: 'flex-start',
                        display: 'flex',
                        maxWidth: '50%',
                    }}
                >
                    <Group>
                        <Text
                            isNoSelect
                            size="md"
                        >
                            {title}
                        </Text>
                        {note && (
                            <Tooltip
                                label={note}
                                openDelay={0}
                            >
                                <Icon icon="info" />
                            </Tooltip>
                        )}
                    </Group>
                    {React.isValidElement(description) ? (
                        description
                    ) : (
                        <Text
                            isMuted
                            isNoSelect
                            size="sm"
                        >
                            {description}
                        </Text>
                    )}
                </Stack>
                <Group justify="flex-end">{control}</Group>
            </Group>
        </>
    );
};