feat: add simple breadcrumbs implementation (#422)

<img width="1624" alt="Screenshot 2023-09-28 at 10 00 15 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/cf591c97-c476-42f6-8f41-61b81f68469c">
<img width="1624" alt="Screenshot 2023-09-28 at 10 00 17 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/a381e18f-2a93-4dd1-a74a-46b6ca1a4304">
<img width="1624" alt="Screenshot 2023-09-28 at 10 00 12 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/2aa2ecb5-11e5-40fe-a293-a1f1dda3dffd">

console/client/src/components/PageHeader.tsx

@@ -1,18 +1,39 @@
-import { panelColor } from '../utils'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import React from 'react'
+
+interface Breadcrumb {
+  label: string
+  link?: string
+}
 
 interface Props {
   icon?: React.ReactNode
-  title?: string
+  title: string
   children?: React.ReactNode
+  breadcrumbs?: Breadcrumb[]
 }
 
-export const PageHeader = ({ icon, title, children }: Props) => {
+export const PageHeader = ({ icon, title, children, breadcrumbs }: Props) => {
   return (
-    <div
-      className={`sticky top-0 z-10 ${panelColor} shadow dark:shadow-md flex justify-between items-center py-2 px-4 text-gray-70`}
-    >
+    <div className={`sticky top-0 z-10 shadow dark:shadow-md flex justify-between items-center py-2 px-4 text-gray-70`}>
       <div className='flex items-center'>
-        <span className='mt-1 text-indigo-500 pr-1 h-6 w-6'>{icon}</span>
+        <span className='mt-1 text-indigo-500 mr-2 mb-1 h-5 w-5'>{icon}</span>
+        {breadcrumbs && breadcrumbs.length > 0 && (
+          <nav className='flex pr-2' aria-label='Breadcrumb'>
+            <ol role='list' className='flex items-center space-x-4'>
+              {breadcrumbs.map((crumb, index) => (
+                <li key={index}>
+                  <div className='flex items-center'>
+                    <a href={crumb.link || '#'} className='text-lg mr-2 hover:text-indigo-500'>
+                      {crumb.label}
+                    </a>
+                    <ChevronRightIcon className='mt-0.5 h-5 w-5' />
+                  </div>
+                </li>
+              ))}
+            </ol>
+          </nav>
+        )}
         <span className='text-lg'>{title}</span>
       </div>
       {children}

console/client/src/features/deployments/DeploymentPage.tsx

@@ -49,7 +49,11 @@ export const DeploymentPage = () => {
 
   return (
     <>
-      <PageHeader icon={<RocketLaunchIcon />} title={`Deployments - ${deploymentName}`} />
+      <PageHeader
+        icon={<RocketLaunchIcon />}
+        title={module?.deploymentName || 'Loading...'}
+        breadcrumbs={[{ label: 'Deployments', link: '/deployments' }]}
+      />
 
       <div className='m-4'>
         <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>