unleash.unleash/frontend/src/component/user/common/SecondaryLoginActions.tsx

import { styled, Typography } from '@mui/material';
import { Link } from 'react-router-dom';

const StyledContainer = styled('div')(({ theme }) => ({
    margin: 'auto auto 0 auto',
    width: '230px',
    [theme.breakpoints.down('md')]: {
        marginTop: theme.spacing(2),
    },
}));

const StyledLink = styled(Link)(({ theme }) => ({
    fontWeight: 'bold',
    textAlign: 'center',
}));

const StyledTypography = styled(Typography)(({ theme }) => ({
    fontWeight: 'bold',
    marginBottom: theme.spacing(1),
}));

const StyledRef = styled('a')(({ theme }) => ({
    fontWeight: 'bold',
    textAlign: 'center',
}));

const SecondaryLoginActions = () => {
    return (
        <StyledContainer>
            <StyledLink to='/forgotten-password'>
                <StyledTypography variant='body2'>
                    Forgot password?
                </StyledTypography>
            </StyledLink>
            <Typography variant='body2'>
                Don't have an account?{' '}
                <StyledRef
                    href='https://www.getunleash.io/plans'
                    target='_blank'
                    rel='noopener noreferrer'
                >
                    Sign up
                </StyledRef>
            </Typography>
        </StyledContainer>
    );
};

export default SecondaryLoginActions;