phase 0

addin/src/taskpane/components/Header.tsx

@@ -0,0 +1,38 @@
+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;