From cb4520ad3e86f543424a48591dd6a5ef74282e1f Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 2 Oct 2024 20:10:45 -0300
Subject: [PATCH] Created header-steps component to onboarding modal

---
 .../onboarding-flow-modal/header-steps.tsx    | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/features/ui/components/modals/onboarding-flow-modal/header-steps.tsx

diff --git a/src/features/ui/components/modals/onboarding-flow-modal/header-steps.tsx b/src/features/ui/components/modals/onboarding-flow-modal/header-steps.tsx
new file mode 100644
index 000000000..9e40b533d
--- /dev/null
+++ b/src/features/ui/components/modals/onboarding-flow-modal/header-steps.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Stack, Text } from 'soapbox/components/ui';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+
+interface IHeaderSteps {
+  onClose?: () => void;
+  title: React.ReactNode;
+  subtitle: React.ReactNode;
+}
+
+export const HeaderSteps = ({ onClose, title, subtitle }: IHeaderSteps) => {
+  return (
+    <div className='w-5/6 sm:w-full'>
+      <IconButton src={require('@tabler/icons/outline/x.svg')} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
+      <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
+        <Text align='center' weight='bold' className='text-xl sm:text-2xl'>
+          {title}
+        </Text>
+        <Text theme='muted' align='center'>
+          {subtitle}
+        </Text>
+      </Stack>
+    </div>
+  );
+};