moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created header-steps component to onboarding modal

This commit is contained in:
danidfra 2024-10-02 20:10:45 -03:00
parent c53fa16e39
commit cb4520ad3e
1 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/features/ui/components/modals/onboarding-flow-modal/header-steps.tsx Normal file
View File

@ -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>
);
};