Files
Reactive-Resume/client/templates/Castform/widgets/Heading.tsx
Amruth Pillai 9c1380f401 🚀 release v3.0.0
2022-03-06 22:48:29 +01:00

23 lines
673 B
TypeScript

import { darken } from '@mui/material';
import { Theme } from '@reactive-resume/schema';
import get from 'lodash/get';
import { useMemo } from 'react';
import { useAppSelector } from '@/store/hooks';
const Heading: React.FC = ({ children }) => {
const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
const darkerPrimary = useMemo(() => darken(theme.primary, 0.2), [theme.primary]);
return (
<h3
className="relative -left-4 mb-2 w-[95%] rounded-r py-1.5 pl-4 font-bold uppercase"
style={{ color: theme.background, backgroundColor: darkerPrimary }}
>
{children}
</h3>
);
};
export default Heading;