Reverting side navbar for now
This commit is contained in:
James Grugett
parent
925e623a64
commit
a90441d9d5
|
|
@ -85,7 +85,7 @@ export default function FeedCreate(props: {
|
|||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'w-full cursor-text rounded bg-white p-4 shadow-md',
|
||||
'mt-2 w-full cursor-text rounded bg-white p-4 shadow-md',
|
||||
isExpanded ? 'ring-2 ring-indigo-300' : '',
|
||||
className
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import clsx from 'clsx'
|
||||
import { Fold } from '../../../common/fold'
|
||||
import { useFollowedFoldIds } from '../../hooks/use-fold'
|
||||
import { useFollowedFolds } from '../../hooks/use-fold'
|
||||
import { useUser } from '../../hooks/use-user'
|
||||
import { followFold, unfollowFold } from '../../lib/firebase/folds'
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ export function FollowFoldButton(props: { fold: Fold; className?: string }) {
|
|||
|
||||
const user = useUser()
|
||||
|
||||
const followedFoldIds = useFollowedFoldIds(user)
|
||||
const followedFoldIds = useFollowedFolds(user)
|
||||
const following = followedFoldIds
|
||||
? followedFoldIds.includes(fold.id)
|
||||
: undefined
|
||||
|
|
|
|||
|
|
@ -7,24 +7,21 @@ import { ENV_CONFIG } from '../../../common/envs/constants'
|
|||
export function ManifoldLogo(props: {
|
||||
className?: string
|
||||
darkBackground?: boolean
|
||||
hideText?: boolean
|
||||
}) {
|
||||
const { darkBackground, className, hideText } = props
|
||||
const { darkBackground, className } = props
|
||||
|
||||
const user = useUser()
|
||||
|
||||
return (
|
||||
<Link href={user ? '/home' : '/'}>
|
||||
<a className={clsx('group flex flex-shrink-0 flex-row gap-4', className)}>
|
||||
<a className={clsx('flex flex-shrink-0 flex-row gap-4', className)}>
|
||||
<img
|
||||
className="transition-all group-hover:rotate-12"
|
||||
className="transition-all hover:rotate-12"
|
||||
src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
|
||||
width={45}
|
||||
height={45}
|
||||
/>
|
||||
|
||||
{!hideText &&
|
||||
(ENV_CONFIG.navbarLogoPath ? (
|
||||
{ENV_CONFIG.navbarLogoPath ? (
|
||||
<img src={ENV_CONFIG.navbarLogoPath} width={245} height={45} />
|
||||
) : (
|
||||
<>
|
||||
|
|
@ -47,7 +44,7 @@ export function ManifoldLogo(props: {
|
|||
Manifold Markets
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@ import clsx from 'clsx'
|
|||
import Link from 'next/link'
|
||||
|
||||
import { useUser } from '../../hooks/use-user'
|
||||
import { Row } from '../layout/row'
|
||||
import { firebaseLogin, User } from '../../lib/firebase/users'
|
||||
import { ManifoldLogo } from './manifold-logo'
|
||||
import { ProfileMenu } from './profile-menu'
|
||||
import {
|
||||
CollectionIcon,
|
||||
HomeIcon,
|
||||
|
|
@ -10,12 +13,50 @@ import {
|
|||
UserGroupIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
|
||||
// From https://codepen.io/chris__sev/pen/QWGvYbL
|
||||
export function BottomNavBar() {
|
||||
export function NavBar(props: {
|
||||
darkBackground?: boolean
|
||||
wide?: boolean
|
||||
assertUser?: 'signed-in' | 'signed-out'
|
||||
className?: string
|
||||
}) {
|
||||
const { darkBackground, wide, assertUser, className } = props
|
||||
|
||||
const user = useUser()
|
||||
if (!user) {
|
||||
return null
|
||||
}
|
||||
|
||||
const hoverClasses =
|
||||
'hover:underline hover:decoration-indigo-400 hover:decoration-2'
|
||||
const themeClasses = clsx(darkBackground && 'text-white', hoverClasses)
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className={clsx('mb-4 w-full p-4', className)} aria-label="Global">
|
||||
<Row
|
||||
className={clsx(
|
||||
'mx-auto items-center justify-between sm:px-4',
|
||||
wide ? 'max-w-6xl' : 'max-w-4xl'
|
||||
)}
|
||||
>
|
||||
<ManifoldLogo className="my-1" darkBackground={darkBackground} />
|
||||
|
||||
<Row className="ml-6 items-center gap-6 sm:gap-8">
|
||||
{(user || user === null || assertUser) && (
|
||||
<NavOptions
|
||||
user={user}
|
||||
assertUser={assertUser}
|
||||
themeClasses={themeClasses}
|
||||
/>
|
||||
)}
|
||||
</Row>
|
||||
</Row>
|
||||
</nav>
|
||||
{user && <BottomNavBar user={user} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// From https://codepen.io/chris__sev/pen/QWGvYbL
|
||||
function BottomNavBar(props: { user: User }) {
|
||||
const { user } = props
|
||||
return (
|
||||
<nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 md:hidden">
|
||||
<Link href="/home">
|
||||
|
|
@ -48,7 +89,6 @@ export function BottomNavBar() {
|
|||
</a>
|
||||
</Link>
|
||||
|
||||
{/* TODO: replace with a link to your own profile */}
|
||||
<Link href="/trades">
|
||||
<a
|
||||
href="#"
|
||||
|
|
@ -61,3 +101,65 @@ export function BottomNavBar() {
|
|||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
function NavOptions(props: {
|
||||
user: User | null | undefined
|
||||
assertUser: 'signed-in' | 'signed-out' | undefined
|
||||
themeClasses: string
|
||||
}) {
|
||||
const { user, assertUser, themeClasses } = props
|
||||
const showSignedIn = assertUser === 'signed-in' || !!user
|
||||
const showSignedOut =
|
||||
!showSignedIn && (assertUser === 'signed-out' || user === null)
|
||||
|
||||
return (
|
||||
<>
|
||||
{showSignedOut && (
|
||||
<Link href="/about">
|
||||
<a
|
||||
className={clsx(
|
||||
'hidden whitespace-nowrap text-base md:block',
|
||||
themeClasses
|
||||
)}
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Link href="/folds">
|
||||
<a
|
||||
className={clsx(
|
||||
'hidden whitespace-nowrap text-base md:block',
|
||||
themeClasses
|
||||
)}
|
||||
>
|
||||
Communities
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<Link href="/markets">
|
||||
<a
|
||||
className={clsx(
|
||||
'hidden whitespace-nowrap text-base md:block',
|
||||
themeClasses
|
||||
)}
|
||||
>
|
||||
Markets
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
{showSignedOut && (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-outline bg-gradient-to-r px-6 text-base font-medium normal-case"
|
||||
onClick={firebaseLogin}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{showSignedIn && <ProfileMenu user={user ?? undefined} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,106 @@
|
|||
import { firebaseLogout, User } from '../../lib/firebase/users'
|
||||
import { formatMoney } from '../../../common/util/format'
|
||||
import { Avatar } from '../avatar'
|
||||
import { Col } from '../layout/col'
|
||||
import { MenuButton } from './menu'
|
||||
import { IS_PRIVATE_MANIFOLD } from '../../../common/envs/constants'
|
||||
import { Row } from '../layout/row'
|
||||
|
||||
export function getNavigationOptions(user?: User | null) {
|
||||
if (IS_PRIVATE_MANIFOLD) {
|
||||
return [{ name: 'Leaderboards', href: '/leaderboards' }]
|
||||
}
|
||||
export function ProfileMenu(props: { user: User | undefined }) {
|
||||
const { user } = props
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<>
|
||||
<MenuButton
|
||||
className="hidden md:block"
|
||||
menuItems={getNavigationOptions(user, { mobile: false })}
|
||||
buttonContent={<ProfileSummary user={user} />}
|
||||
/>
|
||||
|
||||
<MenuButton
|
||||
className="mr-2 md:hidden"
|
||||
menuItems={getNavigationOptions(user, { mobile: true })}
|
||||
buttonContent={<ProfileSummary user={user} />}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function getNavigationOptions(
|
||||
user: User | undefined,
|
||||
options: { mobile: boolean }
|
||||
) {
|
||||
const { mobile } = options
|
||||
return [
|
||||
{ name: 'Leaderboards', href: '/leaderboards' },
|
||||
{ name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
|
||||
{
|
||||
name: 'Home',
|
||||
href: user ? '/home' : '/',
|
||||
},
|
||||
...(mobile
|
||||
? [
|
||||
{
|
||||
name: 'Markets',
|
||||
href: '/markets',
|
||||
},
|
||||
{
|
||||
name: 'Communities',
|
||||
href: '/folds',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
return [
|
||||
{ name: 'Your trades', href: '/trades' },
|
||||
{ name: 'Add funds', href: '/add-funds' },
|
||||
{ name: 'Leaderboards', href: '/leaderboards' },
|
||||
{ name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
|
||||
{ name: 'Sign out', href: '#', onClick: () => firebaseLogout() },
|
||||
: []),
|
||||
{
|
||||
name: `Your profile`,
|
||||
href: `/${user?.username}`,
|
||||
},
|
||||
{
|
||||
name: 'Your trades',
|
||||
href: '/trades',
|
||||
},
|
||||
// Disable irrelevant menu options for teams.
|
||||
...(IS_PRIVATE_MANIFOLD
|
||||
? [
|
||||
{
|
||||
name: 'Leaderboards',
|
||||
href: '/leaderboards',
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: 'Add funds',
|
||||
href: '/add-funds',
|
||||
},
|
||||
{
|
||||
name: 'Leaderboards',
|
||||
href: '/leaderboards',
|
||||
},
|
||||
{
|
||||
name: 'Discord',
|
||||
href: 'https://discord.gg/eHQBNBqXuh',
|
||||
},
|
||||
{
|
||||
name: 'About',
|
||||
href: '/about',
|
||||
},
|
||||
]),
|
||||
{
|
||||
name: 'Sign out',
|
||||
href: '#',
|
||||
onClick: () => firebaseLogout(),
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
export function ProfileSummary(props: { user: User | undefined }) {
|
||||
function ProfileSummary(props: { user: User | undefined }) {
|
||||
const { user } = props
|
||||
return (
|
||||
<Row className="group avatar items-center gap-4 py-6 text-gray-600 group-hover:text-gray-900">
|
||||
<Col className="avatar items-center gap-2 sm:flex-row sm:gap-4">
|
||||
<Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
|
||||
|
||||
<div className="truncate text-left sm:w-32">
|
||||
<div className="hidden sm:flex">{user?.name}</div>
|
||||
<div className="text-sm">
|
||||
<div className="text-sm text-gray-700">
|
||||
{user ? formatMoney(Math.floor(user.balance)) : ' '}
|
||||
</div>
|
||||
</div>
|
||||
</Row>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
import {
|
||||
HomeIcon,
|
||||
UserGroupIcon,
|
||||
SearchIcon,
|
||||
BookOpenIcon,
|
||||
DotsHorizontalIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import clsx from 'clsx'
|
||||
import _ from 'lodash'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useFollowedFolds } from '../../hooks/use-fold'
|
||||
import { useUser } from '../../hooks/use-user'
|
||||
import { firebaseLogin } from '../../lib/firebase/users'
|
||||
import { ManifoldLogo } from './manifold-logo'
|
||||
import { MenuButton } from './menu'
|
||||
import { getNavigationOptions, ProfileSummary } from './profile-menu'
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Home', href: '/home', icon: HomeIcon },
|
||||
{ name: 'Markets', href: '/markets', icon: SearchIcon },
|
||||
{ name: 'About', href: 'https://docs.manifold.markets', icon: BookOpenIcon },
|
||||
]
|
||||
|
||||
type Item = {
|
||||
name: string
|
||||
href: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
|
||||
function SidebarItem(props: { item: Item; currentPage: string }) {
|
||||
const { item, currentPage } = props
|
||||
return (
|
||||
<Link href={item.href} key={item.name}>
|
||||
<a
|
||||
className={clsx(
|
||||
item.href == currentPage
|
||||
? 'bg-gray-200 text-gray-900'
|
||||
: 'text-gray-600 hover:bg-gray-50',
|
||||
'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
|
||||
)}
|
||||
aria-current={item.href == currentPage ? 'page' : undefined}
|
||||
>
|
||||
<item.icon
|
||||
className={clsx(
|
||||
item.href == currentPage
|
||||
? 'text-gray-500'
|
||||
: 'text-gray-400 group-hover:text-gray-500',
|
||||
'-ml-1 mr-3 h-6 w-6 flex-shrink-0'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="truncate">{item.name}</span>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function MoreButton() {
|
||||
return (
|
||||
<a className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-50">
|
||||
<DotsHorizontalIcon
|
||||
className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="truncate">More</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Sidebar() {
|
||||
const router = useRouter()
|
||||
const currentPage = router.pathname
|
||||
|
||||
const user = useUser()
|
||||
let folds = useFollowedFolds(user) || []
|
||||
folds = _.sortBy(folds, 'followCount').reverse()
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label="Sidebar"
|
||||
className="sticky top-4 mt-4 divide-y divide-gray-300"
|
||||
>
|
||||
<div className="space-y-1 pb-6">
|
||||
<ManifoldLogo hideText />
|
||||
</div>
|
||||
|
||||
<div style={{ minHeight: 93 }}>
|
||||
{user ? (
|
||||
<Link href={`/${user.username}`}>
|
||||
<a className="group">
|
||||
<ProfileSummary user={user} />
|
||||
</a>
|
||||
</Link>
|
||||
) : user === null ? (
|
||||
<div className="py-6 text-center">
|
||||
<button
|
||||
className="btn border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
|
||||
onClick={firebaseLogin}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 py-6">
|
||||
{navigation.map((item) => (
|
||||
<SidebarItem item={item} currentPage={currentPage} />
|
||||
))}
|
||||
|
||||
<MenuButton
|
||||
menuItems={getNavigationOptions(user)}
|
||||
buttonContent={<MoreButton />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-6">
|
||||
<SidebarItem
|
||||
item={{ name: 'Communities', href: '/folds', icon: UserGroupIcon }}
|
||||
currentPage={currentPage}
|
||||
/>
|
||||
|
||||
<div className="mt-3 space-y-2">
|
||||
{folds.map((fold) => (
|
||||
<a
|
||||
key={fold.name}
|
||||
href={`/fold/${fold.slug}`}
|
||||
className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900"
|
||||
>
|
||||
<span className="truncate"> {fold.name}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,42 +1,27 @@
|
|||
import clsx from 'clsx'
|
||||
import { BottomNavBar } from './nav/nav-bar'
|
||||
import Sidebar from './nav/sidebar'
|
||||
import { NavBar } from './nav/nav-bar'
|
||||
|
||||
export function Page(props: {
|
||||
wide?: boolean
|
||||
margin?: boolean
|
||||
assertUser?: 'signed-in' | 'signed-out'
|
||||
rightSidebar?: React.ReactNode
|
||||
children?: any
|
||||
}) {
|
||||
const { wide, margin, assertUser, children, rightSidebar } = props
|
||||
const { wide, margin, assertUser, children } = props
|
||||
|
||||
return (
|
||||
<div>
|
||||
<NavBar wide={wide} assertUser={assertUser} />
|
||||
|
||||
<div
|
||||
className={clsx(
|
||||
'mx-auto w-full pb-16 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl',
|
||||
'mx-auto w-full pb-16',
|
||||
wide ? 'max-w-6xl' : 'max-w-4xl',
|
||||
margin && 'px-4'
|
||||
)}
|
||||
>
|
||||
<div className="hidden lg:col-span-3 lg:block xl:col-span-2">
|
||||
{assertUser !== 'signed-out' && <Sidebar />}
|
||||
</div>
|
||||
<main
|
||||
className={clsx(
|
||||
'mt-6 lg:col-span-9',
|
||||
rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
<aside className="hidden xl:col-span-3 xl:block">
|
||||
<div className="sticky top-4 space-y-4">{rightSidebar}</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<BottomNavBar />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export function ResolutionPanel(props: {
|
|||
|
||||
return (
|
||||
<Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
|
||||
<Title className="!mt-0 whitespace-nowrap" text="Resolve market" />
|
||||
<Title className="mt-0 whitespace-nowrap" text="Resolve market" />
|
||||
|
||||
<div className="mb-2 text-sm text-gray-500">Outcome</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { Comment, getRecentComments } from '../lib/firebase/comments'
|
|||
import { Contract, getActiveContracts } from '../lib/firebase/contracts'
|
||||
import { listAllFolds } from '../lib/firebase/folds'
|
||||
import { useInactiveContracts } from './use-contracts'
|
||||
import { useFollowedFoldIds } from './use-fold'
|
||||
import { useFollowedFolds } from './use-fold'
|
||||
import { useSeenContracts } from './use-seen-contracts'
|
||||
import { useUserBetContracts } from './use-user-bets'
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ export const useFilterYourContracts = (
|
|||
folds: Fold[],
|
||||
contracts: Contract[]
|
||||
) => {
|
||||
const followedFoldIds = useFollowedFoldIds(user)
|
||||
const followedFoldIds = useFollowedFolds(user)
|
||||
|
||||
const followedFolds = filterDefined(
|
||||
(followedFoldIds ?? []).map((id) => folds.find((fold) => fold.id === id))
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import _ from 'lodash'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Fold } from '../../common/fold'
|
||||
import { User } from '../../common/user'
|
||||
import {
|
||||
listAllFolds,
|
||||
listenForFold,
|
||||
listenForFolds,
|
||||
listenForFoldsWithTags,
|
||||
|
|
@ -51,8 +49,8 @@ export const useFollowingFold = (fold: Fold, user: User | null | undefined) => {
|
|||
return following
|
||||
}
|
||||
|
||||
// Note: We cache followedFoldIds in localstorage to speed up the initial load
|
||||
export const useFollowedFoldIds = (user: User | null | undefined) => {
|
||||
// Note: We cache FollowedFolds in localstorage to speed up the initial load
|
||||
export const useFollowedFolds = (user: User | null | undefined) => {
|
||||
const [followedFoldIds, setFollowedFoldIds] = useState<string[] | undefined>(
|
||||
undefined
|
||||
)
|
||||
|
|
@ -74,38 +72,3 @@ export const useFollowedFoldIds = (user: User | null | undefined) => {
|
|||
|
||||
return followedFoldIds
|
||||
}
|
||||
|
||||
// We also cache followedFolds directly in JSON.
|
||||
// TODO: Extract out localStorage caches to a utility
|
||||
export const useFollowedFolds = (user: User | null | undefined) => {
|
||||
const [followedFolds, setFollowedFolds] = useState<Fold[] | undefined>()
|
||||
const ids = useFollowedFoldIds(user)
|
||||
|
||||
useEffect(() => {
|
||||
if (user && ids) {
|
||||
const key = `followed-full-folds-${user.id}`
|
||||
const followedFoldJson = localStorage.getItem(key)
|
||||
if (followedFoldJson) {
|
||||
setFollowedFolds(JSON.parse(followedFoldJson))
|
||||
// Exit early if ids and followedFoldIds have all the same elements.
|
||||
if (
|
||||
_.isEqual(
|
||||
_.sortBy(ids),
|
||||
_.sortBy(JSON.parse(followedFoldJson).map((f: Fold) => f.id))
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// Otherwise, fetch the full contents of all folds
|
||||
listAllFolds().then((folds) => {
|
||||
const followedFolds = folds.filter((fold) => ids.includes(fold.id))
|
||||
setFollowedFolds(followedFolds)
|
||||
localStorage.setItem(key, JSON.stringify(followedFolds))
|
||||
})
|
||||
}
|
||||
}, [user, ids])
|
||||
|
||||
return followedFolds
|
||||
}
|
||||
|
|
|
|||
|
|
@ -121,17 +121,8 @@ export default function ContractPage(props: {
|
|||
|
||||
const ogCardProps = getOpenGraphProps(contract)
|
||||
|
||||
const rightSidebar = hasSidePanel ? (
|
||||
<Col className="gap-4">
|
||||
{allowTrade && (
|
||||
<BetPanel className="hidden lg:flex" contract={contract} />
|
||||
)}
|
||||
{allowResolve && <ResolutionPanel creator={user} contract={contract} />}
|
||||
</Col>
|
||||
) : null
|
||||
|
||||
return (
|
||||
<Page wide={hasSidePanel} rightSidebar={rightSidebar}>
|
||||
<Page wide={hasSidePanel}>
|
||||
{ogCardProps && (
|
||||
<SEO
|
||||
title={question}
|
||||
|
|
@ -177,6 +168,21 @@ export default function ContractPage(props: {
|
|||
)}
|
||||
<BetsSection contract={contract} user={user ?? null} bets={bets} />
|
||||
</div>
|
||||
|
||||
{hasSidePanel && (
|
||||
<>
|
||||
<div className="md:ml-6" />
|
||||
|
||||
<Col className="flex-shrink-0 md:w-[310px]">
|
||||
{allowTrade && (
|
||||
<BetPanel className="hidden lg:flex" contract={contract} />
|
||||
)}
|
||||
{allowResolve && (
|
||||
<ResolutionPanel creator={user} contract={contract} />
|
||||
)}
|
||||
</Col>
|
||||
</>
|
||||
)}
|
||||
</Col>
|
||||
</Page>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -159,28 +159,8 @@ export default function FoldPage(props: {
|
|||
return <Custom404 />
|
||||
}
|
||||
|
||||
const rightSidebar = (
|
||||
<Col className="mt-6 gap-12">
|
||||
<Row className="justify-end">
|
||||
{isCurator ? (
|
||||
<EditFoldButton className="ml-1" fold={fold} />
|
||||
) : (
|
||||
<FollowFoldButton className="ml-1" fold={fold} />
|
||||
)}
|
||||
</Row>
|
||||
<FoldOverview fold={fold} curator={curator} />
|
||||
<FoldLeaderboards
|
||||
traderScores={traderScores}
|
||||
creatorScores={creatorScores}
|
||||
topTraders={topTraders}
|
||||
topCreators={topCreators}
|
||||
user={user}
|
||||
/>
|
||||
</Col>
|
||||
)
|
||||
|
||||
return (
|
||||
<Page rightSidebar={rightSidebar}>
|
||||
<Page wide>
|
||||
<SEO
|
||||
title={fold.name}
|
||||
description={`Curated by ${curator.name}. ${fold.about}`}
|
||||
|
|
@ -190,6 +170,11 @@ export default function FoldPage(props: {
|
|||
<div className="px-3 lg:px-1">
|
||||
<Row className="mb-6 justify-between">
|
||||
<Title className="!m-0" text={fold.name} />
|
||||
{isCurator ? (
|
||||
<EditFoldButton className="ml-1" fold={fold} />
|
||||
) : (
|
||||
<FollowFoldButton className="ml-1" fold={fold} />
|
||||
)}
|
||||
</Row>
|
||||
|
||||
<Col className="mb-6 gap-2 text-gray-500 md:hidden">
|
||||
|
|
@ -274,6 +259,16 @@ export default function FoldPage(props: {
|
|||
<SearchableGrid contracts={contracts} />
|
||||
)}
|
||||
</Col>
|
||||
<Col className="hidden w-full max-w-xs gap-12 md:flex">
|
||||
<FoldOverview fold={fold} curator={curator} />
|
||||
<FoldLeaderboards
|
||||
traderScores={traderScores}
|
||||
creatorScores={creatorScores}
|
||||
topTraders={topTraders}
|
||||
topCreators={topCreators}
|
||||
user={user}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,11 @@ import { FollowFoldButton } from '../components/folds/follow-fold-button'
|
|||
import { Col } from '../components/layout/col'
|
||||
import { Row } from '../components/layout/row'
|
||||
import { Page } from '../components/page'
|
||||
import { SiteLink } from '../components/site-link'
|
||||
import { TagsList } from '../components/tags-list'
|
||||
import { Title } from '../components/title'
|
||||
import { UserLink } from '../components/user-page'
|
||||
import { useFolds, useFollowedFoldIds } from '../hooks/use-fold'
|
||||
import { useFolds, useFollowedFolds } from '../hooks/use-fold'
|
||||
import { useUser } from '../hooks/use-user'
|
||||
import { foldPath, listAllFolds } from '../lib/firebase/folds'
|
||||
import { getUser, User } from '../lib/firebase/users'
|
||||
|
|
@ -43,7 +44,7 @@ export default function Folds(props: {
|
|||
|
||||
let folds = useFolds() ?? props.folds
|
||||
const user = useUser()
|
||||
const followedFoldIds = useFollowedFoldIds(user) || []
|
||||
const followedFoldIds = useFollowedFolds(user) || []
|
||||
// First sort by follower count, then list followed folds first
|
||||
folds = _.sortBy(folds, (fold) => -1 * fold.followCount)
|
||||
folds = _.sortBy(folds, (fold) => !followedFoldIds.includes(fold.id))
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
import { firebaseLogin } from '../lib/firebase/users'
|
||||
import { ContractsGrid } from '../components/contracts-list'
|
||||
import { Col } from '../components/layout/col'
|
||||
import { NavBar } from '../components/nav/nav-bar'
|
||||
import Link from 'next/link'
|
||||
import { Contract } from '../lib/firebase/contracts'
|
||||
|
||||
|
|
@ -33,6 +34,7 @@ const scrollToAbout = () => {
|
|||
function Hero() {
|
||||
return (
|
||||
<div className="bg-world-trading h-screen overflow-hidden bg-gray-900 bg-cover bg-center lg:bg-left">
|
||||
<NavBar darkBackground />
|
||||
<main>
|
||||
<div className="pt-32 sm:pt-8 lg:overflow-hidden lg:pt-0 lg:pb-14">
|
||||
<div className="mx-auto max-w-7xl lg:px-8 xl:px-0">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { DatumValue } from '@nivo/core'
|
|||
import { ResponsiveLine } from '@nivo/line'
|
||||
|
||||
import { Entry, makeEntries } from '../lib/simulator/entries'
|
||||
import { NavBar } from '../components/nav/nav-bar'
|
||||
import { Col } from '../components/layout/col'
|
||||
|
||||
function TableBody(props: { entries: Entry[] }) {
|
||||
|
|
@ -253,6 +254,7 @@ export default function Simulator() {
|
|||
|
||||
return (
|
||||
<Col>
|
||||
<NavBar />
|
||||
<div className="mx-auto mt-8 grid w-full grid-cols-1 gap-4 p-2 text-center xl:grid-cols-2">
|
||||
{/* Left column */}
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user