@0.5.0

types/SiteDef: (breaking) cleaner structure that supports more options aboveCopyright: legal links by default featureCTA is now featured: LinkDef[] siteDef/*: exported footer columns individually and as a common set. (breaking) new community content requires @svgr/webpack as devDep in host app Main, NavItems: common --> primitives (breaking) common/copyright: xs, sm improvements common/footer: siteDef.aboveCopyright support, moved 'legal' to above copyright by default, some cleanup common/header/mobile-nav: sideDef.featured array support, cleanup common/DrawerMenu: opens to w-5/6 on mobile and w-2/3 on sm primitives/button: minor changes to 'default' and 'lg' width primitives/table: added as requested next/root-layout: body tag: added 'flex flex-col h-full' to support footer and copyright layout tailwind/screens.tailwind: sm: 450 --> 480 tailwind/typo-plugin: remove demo dir
hanzoai · Feb 13, 2024 · a43d7a2 · a43d7a2
1 parent 2f63979
commit a43d7a2
Show file tree

Hide file tree

Showing 36 changed files with 545 additions and 1,240 deletions.
diff --git a/old-package-dependencies.txt b/old-package-dependencies.txt
diff --git a/pkgs/luxdefi-ui/_esbuild.mjs b/pkgs/luxdefi-ui/_esbuild.mjs
diff --git a/pkgs/luxdefi-ui/common/copyright.tsx b/pkgs/luxdefi-ui/common/copyright.tsx
@@ -2,13 +2,19 @@ import React from 'react'
 
 const FIRST = 2020
 
-const Copyright: React.FC = () => {
+const Copyright: React.FC<{
+  className?: string
+}> = ({
+  className='' 
+}) => {
 
   const year = new Date().getFullYear()
   const yearString = (year > FIRST) ? `${FIRST} - ${year}` : FIRST.toString()
 
   return (
-    <>{`Copyright © ${yearString} Lux Partners Ltd. `} <br className='sm:hidden'/> All rights reserved.</> 
+    <div className={className}>
+      {`Copyright © ${yearString}`}&nbsp;<br className='sm:hidden'/>Lux Partners Ltd.&nbsp;<br className='md:hidden'/>&nbsp;All rights reserved.
+    </div> 
   )
 }
 

diff --git a/pkgs/luxdefi-ui/common/footer.tsx b/pkgs/luxdefi-ui/common/footer.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 
-import type { ButtonVariants } from '../primitives'
 import type { LinkDef, SiteDef } from '../types'
-import { Copyright, NavItems } from '../common'
+import { Copyright } from '../common'
+import { NavItems } from '../primitives'
+import { legal } from '../siteDef/footer/legal'
 
 import Logo from './logo'
-
-
+import { cn } from '../util'
 
 const Footer: React.FC<{
   siteDef: SiteDef,
@@ -16,43 +16,62 @@ const Footer: React.FC<{
   siteDef,
   className='',
   noHorizPadding=false
-}) => (
-  <footer className={className}> 
-    <div className={
-      (noHorizPadding ? '' : 'lg:px-8 px-5 md:px-[32px] ') +
-      'grid grid-cols-2 gap-x-16 gap-y-6 ' +
-      'sm:grid-cols-3 ' + 
-      'md:w-full md:mx-0 ' +
-      'lg:flex lg:flex-row lg:justify-between lg:gap-8 lg:w-full' + 
-      'max-w-screen-2xl ' + 
-      `lg:columns-${siteDef.footer.length + 1}` // must safelist these! see tailwind docs
-    }>
-      <div className='hidden lg:flex flex-col' key={0}>
-        <Logo size='md' />
+}) => {
+
+  const { footer, aboveCopyright } = siteDef
+  const smGridCols = Math.floor(footer.length/2)
+  const smGridColsClx = `sm:grid-cols-${smGridCols} `
+  const _aboveCopyright = (typeof aboveCopyright === 'undefined') ? legal : aboveCopyright
+
+  return (
+    <footer className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}> 
+      <div className={
+        (noHorizPadding ? '' : 'px-5 md:px-8 ') +
+        'grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 ' + smGridColsClx +  
+        'md:w-full sm:justify-items-center md:mx-0 lg:w-full max-w-screen-2xl ' +
+        'md:flex md:flex-row md:justify-between ' 
+      }>
+        <div className='hidden lg:flex flex-col' key={0}>
+          <Logo size='md' />
+        </div>
+        {footer.map((defs: LinkDef[], index) => {
+
+          const xsColSpanClx = ((index === footer.length - 1) && (footer.length % 2 === 1)) ? 
+            'xs:col-span-2 xs:mx-auto md:col-span-1 md:mx-0 ' : ''
+
+          return (
+            <NavItems
+              items={defs} 
+              currentAs={siteDef.currentAs}
+              as='nav' 
+              className={cn('sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start ' + 
+                'gap-[11px] sm:gap-[12px] md:gap-[15px] ',
+                xsColSpanClx
+              )} 
+              key={index + 1}
+              itemClx={(def: LinkDef) => ((def.variant === 'linkFG') ?
+                'font-heading text-[15px]/[1.3] font-medium text-foreground tracking-normal'
+                : 
+                'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'
+              )}
+            /> 
+          )
+        })}
+      </div>
+      <div className='md:mt-[2vh]'>
+      {_aboveCopyright.length > 0 && (
+        <NavItems
+          items={_aboveCopyright} 
+          as='div' 
+          className={'flex flex-row justify-center gap-4 mb-2'} 
+          itemClx={'text-sm text-center text-muted-2 underline hover:text-foreground'}
+        />
+      )} 
+        <Copyright className='text-sm text-center text-muted-3'/>
       </div>
-      {siteDef.footer.map((defs: LinkDef[], index, arr) => {
-        const colSpan = ((index === arr.length - 1) && (arr.length % 2 === 1)) ? 'col-span-2 mx-auto items-center sm:col-span-1 sm:mx-0 sm:items-start' : ''
-        return (
-          <NavItems
-            items={defs} 
-            currentAs={siteDef.currentAs}
-            as='nav' 
-            className={'w-fit flex flex-col justify-start items-start gap-[11px] sm:gap-[12px] md:gap-[15px] ' + colSpan} 
-            key={index + 1}
-            itemClassName={'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'}
-            itemClassNameFromVariant={
-              (variant: ButtonVariants) => ( 
-                variant === 'linkFG' ? 'font-heading text-[15px]/[1.3] font-medium text-foreground tracking-normal' : ''
-              )
-            }
-          /> 
-        )
-      })}
-    </div>
-    <div className='text-sm text-center text-muted-3'>
-      <Copyright />
-    </div>
-  </footer>
-)
+    </footer>
+  )
+}
 
 export default Footer
+// flex flex-col justify-between gap-6
diff --git a/pkgs/luxdefi-ui/common/header/index.tsx b/pkgs/luxdefi-ui/common/header/index.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
 
 import type { SiteDef } from '../../types'
-import Logo from '../logo'
-import { type ButtonVariants } from '../../primitives'
-import { NavItems, Icons, DrawerMenu } from '../../common'
-import MobileNav from './mobile-nav'
-
+import { NavItems } from '../../primitives'
+import { Icons, DrawerMenu, Logo } from '../../common'
 import { cn } from '../../util'
 
+import MobileNav from './mobile-nav'
+
 const Header: React.FC<{
   siteDef: SiteDef
   className?: string
@@ -16,32 +15,26 @@ const Header: React.FC<{
   className = ''
 }) => {
 
-  const { nav: {elements, featuredCTA}} = siteDef
-  const allElements = (featuredCTA) ? [...elements, featuredCTA] : elements
+  const { nav: { common, featured }} = siteDef
+  const allElements = (featured) ? [...common, ...featured] : common
+    // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
+    // (vs be beat out by 'text-color-nav')
+  const navItemClx = 'font-heading h-8 tracking-[-0.3px] !text-[13px]/[13px]'
 
   return (
     <header className={cn('bg-background sticky z-10 top-0 ', className)} >
       {/* md or larger */}
       <div className="hidden md:flex flex-row md:h-[80px] items-center justify-between px-[32px] 2xl:mx-auto max-w-screen-2xl">
         <Logo size='md' className='hidden lg:flex' key='two'/>
         <Logo size='sm' className='hidden md:flex lg:hidden' key='one'/>
