add header

Author: toughyear

examples/phaser/package.json

@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
+    "react-icons": "^4.9.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "regenerator-runtime": "^0.13.11",

examples/phaser/src/Game.tsx

@@ -7,6 +7,7 @@ import AgentDisplay from "./AgentDisplay";
 import { locations } from "./data/world";
 import AgentChat from "./AgentChat";
 import NotificationModal from "./NotificationModal";
+import Header from "./Header";
 
 interface Props {
   openaiKey: string;
@@ -55,6 +56,7 @@ function Game(props: Props) {
 
   return (
     <div className='p-5 overflow-scroll bg-gray-50 relative'>
+      <Header />
       <AgentDisplay agent={agents[selectedAgentIndex]} />
       {showNotification && (
         <NotificationModal

examples/phaser/src/Header.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+// import from react-icons
+import { FaTwitter, FaGithub, FaDiscord } from "react-icons/fa";
+
+const button = [
+  { href: "https://twitter.com/toughyear", icon: <FaTwitter /> },
+  {
+    href: "https://github.com/toughyear/generative-agents",
+    icon: <FaGithub />,
+  },
+  { href: "https://discord.com/invite/9NjpMXtVaW", icon: <FaDiscord /> },
+];
+
+function Header() {
+  return (
+    <section>
+      <nav className='flex px-6 h-16 items-center justify-end gap-2'>
+        <a
+          href={"https://multimode.run/"}
+          className='flex items-center mr-auto font-semibold tracking-wide'
+        >
+          Generative Agents Demo
+        </a>
+        {button.map(({ href, icon }) => {
+          return (
+            <a
+              key={href}
+              href={href}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='hover:opacity-75 p-2'
+            >
+              {icon}
+            </a>
+          );
+        })}
+      </nav>
+    </section>
+  );
+}
+
+export default Header;

examples/phaser/yarn.lock

@@ -7592,6 +7592,11 @@ react-ga4@^2.1.0:
   resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
   integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
 
+react-icons@^4.9.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.9.0.tgz#ba44f436a053393adb1bdcafbc5c158b7b70d2a3"
+  integrity sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"