Handle web player

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

@@ -0,0 +1,52 @@
+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">
+        <Stack spacing="xs" sx={{ 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,
+};