/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { ReactNode } from 'react';
import { useTheme } from '../../context/MagicBellThemeContext.js';
import FooterLogo from './FooterLogo.js';
import StyledFooter from './StyledFooter.js';
export type FooterProps = {
children?: ReactNode;
};
/**
* Footer for the notification inbox. Renders a button to toggle the user
* preferences panel.
*
* @example
*
*/
export default function Footer({ children }: FooterProps) {
const theme = useTheme();
const { footer: footerTheme } = theme;
const contentStyle = css`
display: flex;
align-items: center;
justify-content: space-between;
color: ${footerTheme.textColor} !important;
a,
button {
color: ${footerTheme.textColor};
display: block;
}
a {
opacity: 0.85;
}
`;
return (
{children}
);
}