Add a footer and links to the Github repository

apps/frontend/src/app.tsx

@@ -0,0 +1,17 @@
+import { Header } from './components/header';
+import { Footer } from './components/footer';
+import { UsaBanner } from './components/usa-banner';
+import { HomePage } from './routes';
+import { useAppContext } from './context';
+
+export const App = () => {
+  const context = useAppContext();
+  return (
+    <div className="App">
+      <UsaBanner />
+      <Header />
+      <HomePage />
+      <Footer github={context.github} />
+    </div>
+  );
+};

apps/frontend/src/components/footer.tsx

@@ -0,0 +1,53 @@
+import { type GithubRepository, getBranchTreeUrl } from '../lib/github';
+
+type FooterProps = {
+  github: GithubRepository;
+};
+
+export const Footer = (props: FooterProps) => {
+  return (
+    <footer className="usa-footer usa-footer--slim">
+      <div className="grid-container usa-footer__return-to-top">
+        <a href="#">Return to top</a>
+      </div>
+      <div className="usa-footer__primary-section">
+        <div className="usa-footer__primary-container grid-row">
+          <div className="mobile-lg:grid-col-8">
+            <nav className="usa-footer__nav" aria-label="Footer navigation,">
+              <ul className="grid-row grid-gap">
+                <li
+                  className="
+                mobile-lg:grid-col-6
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+                >
+                  <a
+                    className="usa-footer__primary-link"
+                    href="https://10x.gsa.gov/"
+                  >
+                    10x
+                  </a>
+                </li>
+                <li
+                  className="
+                mobile-lg:grid-col-6
+                desktop:grid-col-auto
+                usa-footer__primary-content
+              "
+                >
+                  <a
+                    className="usa-footer__primary-link"
+                    href={getBranchTreeUrl(props.github, true)}
+                  >
+                    Github repository
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};

apps/frontend/src/views/context.tsx → apps/frontend/src/context.tsx

@@ -1,15 +1,18 @@
 import { createContext, useContext } from 'react';
+import { GithubRepository } from './lib/github';
 
 export interface Backend {
   helloWorld(echoValue: string): string;
 }
 
 export interface Context {
   backend: Backend;
+  github: GithubRepository;
 }
 
 export const AppContext = createContext<Context>({
   backend: {} as Backend,
+  github: {} as GithubRepository,
 });
 
 export const useAppContext = () => {

apps/frontend/src/index.ts

@@ -1,7 +1,8 @@
-import { createAppRoot } from './views/main';
+import { createAppRoot } from './main';
 
 createAppRoot(document.getElementById('root') as HTMLElement, {
   backend: {
     helloWorld: (str: string) => str,
   },
+  github: import.meta.env.GITHUB,
 });

apps/frontend/src/lib/github.ts

@@ -0,0 +1,27 @@
+export type GithubRepository = {
+  owner: string;
+  repository: string;
+  branch: string;
+  commit: string;
+};
+
+export const DEFAULT_REPOSITORY: GithubRepository = {
+  owner: 'gsa-tts',
+  repository: 'atj-platform',
+  branch: 'main',
+  commit: 'main',
+};
+
+export const getBranchTreeUrl = (
+  github: GithubRepository,
+  useDefaultShortForm = true
+) => {
+  if (useDefaultShortForm && github.branch === DEFAULT_REPOSITORY.branch) {
+    return `https://github.com/${github.owner}/${github.repository}`;
+  }
+  return `https://github.com/${github.owner}/${github.repository}/tree/${github.branch}`;
+};
+
+export const getNewIssueUrl = (github: GithubRepository) => {
+  return `https://github.com/${github.owner}/${github.repository}/issues/new/choose`;
+};