From 1a66bfb8be2bb97355695a4c7a0ba1f54c63bc92 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <ajnart@pm.me>
Date: Tue, 28 Jun 2022 19:08:18 +0200
Subject: [PATCH] :sparkles: add a <Tip/> component and use it

---
 src/components/AppShelf/AddAppShelfItem.tsx | 14 ++---
 src/components/Settings/CommonSettings.tsx  | 59 +++++++++------------
 src/components/layout/Tip.tsx               | 19 +++++++
 3 files changed, 48 insertions(+), 44 deletions(-)
 create mode 100644 src/components/layout/Tip.tsx

diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index 206cb5ee4..2a0db4a98 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -24,6 +24,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
 import { ServiceTypeList, StatusCodes } from '../../tools/types';
+import Tip from '../layout/Tip';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -273,15 +274,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                       }}
                       error={form.errors.apiKey && 'Invalid API key'}
                     />
-                    <Text
-                      style={{
-                        alignSelf: 'center',
-                        fontSize: '0.75rem',
-                        textAlign: 'center',
-                        color: 'gray',
-                      }}
-                    >
-                      Tip: Get your API key{' '}
+                    <Tip>
+                      Get your API key{' '}
                       <Anchor
                         target="_blank"
                         weight="bold"
@@ -290,7 +284,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                       >
                         here.
                       </Anchor>
-                    </Text>
+                    </Tip>
                   </>
                 )}
                 {form.values.type === 'qBittorrent' && (
diff --git a/src/components/Settings/CommonSettings.tsx b/src/components/Settings/CommonSettings.tsx
index 91e52d8f5..4d55eee18 100644
--- a/src/components/Settings/CommonSettings.tsx
+++ b/src/components/Settings/CommonSettings.tsx
@@ -6,6 +6,7 @@ import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionS
 import ConfigChanger from '../Config/ConfigChanger';
 import SaveConfigComponent from '../Config/SaveConfig';
 import ModuleEnabler from './ModuleEnabler';
+import Tip from '../layout/Tip';
 
 export default function CommonSettings(args: any) {
   const { config, setConfig } = useConfig();
@@ -26,17 +27,13 @@ export default function CommonSettings(args: any) {
     <Group direction="column" grow mb="lg">
       <Group grow direction="column" spacing={0}>
         <Text>Search engine</Text>
-        <Text
-          style={{
-            fontSize: '0.75rem',
-            color: 'gray',
-            marginBottom: '0.5rem',
-          }}
-        >
-          Tip: %s can be used as a placeholder for the query.
-        </Text>
+        <Tip>
+          Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube or
+          for a Torrent respectively.
+        </Tip>
         <SegmentedControl
           fullWidth
+          mb="sm"
           title="Search engine"
           value={
             // Match config.settings.searchUrl with a key in the matches array
@@ -58,21 +55,24 @@ export default function CommonSettings(args: any) {
           data={matches}
         />
         {searchUrl === 'Custom' && (
-          <TextInput
-            label="Query URL"
-            placeholder="Custom query URL"
-            value={customSearchUrl}
-            onChange={(event) => {
-              setCustomSearchUrl(event.currentTarget.value);
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  searchUrl: event.currentTarget.value,
-                },
-              });
-            }}
-          />
+          <>
+            <Tip>%s can be used as a placeholder for the query.</Tip>
+            <TextInput
+              label="Query URL"
+              placeholder="Custom query URL"
+              value={customSearchUrl}
+              onChange={(event) => {
+                setCustomSearchUrl(event.currentTarget.value);
+                setConfig({
+                  ...config,
+                  settings: {
+                    ...config.settings,
+                    searchUrl: event.currentTarget.value,
+                  },
+                });
+              }}
+            />
+          </>
         )}
       </Group>
       <ColorSchemeSwitch />
@@ -80,16 +80,7 @@ export default function CommonSettings(args: any) {
       <ModuleEnabler />
       <ConfigChanger />
       <SaveConfigComponent />
-      <Text
-        style={{
-          alignSelf: 'center',
-          fontSize: '0.75rem',
-          textAlign: 'center',
-          color: 'gray',
-        }}
-      >
-        Tip: You can upload your config file by dragging and dropping it onto the page!
-      </Text>
+      <Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
     </Group>
   );
 }
diff --git a/src/components/layout/Tip.tsx b/src/components/layout/Tip.tsx
new file mode 100644
index 000000000..d21d709f8
--- /dev/null
+++ b/src/components/layout/Tip.tsx
@@ -0,0 +1,19 @@
+import { Text } from '@mantine/core';
+
+interface TipProps {
+  children: React.ReactNode;
+}
+
+export default function Tip(props: TipProps) {
+  return (
+    <Text
+      style={{
+        fontSize: '0.75rem',
+        color: 'gray',
+        marginBottom: '0.5rem',
+      }}
+    >
+      Tip: {props.children}
+    </Text>
+  );
+}