add footer

fern-api · Feb 10, 2024 · 4d7028f · 4d7028f
1 parent f6b32d9
commit 4d7028f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 26 deletions.
diff --git a/custom-app/index.html b/custom-app/index.html
@@ -1,7 +1,8 @@
 <!doctype html>
 <html lang="en">
 <body>
-  <div id="root"></div>
+  <header id="fern-header"></header>
+  <footer id="fern-footer" style="margin-top:100px"></footer>
   <script type="module" src="/src/main.tsx"></script>
 </body>
 </html>
diff --git a/custom-app/src/NavHeader.tsx b/custom-app/src/NavHeader.tsx
@@ -1,18 +1,55 @@
-import { Transition } from "@headlessui/react"
-import { Fragment } from "react"
 import NavigationMenuDemo from "./NavMenu"
 
-function NavHeader() {
+export function NavHeader() {
   return (
-    <Transition as={Fragment} show={true} appear={true} enter="tw-transition-opacity" enterFrom="tw-opacity-0" enterTo="tw-opacity-100">
-      <header className="tw-relative tw-w-full flex justify-between items-center">
-        <h2 className="tw-whitespace-nowrap m-0">Custom Header</h2>
-        <div className="tw-absolute tw-w-full sm:tw-left-1/2 sm:-tw-translate-x-1/2 tw-h-full sm:tw-top-0 sm:tw-flex sm:tw-items-center">
-          <NavigationMenuDemo />
+    <div className="tw-fixed tw-top-0 tw-inset-x-0 tw-border-b tw-border-sage6 tw-backdrop-blur-2xl tw-h-[var(--spacing-header-height)] tw-z-30 tw-flex tw-items-center">
+      {/* <Transition
+        as={Fragment}
+        show={true}
+        appear={true}
+        enter="tw-transition-opacity"
+        enterFrom="tw-opacity-0"
+        enterTo="tw-opacity-100"> */}
+        <div className="tw-relative tw-w-full tw-flex tw-justify-between tw-items-center tw-max-w-[var(--spacing-page-width)] tw-mx-auto tw-px-4 md:tw-px-6 lg:tw-px-8">
+          <h2 className="tw-whitespace-nowrap tw-m-0">Custom Header</h2>
+          <div className="tw-absolute tw-right-0 sm:tw-right-auto sm:tw-w-full sm:tw-left-1/2 sm:-tw-translate-x-1/2 tw-h-full sm:tw-top-0 sm:tw-flex sm:tw-items-center">
+            <NavigationMenuDemo />
+          </div>
+          <div className="tw-hidden sm:tw-block">
+            <button className="tw-rounded-md tw-bg-grass11 tw-text-white tw-py-2 tw-px-3">
+              Sign Up
+            </button>
+          </div>
         </div>
-      </header>
-    </Transition>
+      {/* </Transition> */}
+    </div>
   )
 }
 
-export default NavHeader
+export function NavFooter() {
+  return (
+    <div className="tw-border-t tw-border-sage6 tw-bg-sage3">
+      <div className="tw-max-w-[var(--spacing-page-width)] tw-mx-auto tw-px-4 md:tw-px-6 lg:tw-px-8">
+        <div className="tw-grid tw-grid-cols-4 py-8">
+          <ul className="tw-space-y-2">
+            <li>Footer Item 1</li>
+            <li>Footer Item 2</li>
+            <li>Footer Item 3</li>
+          </ul>
+          <ul className="tw-space-y-2">
+            <li>Footer Item 1</li>
+            <li>Footer Item 2</li>
+            <li>Footer Item 3</li>
+          </ul>
+          <div className="tw-flex tw-justify-end tw-items-end tw-text-sage11 tw-flex-col tw-text-end tw-gap-2 tw-col-span-2">
+            <h4>Footer Title</h4>
+            <p className="tw-max-w-96">
+              Footer content goes here. This is a good place to put contact
+              information or other important information.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/custom-app/src/NavMenu.tsx b/custom-app/src/NavMenu.tsx
@@ -5,7 +5,7 @@ import { CaretDownIcon } from '@radix-ui/react-icons'
 
 const NavigationMenuDemo = () => {
   return (
-    <NavigationMenu.Root className="tw-relative tw-z-[1] tw-flex tw-w-full tw-justify-end sm:tw-justify-center">
+    <NavigationMenu.Root className="tw-relative tw-z-[1] tw-flex sm:tw-w-full tw-justify-end sm:tw-justify-center">
       <NavigationMenu.List className="tw-center tw-m-0 tw-flex tw-list-none tw-p-1">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className="tw-text-grass11 hover:tw-bg-grass3 focus:tw-shadow-grass7 tw-group tw-flex tw-select-none tw-items-center tw-justify-between tw-gap-[2px] tw-rounded-[4px] tw-px-3 tw-py-2 tw-text-[15px] tw-font-medium tw-leading-none tw-outline-none focus:tw-shadow-[0_0_0_2px]">

diff --git a/custom-app/src/main.tsx b/custom-app/src/main.tsx
@@ -1,38 +1,37 @@
-import "./main.css";
+import './main.css'
 
-import React from 'react'
 import ReactDOM from 'react-dom'
-import NavHeader from './NavHeader'
+import { NavFooter, NavHeader } from './NavHeader'
+import React from 'react'
 
 function render() {
-
   ReactDOM.render(
-    <React.StrictMode>
-      <NavHeader />
-    </React.StrictMode>,
-    document.querySelector('nav[aria-label="primary"]'),
+    React.createElement(NavHeader),
+    document.getElementById('fern-header'),
+  )
+  ReactDOM.render(
+    React.createElement(NavFooter),
+    document.getElementById('fern-footer'),
   )
 }
 
 let observations = 0
 document.addEventListener('DOMContentLoaded', () => {
-  console.log('DOMContentLoaded');
+  console.log('DOMContentLoaded')
   render()
   new MutationObserver((e, o) => {
     render()
     for (const item of e) {
       if (item.target instanceof HTMLElement) {
         const target = item.target
-        if (
-          target.tagName === 'NAV' &&
-          target.getAttribute('aria-label') === 'primary'
-        ) {
+        if (target.id === 'fern-header' || target.id === 'fern-footer') {
           if (observations < 3) {
             // react hydration will trigger a mutation event
             observations++
           } else {
             o.disconnect()
           }
+          break
         }
       }
     }