Skip to content

Commit

Permalink
feat: add page footer
Browse files Browse the repository at this point in the history
  • Loading branch information
viet nguyen committed Oct 25, 2023
1 parent 4939dad commit 99c5425
Show file tree
Hide file tree
Showing 11 changed files with 76 additions and 20 deletions.
2 changes: 2 additions & 0 deletions .env
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,5 @@ GC_BUCKET_NAME=openbeta-staging
# A comma-separated-list of test area IDs
# to exclude from the feed
NEXT_PUBLIC_TEST_AREA_IDS=18c5dd5c-8186-50b6-8a60-ae2948c548d1

DISCORD_INVITE=https://discord.gg/npjkrqATkD
8 changes: 4 additions & 4 deletions src/app/components/DesktopHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const DesktopHeader: React.FC = () => {

const navListDefault: NavMenuItemProps[] = [
{
to: 'https://discord.gg/ptpnWWNkJx',
to: process.env.DISCORD_INVITE ?? '',
label: 'Discord'
},
{
Expand Down Expand Up @@ -57,7 +57,7 @@ export const DesktopHeader: React.FC = () => {
case 'loading':
nav = (
<>
<div className='rounded-btn bg-base-200 opacity-20 w-16 h-10' />
<div className='rounded-full bg-base-200 opacity-10 w-32 h-10' />
</>
)
break
Expand All @@ -66,11 +66,11 @@ export const DesktopHeader: React.FC = () => {
}

return (
<header className='hidden lg:flex items-center justify-between'>
<header className='hidden lg:flex items-center justify-between h-14'>
<div className='flex items-center gap-6'><Logo />
<XSearchMinimal />
</div>
<div className='menu menu-vertical lg:menu-horizontal rounded-box gap-2'>{nav}</div>
<div className='menu menu-horizontal rounded-box gap-2'>{nav}</div>
</header>
)
}
42 changes: 42 additions & 0 deletions src/app/components/PageFooter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Logo, LogoSize } from 'app/header'
/**
* Page footer
*/
export const PageFooter: React.FC = () => {
return (
<footer className='mt-16 footer p-10 bg-base-200 bg-base-content text-base-100'>
<aside>
<div className='border-2 border-accent py-3 pl-2 pr-4 rounded-full'><Logo size={LogoSize.md} className='fill-accent' /></div>
<p><span className='font-semibold text-lg'>OpenBeta</span><br /><span className='tracking-tight font-sm'>Free climbing database built & run by climbers.</span></p>
</aside>
<nav>
<header className='footer-title'>Get involved</header>
<a className='link link-hover' href='https://collective.openbeta.io/get-involved'>How to get involved</a>
<a className='link link-hover' href='https://docs.openbeta.io/how-to-contribute/overview'>Dev onboarding</a>
</nav>
<nav>
<header className='footer-title'>Social</header>
<a className='link link-hover' href={process.env.DISCORD_INVITE}>Discord chat</a>
<a className='link link-hover' href='https://www.instagram.com/openbetaproject/'>Instagram</a>
<a className='link link-hover' href='https://www.linkedin.com/company/openbetahq/'>LinkedIn</a>
<a className='link link-hover' href='https://twitter.com/openbetahq'>Twitter</a>
</nav>
<nav>
<header className='footer-title'>The Org</header>
<a className='link link-hover' href='https://collective.openbeta.io/about'>About us</a>
<a className='link link-hover' href='http://openbeta.io/blog/openbeta-vs-mountain-project-vs-thecrag'>OpenBeta vs others</a>
<a className='link link-hover' href='https://openbeta.substack.com/'>Our blog</a>
<a className='link link-hover' href='https://opencollective.com/openbeta'>Make a donation</a>
<a className='link link-hover' href='https://opencollective.com/openbeta/contribute/t-shirt-31745'>Buy a T-shirt</a>
</nav>
<nav>
<header className='footer-title'>Source code</header>
<a className='link link-hover' href='https://github.com/OpenBeta/'>OpenBeta on GitHub</a>
<a className='link link-hover' href='https://github.com/OpenBeta/open-tacos'>Climb catalog (this site!)</a>
<a className='link link-hover' href='https://github.com/OpenBeta/openbeta-graphql'>GraphQL API</a>
<a className='link link-hover' href='https://github.com/OpenBeta/sandbag'>Sandbag library</a>
<a className='link link-hover' href='https://github.com/OpenBeta/docs.openbeta.io'>Docs site</a>
</nav>
</footer>
)
}
2 changes: 1 addition & 1 deletion src/app/components/ProfileNavButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function ProfileNavButton ({ isMobile = true }: ProfileNavButtonP
<div className='block relative'>
<DropdownMenu>
<DropdownTrigger asChild>
<button className='btn btn-primary btn-sm gap-2'>
<button className='btn btn-primary btn-sm gap-2 no-animation'>
<UserCircleIcon className='w-6 h-6 rounded-full' />
Profile
</button>
Expand Down
3 changes: 0 additions & 3 deletions src/app/footer.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion src/app/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ body,
html {
height: 100%;
font-size: 16px;
@apply font-sans text-base text-base-content;
@apply font-sans text-base text-base-content bg-base-100;
}

h1 {
Expand Down
19 changes: 16 additions & 3 deletions src/app/header.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,34 @@
import Link from 'next/link'
import clx from 'classnames'

import OpenBetaLogo from '@/assets/brand/openbeta-logo'
import { DesktopHeader } from './components/DesktopHeader'
import { MobileHeader } from './components/MobileHeader'

/**
* Root page header
*/
export default async function Header (): Promise<any> {
return (
<div className='max-w-5xl mx-auto px-4 xl:px-0'>
<MobileHeader />
<DesktopHeader />
<MobileHeader />
</div>
)
}

export const Logo: React.FC = () => {
export enum LogoSize {
sm = 'w-8 h-8',
md = 'w-12 h-12',
lg = 'w-16 h-16'
}
/**
* Reusable logo component
*/
export const Logo: React.FC<{ size?: LogoSize, className?: string }> = ({ size = LogoSize.sm, className }) => {
return (
<Link href='/'>
<OpenBetaLogo />
<OpenBetaLogo className={clx(size, className)} />
</Link>
)
}
4 changes: 2 additions & 2 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '../../public/fonts/fonts.css'
import './global.css'
import Header from './header'
import Footer from './footer'
import { PageFooter } from './components/PageFooter'
import { NextAuthProvider } from './components/NextAuthProvider'

export const metadata = {
Expand All @@ -23,7 +23,7 @@ export default function RootLayout ({
{children}
</div>
</NextAuthProvider>
<Footer />
<PageFooter />
</body>
</html>
)
Expand Down
10 changes: 6 additions & 4 deletions src/assets/brand/openbeta-logo.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import * as React from 'react'
const SvgComponent: React.FC = (props): JSX.Element => (

interface Props {
className?: string
}
const SvgComponent: React.FC<Props> = (props): JSX.Element => (
<svg
xmlns='http://www.w3.org/2000/svg'
width={24}
height={24}
fill='none'
fill='current'
viewBox='0 0 48 42'
// className='p-1'
{...props}
>
<path
fill='#000000'
d='M46.678 9.542c-.01-.03-1.387-3.57-1.592-4.086-.712-1.793-2.804-2.43-3.32-2.661-.643-.295-1.243-.473-2.371-.72a47.202 47.202 0 0 0-6.14-.92s-5.651-.536-13.07.079a7.18 7.18 0 0 0-2.746.751c-2.232 1.152-2.994 3.268-3.28 4.061-.696 1.933-.474 4.069.205 6.585.086.341.027.697-.166 1.005a1.653 1.653 0 0 1-.886.672c-.38.127-.799.133-1.183.018a1.678 1.678 0 0 1-.913-.646c-.378-.575-.968-1.028-1.677-1.286a4.03 4.03 0 0 0-2.243-.14c-.746.166-1.406.54-1.878 1.061-.472.523-.73 1.164-.732 1.825-.002.66.25 1.303.718 1.828.468.525 1.125.902 1.87 1.073.743.171 1.532.126 2.243-.128.711-.254 1.305-.703 1.687-1.276a1.62 1.62 0 0 1 .628-.548c.263-.132.56-.203.864-.204h.362c.673 0 1.328.185 1.867.53.54.344.935.828 1.128 1.38.291.832.595 1.7.902 2.61.07.212.196.582.368 1.083a.956.956 0 0 1-.075.795c-.14.247-.383.44-.682.541-.298.101-.63.102-.93.002-.298-.099-.543-.291-.685-.538a3.225 3.225 0 0 0-1.307-1.219 3.936 3.936 0 0 0-1.863-.436 3.915 3.915 0 0 0-1.848.48c-.55.306-.99.74-1.267 1.25a1.016 1.016 0 0 1-.412.393 1.244 1.244 0 0 1-.593.142 1.273 1.273 0 0 1-.604-.153 1.037 1.037 0 0 1-.415-.405c-.341-.614-.917-1.11-1.63-1.407a4.019 4.019 0 0 0-2.299-.224c-.773.152-1.463.525-1.956 1.058C.263 22.3-.003 22.96 0 23.64c.003.68.277 1.34.776 1.87.498.529 1.192.896 1.967 1.042.775.146 1.584.061 2.296-.24.71-.302 1.28-.803 1.616-1.42.093-.16.237-.295.414-.39.178-.094.383-.144.592-.144.21 0 .414.05.592.144.178.095.321.23.414.39.277.511.717.944 1.268 1.25a3.915 3.915 0 0 0 1.848.48 3.94 3.94 0 0 0 1.862-.436 3.226 3.226 0 0 0 1.308-1.218c.106-.183.27-.336.472-.444a1.45 1.45 0 0 1 .672-.166h.773c.426 0 .842.116 1.186.332.345.216.6.52.73.869a178.2 178.2 0 0 0 1.86 4.772.6.6 0 0 1 .036.325.64.64 0 0 1-.14.304.783.783 0 0 1-.288.214.917.917 0 0 1-.817-.04.729.729 0 0 1-.297-.311c-.31-.64-.87-1.167-1.582-1.493a4.006 4.006 0 0 0-2.326-.294c-.792.136-1.505.503-2.016 1.039-.512.535-.792 1.206-.792 1.899 0 .692.28 1.364.792 1.9.511.535 1.224.902 2.016 1.037a4.007 4.007 0 0 0 2.326-.294c.713-.325 1.272-.853 1.582-1.492a.72.72 0 0 1 .296-.301.893.893 0 0 1 .44-.111h.367c.409 0 .807.107 1.143.306.336.2.593.482.736.81a112.5 112.5 0 0 0 1.624 3.534c.524 1.086 1.553 3.127 3.884 4.004 2.101.792 4.297.296 5.44-.052 3.03-1.208 4.745-2.512 7.932-4.308a13.551 13.551 0 0 0 2.855-2.014c.515-.479 1.643-1.574 1.943-3.307a5.066 5.066 0 0 0-.177-2.42l.047-.026c.3-.173.507-.44.578-.744.07-.304-.002-.62-.202-.877l-9.739-12.507a1.396 1.396 0 0 0-.867-.496 1.556 1.556 0 0 0-1.023.172l-4.718 2.704c-.3.173-.507.44-.578.744-.07.304.002.62.202.878L39.06 31.62c.136.173.322.312.541.402.219.09.461.13.703.113a2.309 2.309 0 0 1-.139.318c-.151.283-.36.54-.618.76-3.11 2.306-5.453 3.534-6.764 4.156-.62.292-1.57.805-2.396.434-1.229-.553-2.583-3.645-2.766-4.184-1.463-4.302-1.49-4.436-7.389-23.16-.16-.504-.796-2.25-.046-3.408.162-.238.359-.458.586-.653 1.492-1.254 13.935-.874 16.294-.37 1.288.275 2.614.664 3.375 1.672.412.542.609 1.197.766 1.722.211.704.325 1.428.337 2.155.072.688.076 1 .36 1.173.194.117.42.11 1.031.012.773-.13 1.72-.352 3.291-1.008.4-.168.515-.229.622-.357.28-.36.14-.82-.171-1.856ZM8.169 16.683c-.353 0-.699-.09-.993-.258a1.611 1.611 0 0 1-.658-.688 1.332 1.332 0 0 1-.102-.886c.07-.297.24-.57.49-.785.25-.214.568-.36.914-.42.347-.059.707-.028 1.033.088.327.116.606.312.802.565.197.252.301.548.301.851 0 .407-.189.796-.524 1.084a1.95 1.95 0 0 1-1.263.45Zm-4.68 8.485c-.353 0-.699-.09-.993-.26a1.612 1.612 0 0 1-.659-.688 1.333 1.333 0 0 1-.101-.886c.069-.298.239-.571.489-.786.25-.214.569-.36.916-.42.347-.059.706-.028 1.033.088.327.116.606.313.803.565.196.252.301.549.301.852 0 .407-.189.797-.524 1.085a1.95 1.95 0 0 1-1.264.45Zm8.34 0c-.353 0-.699-.09-.993-.258a1.612 1.612 0 0 1-.66-.689 1.332 1.332 0 0 1-.102-.886c.07-.298.24-.572.49-.786.25-.215.568-.361.915-.42.347-.06.707-.03 1.034.087.327.116.606.312.803.565.196.252.301.549.301.852 0 .202-.047.402-.137.588-.09.186-.222.355-.388.498a1.834 1.834 0 0 1-.582.332c-.217.077-.45.117-.685.117h.005Zm4.085 8.349c-.353 0-.7-.09-.994-.258a1.612 1.612 0 0 1-.659-.688 1.333 1.333 0 0 1-.102-.887c.069-.298.239-.571.489-.786.25-.215.569-.36.916-.42.347-.06.706-.029 1.033.087.327.116.607.313.803.565.197.253.302.55.302.853-.002.406-.192.796-.528 1.082-.336.287-.79.448-1.265.447l.005.005Zm24.466-4.788a1.28 1.28 0 0 1 .423-.68c.216-.185.49-.311.79-.363.3-.05.611-.025.894.076.282.1.524.27.694.488.17.218.26.474.26.737 0 .262-.09.518-.26.736-.17.218-.412.388-.695.488a1.784 1.784 0 0 1-1.453-.122 1.456 1.456 0 0 1-.43-.366 1.229 1.229 0 0 1-.231-.48 1.141 1.141 0 0 1 0-.519l.008.005Z'
/>
</svg>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MobileAppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const More = (): JSX.Element => {
<a className='btn btn-ghost no-animation btn-block' href='https://openbeta.io/blog'>Blog</a>
<hr />
<a className='btn btn-ghost no-animation btn-block' href='https://github.com/OpenBeta/open-tacos'>GitHub</a>
<a className='btn btn-outline no-animation btn-block' href='https://discord.gg/ptpnWWNkJx'>Discord community</a>
<a className='btn btn-outline no-animation btn-block' href={process.env.DISCORD_INVITE}>Discord community</a>
</div>
</Popover.Panel>
</Popover>
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ module.exports = {
'base-content': '#111827', // gray-900
'base-300': '#4B5563', // gray-600
'base-200': '#9ca3af', // gray-400
'base-100': '#ffffff', // white
'base-100': '#FAFAF9', // stone-50
'--rounded-box': '0.5rem',
'--rounded-btn': '0.5rem', // border radius rounded-btn utility class, used in buttons and similar element

Expand Down

0 comments on commit 99c5425

Please sign in to comment.