Move tabs to sidebar
This commit is contained in:
Pico2x
parent
483838c1b2
commit
e8ae9a7394
94
web/components/nav/group-nav-bar.tsx
Normal file
94
web/components/nav/group-nav-bar.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { BookOpenIcon, HomeIcon } from '@heroicons/react/outline'
|
||||
import { Item } from './sidebar'
|
||||
|
||||
import clsx from 'clsx'
|
||||
import { trackCallback } from 'web/lib/service/analytics'
|
||||
import TrophyIcon from 'web/lib/icons/trophy-icon'
|
||||
import { useUser } from 'web/hooks/use-user'
|
||||
import NotificationsIcon from '../notifications-icon'
|
||||
import router from 'next/router'
|
||||
import { userProfileItem } from './nav-bar'
|
||||
|
||||
const mobileGroupNavigation = [
|
||||
{ name: 'About', key: 'about', icon: BookOpenIcon },
|
||||
{ name: 'Markets', key: 'markets', icon: HomeIcon },
|
||||
{ name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
|
||||
]
|
||||
|
||||
const mobileGeneralNavigation = [
|
||||
{
|
||||
name: 'Notifications',
|
||||
key: 'notifications',
|
||||
icon: NotificationsIcon,
|
||||
href: '/notifications',
|
||||
},
|
||||
]
|
||||
|
||||
export function GroupNavBar(props: {
|
||||
currentPage: string
|
||||
onClick: (key: string) => void
|
||||
}) {
|
||||
const { currentPage } = props
|
||||
const user = useUser()
|
||||
|
||||
return (
|
||||
<nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
|
||||
{mobileGroupNavigation.map((item) => (
|
||||
<NavBarItem
|
||||
key={item.name}
|
||||
item={item}
|
||||
currentPage={currentPage}
|
||||
onClick={props.onClick}
|
||||
/>
|
||||
))}
|
||||
|
||||
{mobileGeneralNavigation.map((item) => (
|
||||
<NavBarItem
|
||||
key={item.name}
|
||||
item={item}
|
||||
currentPage={currentPage}
|
||||
onClick={() => {
|
||||
router.push(item.href)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{user && (
|
||||
<NavBarItem
|
||||
key={'profile'}
|
||||
currentPage={currentPage}
|
||||
onClick={() => {
|
||||
router.push(`/${user.username}?tab=trades`)
|
||||
}}
|
||||
item={userProfileItem(user)}
|
||||
/>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
function NavBarItem(props: {
|
||||
item: Item
|
||||
currentPage: string
|
||||
onClick: (key: string) => void
|
||||
}) {
|
||||
const { item, currentPage } = props
|
||||
const track = trackCallback(
|
||||
`group navbar: ${item.trackingEventName ?? item.name}`
|
||||
)
|
||||
|
||||
return (
|
||||
<button onClick={() => props.onClick(item.key ?? '#')}>
|
||||
<a
|
||||
className={clsx(
|
||||
'block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700',
|
||||
currentPage === item.key && 'bg-gray-200 text-indigo-700'
|
||||
)}
|
||||
onClick={track}
|
||||
>
|
||||
{item.icon && <item.icon className="my-1 mx-auto h-6 w-6" />}
|
||||
{item.name}
|
||||
</a>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
87
web/components/nav/group-sidebar.tsx
Normal file
87
web/components/nav/group-sidebar.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import { HomeIcon, BookOpenIcon } from '@heroicons/react/outline'
|
||||
import clsx from 'clsx'
|
||||
import { useUser } from 'web/hooks/use-user'
|
||||
import { ManifoldLogo } from './manifold-logo'
|
||||
import { ProfileSummary } from './profile-menu'
|
||||
import React from 'react'
|
||||
import TrophyIcon from 'web/lib/icons/trophy-icon'
|
||||
import { SignInButton } from '../sign-in-button'
|
||||
import CornerDownRightIcon from 'web/lib/icons/corner-down-right-icon'
|
||||
import NotificationsIcon from '../notifications-icon'
|
||||
import { SidebarItem } from './sidebar'
|
||||
import { buildArray } from 'common/util/array'
|
||||
import { User } from 'common/user'
|
||||
|
||||
const groupNavigation = [
|
||||
{ name: 'About', key: 'about', icon: BookOpenIcon },
|
||||
{ name: 'Markets', key: 'markets', icon: HomeIcon },
|
||||
{ name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
|
||||
]
|
||||
|
||||
const generalNavigation = (user?: User | null) =>
|
||||
buildArray(
|
||||
user && {
|
||||
name: 'Notifications',
|
||||
href: `/notifications`,
|
||||
key: 'notifications',
|
||||
icon: NotificationsIcon,
|
||||
}
|
||||
)
|
||||
|
||||
export default function GroupSidebar(props: {
|
||||
groupName: string
|
||||
className?: string
|
||||
onClick: (key: string) => void
|
||||
joinOrAddQuestionsButton: React.ReactNode
|
||||
currentKey: string
|
||||
}) {
|
||||
const { className, groupName, currentKey } = props
|
||||
|
||||
const user = useUser()
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label="Group Sidebar"
|
||||
className={clsx('flex max-h-[100vh] flex-col', className)}
|
||||
>
|
||||
<ManifoldLogo className="pt-6" twoLine />
|
||||
|
||||
<div className=" min-h-0 shrink flex-col items-stretch gap-1 pt-6 lg:flex ">
|
||||
{user ? (
|
||||
<ProfileSummary user={user} />
|
||||
) : (
|
||||
<SignInButton className="mb-4" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={' text-2xl text-indigo-700 sm:mb-1 sm:mt-3'}>
|
||||
{groupName}
|
||||
</div>
|
||||
|
||||
{/* Desktop navigation */}
|
||||
<div className="relative hidden min-h-0 shrink flex-col items-stretch gap-1 pl-6 pb-0 lg:flex">
|
||||
{/* adds a purple CornerDownRightIcon pointing to the sidebaritems */}
|
||||
<CornerDownRightIcon className="absolute left-0 top-0 mt-2 h-6 w-6 text-indigo-700" />
|
||||
|
||||
{groupNavigation.map((item) => (
|
||||
<SidebarItem
|
||||
key={item.key}
|
||||
item={item}
|
||||
currentPage={currentKey}
|
||||
onClick={props.onClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{generalNavigation(user).map((item) => (
|
||||
<SidebarItem
|
||||
key={item.key}
|
||||
item={item}
|
||||
currentPage={currentKey}
|
||||
onClick={props.onClick}
|
||||
/>
|
||||
))}
|
||||
|
||||
{props.joinOrAddQuestionsButton}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
@ -17,6 +17,7 @@ import { useRouter } from 'next/router'
|
|||
import NotificationsIcon from 'web/components/notifications-icon'
|
||||
import { useIsIframe } from 'web/hooks/use-is-iframe'
|
||||
import { trackCallback } from 'web/lib/service/analytics'
|
||||
import { User } from 'common/user'
|
||||
|
||||
function getNavigation() {
|
||||
return [
|
||||
|
|
@ -34,6 +35,21 @@ const signedOutNavigation = [
|
|||
{ name: 'Explore', href: '/home', icon: SearchIcon },
|
||||
]
|
||||
|
||||
export const userProfileItem = (user: User) => ({
|
||||
name: formatMoney(user.balance),
|
||||
trackingEventName: 'profile',
|
||||
href: `/${user.username}?tab=trades`,
|
||||
icon: () => (
|
||||
<Avatar
|
||||
className="mx-auto my-1"
|
||||
size="xs"
|
||||
username={user.username}
|
||||
avatarUrl={user.avatarUrl}
|
||||
noLink
|
||||
/>
|
||||
),
|
||||
})
|
||||
|
||||
// From https://codepen.io/chris__sev/pen/QWGvYbL
|
||||
export function BottomNavBar() {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||
|
|
@ -61,20 +77,7 @@ export function BottomNavBar() {
|
|||
<NavBarItem
|
||||
key={'profile'}
|
||||
currentPage={currentPage}
|
||||
item={{
|
||||
name: formatMoney(user.balance),
|
||||
trackingEventName: 'profile',
|
||||
href: `/${user.username}?tab=trades`,
|
||||
icon: () => (
|
||||
<Avatar
|
||||
className="mx-auto my-1"
|
||||
size="xs"
|
||||
username={user.username}
|
||||
avatarUrl={user.avatarUrl}
|
||||
noLink
|
||||
/>
|
||||
),
|
||||
}}
|
||||
item={userProfileItem(user)}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
|
|
@ -98,7 +101,7 @@ function NavBarItem(props: { item: Item; currentPage: string }) {
|
|||
const track = trackCallback(`navbar: ${item.trackingEventName ?? item.name}`)
|
||||
|
||||
return (
|
||||
<Link href={item.href}>
|
||||
<Link href={item.href ?? '#'}>
|
||||
<a
|
||||
className={clsx(
|
||||
'block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700',
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import Router, { useRouter } from 'next/router'
|
|||
import { useUser } from 'web/hooks/use-user'
|
||||
import { firebaseLogout, User } from 'web/lib/firebase/users'
|
||||
import { ManifoldLogo } from './manifold-logo'
|
||||
import { MenuButton } from './menu'
|
||||
import { MenuButton, MenuItem } from './menu'
|
||||
import { ProfileSummary } from './profile-menu'
|
||||
import NotificationsIcon from 'web/components/notifications-icon'
|
||||
import React from 'react'
|
||||
|
|
@ -139,7 +139,7 @@ function getMoreMobileNav() {
|
|||
}
|
||||
if (IS_PRIVATE_MANIFOLD) return [signOut]
|
||||
|
||||
return buildArray<Item>(
|
||||
return buildArray<MenuItem>(
|
||||
CHALLENGES_ENABLED && { name: 'Challenges', href: '/challenges' },
|
||||
[
|
||||
{ name: 'Groups', href: '/groups' },
|
||||
|
|
@ -156,39 +156,59 @@ function getMoreMobileNav() {
|
|||
export type Item = {
|
||||
name: string
|
||||
trackingEventName?: string
|
||||
href: string
|
||||
href?: string
|
||||
key?: 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
|
||||
onClick={trackCallback('sidebar: ' + item.name)}
|
||||
className={clsx(
|
||||
item.href == currentPage
|
||||
? 'bg-gray-200 text-gray-900'
|
||||
: 'text-gray-600 hover:bg-gray-100',
|
||||
'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
|
||||
)}
|
||||
aria-current={item.href == currentPage ? 'page' : undefined}
|
||||
>
|
||||
{item.icon && (
|
||||
<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>
|
||||
export function SidebarItem(props: {
|
||||
item: Item
|
||||
currentPage: string
|
||||
onClick?: (key: string) => void
|
||||
}) {
|
||||
const { item, currentPage, onClick } = props
|
||||
const isCurrentPage =
|
||||
item.href != null ? item.href === currentPage : item.key === currentPage
|
||||
|
||||
const sidebarItem = (
|
||||
<a
|
||||
onClick={trackCallback('sidebar: ' + item.name)}
|
||||
className={clsx(
|
||||
isCurrentPage
|
||||
? 'bg-gray-200 text-gray-900'
|
||||
: 'text-gray-600 hover:bg-gray-100',
|
||||
'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
|
||||
)}
|
||||
aria-current={item.href == currentPage ? 'page' : undefined}
|
||||
>
|
||||
{item.icon && (
|
||||
<item.icon
|
||||
className={clsx(
|
||||
isCurrentPage
|
||||
? '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>
|
||||
)
|
||||
|
||||
if (item.href) {
|
||||
return (
|
||||
<Link href={item.href} key={item.name}>
|
||||
{sidebarItem}
|
||||
</Link>
|
||||
)
|
||||
} else {
|
||||
return onClick ? (
|
||||
<button onClick={() => onClick(item.key ?? '#')}>{sidebarItem}</button>
|
||||
) : (
|
||||
<> </>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function SidebarButton(props: {
|
||||
|
|
|
|||
19
web/lib/icons/corner-down-right-icon.tsx
Normal file
19
web/lib/icons/corner-down-right-icon.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export default function CornerDownRightIcon(props: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
className={props.className}
|
||||
>
|
||||
<polyline points="15 10 20 15 15 20"></polyline>
|
||||
<path d="M4 4v7a4 4 0 0 0 4 4h12"></path>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
import React, { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { toast } from 'react-hot-toast'
|
||||
import { toast, Toaster } from 'react-hot-toast'
|
||||
|
||||
import { Group, GROUP_CHAT_SLUG } from 'common/group'
|
||||
import { Page } from 'web/components/page'
|
||||
import { Contract, listContractsByGroupSlug } from 'web/lib/firebase/contracts'
|
||||
import {
|
||||
addContractToGroup,
|
||||
|
|
@ -30,7 +29,6 @@ import Custom404 from '../../404'
|
|||
import { SEO } from 'web/components/SEO'
|
||||
import { Linkify } from 'web/components/linkify'
|
||||
import { fromPropz, usePropz } from 'web/hooks/use-propz'
|
||||
import { Tabs } from 'web/components/layout/tabs'
|
||||
import { LoadingIndicator } from 'web/components/loading-indicator'
|
||||
import { Modal } from 'web/components/layout/modal'
|
||||
import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
|
||||
|
|
@ -51,6 +49,9 @@ import { Spacer } from 'web/components/layout/spacer'
|
|||
import { usePost } from 'web/hooks/use-post'
|
||||
import { useAdmin } from 'web/hooks/use-admin'
|
||||
import { track } from '@amplitude/analytics-browser'
|
||||
import GroupSidebar from 'web/components/nav/group-sidebar'
|
||||
import { GroupNavBar } from 'web/components/nav/group-nav-bar'
|
||||
import { ArrowLeftIcon } from '@heroicons/react/solid'
|
||||
|
||||
export const getStaticProps = fromPropz(getStaticPropz)
|
||||
export async function getStaticPropz(props: { params: { slugs: string[] } }) {
|
||||
|
|
@ -144,6 +145,7 @@ export default function GroupPage(props: {
|
|||
const user = useUser()
|
||||
const isAdmin = useAdmin()
|
||||
const memberIds = useMemberIds(group?.id ?? null) ?? props.memberIds
|
||||
const [sidebarIndex, setSidebarIndex] = useState(0)
|
||||
|
||||
useSaveReferral(user, {
|
||||
defaultReferrerUsername: creator.username,
|
||||
|
|
@ -157,7 +159,7 @@ export default function GroupPage(props: {
|
|||
const isMember = user && memberIds.includes(user.id)
|
||||
const maxLeaderboardSize = 50
|
||||
|
||||
const leaderboard = (
|
||||
const leaderboardPage = (
|
||||
<Col>
|
||||
<div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
|
||||
<GroupLeaderboard
|
||||
|
|
@ -176,7 +178,7 @@ export default function GroupPage(props: {
|
|||
</Col>
|
||||
)
|
||||
|
||||
const aboutTab = (
|
||||
const aboutPage = (
|
||||
<Col>
|
||||
{(group.aboutPostId != null || isCreator || isAdmin) && (
|
||||
<GroupAboutPost
|
||||
|
|
@ -196,74 +198,106 @@ export default function GroupPage(props: {
|
|||
</Col>
|
||||
)
|
||||
|
||||
const questionsTab = (
|
||||
<ContractSearch
|
||||
user={user}
|
||||
defaultSort={'newest'}
|
||||
defaultFilter={suggestedFilter}
|
||||
additionalFilter={{ groupSlug: group.slug }}
|
||||
persistPrefix={`group-${group.slug}`}
|
||||
/>
|
||||
const questionsPage = (
|
||||
<>
|
||||
{/* align the divs to the right */}
|
||||
<div className={' flex justify-end px-2 pb-2 sm:hidden'}>
|
||||
<div>
|
||||
<JoinGroupButton group={group} user={user} />
|
||||
</div>
|
||||
</div>
|
||||
<ContractSearch
|
||||
user={user}
|
||||
defaultSort={'newest'}
|
||||
defaultFilter={suggestedFilter}
|
||||
additionalFilter={{ groupSlug: group.slug }}
|
||||
persistPrefix={`group-${group.slug}`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
const tabs = [
|
||||
const sidebarPages = [
|
||||
{
|
||||
badge: `${contractsCount}`,
|
||||
title: 'Markets',
|
||||
content: questionsTab,
|
||||
content: questionsPage,
|
||||
href: groupPath(group.slug, 'markets'),
|
||||
key: 'markets',
|
||||
},
|
||||
{
|
||||
title: 'Leaderboards',
|
||||
content: leaderboard,
|
||||
content: leaderboardPage,
|
||||
href: groupPath(group.slug, 'leaderboards'),
|
||||
key: 'leaderboards',
|
||||
},
|
||||
{
|
||||
title: 'About',
|
||||
content: aboutTab,
|
||||
content: aboutPage,
|
||||
href: groupPath(group.slug, 'about'),
|
||||
key: 'about',
|
||||
},
|
||||
]
|
||||
|
||||
const tabIndex = tabs
|
||||
.map((t) => t.title.toLowerCase())
|
||||
.indexOf(page ?? 'markets')
|
||||
const pageContent = sidebarPages[sidebarIndex].content
|
||||
const onSidebarClick = (key: string) => {
|
||||
const index = sidebarPages.findIndex((t) => t.key === key)
|
||||
setSidebarIndex(index)
|
||||
}
|
||||
|
||||
const joinOrAddQuestionsButton = (
|
||||
<JoinOrAddQuestionsButtons
|
||||
group={group}
|
||||
user={user}
|
||||
isMember={!!isMember}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<SEO
|
||||
title={group.name}
|
||||
description={`Created by ${creator.name}. ${group.about}`}
|
||||
url={groupPath(group.slug)}
|
||||
/>
|
||||
<Col className="relative px-3">
|
||||
<Row className={'items-center justify-between gap-4'}>
|
||||
<div className={'sm:mb-1'}>
|
||||
<div
|
||||
className={'line-clamp-1 my-2 text-2xl text-indigo-700 sm:my-3'}
|
||||
>
|
||||
<>
|
||||
<header className="sticky top-0 z-50 w-full pb-2 md:hidden lg:col-span-12">
|
||||
<div className="flex items-center border-b border-gray-200 bg-white px-4">
|
||||
<div className="flex-shrink-0">
|
||||
<Link href="/">
|
||||
<a className="text-indigo-700 hover:text-gray-500 ">
|
||||
<ArrowLeftIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h1 className="text-lg font-medium text-indigo-700">
|
||||
{group.name}
|
||||
</div>
|
||||
<div className={'hidden sm:block'}>
|
||||
<Linkify text={group.about} />
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<JoinOrAddQuestionsButtons
|
||||
group={group}
|
||||
user={user}
|
||||
isMember={!!isMember}
|
||||
/>
|
||||
</div>
|
||||
</Row>
|
||||
</Col>
|
||||
<Tabs
|
||||
currentPageForAnalytics={groupPath(group.slug)}
|
||||
className={'mx-2 mb-0 sm:mb-2'}
|
||||
defaultIndex={tabIndex > 0 ? tabIndex : 0}
|
||||
tabs={tabs}
|
||||
/>
|
||||
</Page>
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
<div
|
||||
className={
|
||||
'mx-auto w-full pb-[58px] lg:grid lg:grid-cols-12 lg:gap-x-2 lg:pb-0 xl:max-w-7xl xl:gap-x-8'
|
||||
}
|
||||
>
|
||||
<Toaster />
|
||||
<GroupSidebar
|
||||
groupName={group.name}
|
||||
className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:flex"
|
||||
onClick={onSidebarClick}
|
||||
joinOrAddQuestionsButton={joinOrAddQuestionsButton}
|
||||
currentKey={sidebarPages[sidebarIndex].key}
|
||||
/>
|
||||
|
||||
<SEO
|
||||
title={group.name}
|
||||
description={`Created by ${creator.name}. ${group.about}`}
|
||||
url={groupPath(group.slug)}
|
||||
/>
|
||||
<main className={'px-2 pt-1 xl:col-span-8'}>{pageContent}</main>
|
||||
</div>
|
||||
<GroupNavBar
|
||||
currentPage={sidebarPages[sidebarIndex].key}
|
||||
onClick={onSidebarClick}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -271,10 +305,11 @@ function JoinOrAddQuestionsButtons(props: {
|
|||
group: Group
|
||||
user: User | null | undefined
|
||||
isMember: boolean
|
||||
className?: string
|
||||
}) {
|
||||
const { group, user, isMember } = props
|
||||
return user && isMember ? (
|
||||
<Row className={'mt-0 justify-end'}>
|
||||
<Row className={'w-full self-start pt-4'}>
|
||||
<AddContractButton group={group} user={user} />
|
||||
</Row>
|
||||
) : group.anyoneCanJoin ? (
|
||||
|
|
@ -433,9 +468,9 @@ function AddContractButton(props: { group: Group; user: User }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className={'flex justify-center'}>
|
||||
<div className={'flex w-full justify-center'}>
|
||||
<Button
|
||||
className="whitespace-nowrap"
|
||||
className="w-full whitespace-nowrap"
|
||||
size="md"
|
||||
color="indigo"
|
||||
onClick={() => setOpen(true)}
|
||||
|
|
@ -534,7 +569,9 @@ function JoinGroupButton(props: {
|
|||
<div>
|
||||
<button
|
||||
onClick={follow}
|
||||
className={'btn-md btn-outline btn whitespace-nowrap normal-case'}
|
||||
className={
|
||||
'btn-md btn-outline btn w-full whitespace-nowrap normal-case'
|
||||
}
|
||||
>
|
||||
Follow
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user