-        {/* lg or larger */}
+        {/* md or larger */}
         <NavItems 
           currentAs={siteDef.currentAs}
           items={allElements} 
-          className='hidden lg:flex justify-between gap-7 text-[13px]/[13px] ' 
-          itemClassName='font-heading h-[32px] tracking-[-0.3px]' 
+          className='hidden md:flex md:gap-4 lg:justify-between lg:gap-7 ' 
+          itemClx={navItemClx} 
           key='three'
         />
-        {/* md exactly */}
-        <NavItems 
-          currentAs={siteDef.currentAs}
-          items={allElements} 
-          className='hidden md:flex lg:hidden gap-4 text-[13px]/[13px] ' 
-          itemClassName='font-heading h-[32px] tracking-[-0.3px]'  
-          itemClassNameFromVariant={(variant: ButtonVariants) => (variant === 'primary' ? 'min-w-0 text-[13px]/[13px]' : '')}
-          key='four'
-        />
       </div>
       {/* smaller than md: mobile style drawer menu */}
       <div className="flex md:hidden h-[44px] items-center justify-between px-2">
@@ -53,7 +46,7 @@ const Header: React.FC<{
           <MobileNav 
             siteDef={siteDef}
             className='pt-12' 
-            navElementClasses='px-10 text-l h-10 justify-start border-b rounded-none' 
+            commonItemClx='px-10 text-l h-10 justify-start border-b rounded-none' 
           />
         </DrawerMenu>
       </div>

diff --git a/pkgs/luxdefi-ui/common/header/mobile-nav.tsx b/pkgs/luxdefi-ui/common/header/mobile-nav.tsx
@@ -2,64 +2,68 @@
 import React from 'react'
 
 import { type ButtonVariants, LinkElement }  from '../../primitives'
-import type { SiteDef } from '../../types'
+import type { LinkDef, SiteDef } from '../../types'
 import { cn } from '../../util'
 
-// onAction is *in addition* to the link's navigation 
-  // action itself.  eg, for also closing the modal menu
 const MobileNav: React.FC<{
   siteDef: SiteDef
   className?: string
-  navElementClasses?: string
+  commonItemClx?: string | ((def: LinkDef) => string),
+  /**
+   * This is called *in addition* to the link's actual navigation 
+   * action.  eg, I link is clicked, and the modal menu is closes
+   */
   onAction?: () => void 
 }> = ({
   siteDef,
   onAction,
   className='',
-  navElementClasses='',
+  commonItemClx,
 }) => {
 
-  const {nav: {elements, featuredCTA}} = siteDef
+  const { nav: { common, featured }} = siteDef
 
-  return (elements.length || featuredCTA) ? (
+  return (common.length || featured?.length) ? (
     <nav className={className} >
-    {elements.map((el, index) => {
+    {common.map((el, index) => {
       const variant = el.variant ?? 'link'
-      let extraClasses = '' 
+      let internalClx = '' 
         // note that linkFG (or any other variant of 'link') 
         // will not get assigned these classes,
         // and will remain styles is 'foreground' (hence the name)
       if (variant === 'link') {
-        extraClasses+= ' text-nav hover:text-nav-hover active:text-nav-hover '
+        internalClx+= ' text-nav hover:text-nav-hover active:text-nav-hover '
         if (siteDef.currentAs && siteDef.currentAs === el.href) {
-          extraClasses += ' text-nav-current'
+          internalClx += ' text-nav-current'
         }
       } 
       else {
-        extraClasses+= ' min-w-0'   
+        internalClx+= ' min-w-0'   
       }
       if (siteDef.currentAs && siteDef.currentAs === el.href) {
-        extraClasses += ' pointer-events-none'
+        internalClx += ' pointer-events-none'
       }
+      const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : '' 
+
       return (
         <LinkElement 
           def={el}
-          key={index}
+          key={`common-${index}`}
           size='lg'
-          className={cn(navElementClasses, extraClasses)}
+          className={cn(internalClx, itemClx)}
           onClick = {onAction}  
         />
       )
     })}
-    {featuredCTA && (
+    {featured?.length && (featured.map((el, index) => (
       <LinkElement 
-        def={featuredCTA}
-        key='featuredCTA'
+        def={el}
+        key={`featured-${index}`}
         size='lg'
         className='mt-6 w-4/5 mx-auto'
-        onClick = {onAction}  
+        onClick={onAction}  
       />
-    )}
+    )))}
     </nav>
   ) 
   : null

diff --git a/pkgs/luxdefi-ui/common/index.ts b/pkgs/luxdefi-ui/common/index.ts
@@ -11,6 +11,4 @@ export {
 } from './head-metadata'
 export * as Icons from './icons'
 export { default as Logo } from './logo'
-export { default as Main } from './main'
 export { default as MiniChart } from './mini-chart'
-export { default as NavItems} from './nav-items'