From 3aabddd628454f111047a51d6230fee47a3f061d Mon Sep 17 00:00:00 2001
From: Adenekan Wonderful <adenekanwonderful41@gmail.com>
Date: Mon, 26 Dec 2022 16:46:48 +0100
Subject: [PATCH] (chore): added scoutbar tutorial icons in its seperate
 concern

---
 src/components/scout-tutorial/index.tsx | 53 +++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/components/scout-tutorial/index.tsx

diff --git a/src/components/scout-tutorial/index.tsx b/src/components/scout-tutorial/index.tsx
new file mode 100644
index 0000000..c072ba3
--- /dev/null
+++ b/src/components/scout-tutorial/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { ScoutBarProps } from 'scoutbar';
+
+import { TutorialIcon } from 'components/icon/svg/tutorial';
+import ScoutBarLogo from 'components/icon/svg/logo';
+
+const ScoutTutorial: React.FC<Partial<ScoutBarProps>> = ({
+  brandColor,
+  acknowledgement,
+}) => (
+  <div className="scout__bar-tutorial-section">
+    {acknowledgement && (
+      <div className="scout__bar-mobile-acknowledge">
+        <p>
+          Powered by <ScoutBarLogo brandColor={brandColor} />
+        </p>
+      </div>
+    )}
+    <div className="scout__bar-tutorial-section-item">
+      <p>
+        <span>
+          <TutorialIcon.Tab />
+          TAB
+        </span>
+        or{' '}
+        <span className="scout__bar-tutorial-section-item__arrow m-left">
+          <TutorialIcon.Down />
+        </span>
+        <span className="scout__bar-tutorial-section-item__arrow">
+          <TutorialIcon.Up />
+        </span>
+        to navigate
+      </p>
+    </div>
+    <div className="scout__bar-tutorial-section-item">
+      <p>
+        <span>
+          <TutorialIcon.Return />
+          RETURN
+        </span>
+        to Select
+      </p>
+    </div>
+    <div className="scout__bar-tutorial-section-item">
+      <p>
+        <span>ESC</span>
+        to cancel
+      </p>
+    </div>
+  </div>
+);
+
+export default ScoutTutorial;