39 lines
942 B
TypeScript
39 lines
942 B
TypeScript
|
import * as React from "react";
|
||
|
|
import { Image, tokens, makeStyles } from "@fluentui/react-components";
|
||
|
|
|
||
|
|
export interface HeaderProps {
|
||
|
|
title: string;
|
||
|
|
logo: string;
|
||
|
|
message: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const useStyles = makeStyles({
|
||
|
|
welcome__header: {
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
alignItems: "center",
|
||
|
|
paddingBottom: "30px",
|
||
|
|
paddingTop: "100px",
|
||
|
|
backgroundColor: tokens.colorNeutralBackground3,
|
||
|
|
},
|
||
|
|
message: {
|
||
|
|
fontSize: tokens.fontSizeHero900,
|
||
|
|
fontWeight: tokens.fontWeightRegular,
|
||
|
|
fontColor: tokens.colorNeutralBackgroundStatic,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||
|
|
const { title, logo, message } = props;
|
||
|
|
const styles = useStyles();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className={styles.welcome__header}>
|
||
|
|
<Image width="90" height="90" src={logo} alt={title} />
|
||
|
|
<h1 className={styles.message}>{message}</h1>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Header;
|