open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a promo section for logged-out users

Browse Source
This commit is contained in:
Austin Chen 2022-01-20 13:09:45 -05:00
parent dd25c35724
commit 0323afa25d
3 changed files with 80 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
web/components/feed-create.tsx
View File

@ -1,11 +1,43 @@
import { useUser } from '../hooks/use-user'
import { AvatarWithIcon } from './contract-feed'
import { Col } from './layout/col'
import { Title } from './title'
import Textarea from 'react-expanding-textarea'
import { useState } from 'react'
import { Spacer } from './layout/spacer'
import { NewContract } from '../pages/create'
import { firebaseLogin } from '../lib/firebase/users'
import { useHotContracts } from '../hooks/use-contracts'
import { ContractsGrid } from './contracts-list'
export function FeedPromo() {
// TODO: Encode in statc props
const hotContracts = useHotContracts()
return (
<div className="w-full">
<Title text="Bet on the future and win" className="!mb-2 text-black" />
<div className="text-gray-500 mb-4">
<button
className="bg-gradient-to-r gradient-to-r from-teal-500 to-green-500 text-transparent bg-clip-text hover:underline hover:decoration-gray-300 hover:decoration-2"
onClick={firebaseLogin}
>
Sign up for free
</button>{' '}
and trade in any prediction market. Our hottest markets today:
</div>
<ContractsGrid
contracts={hotContracts?.slice(0, 2) || []}
showHotVolume
/>
<Spacer h={4} />
<div className="text-gray-800 text-lg mb-0 mt-2">
Recent community activity
</div>
</div>
)
}
export default function FeedCreate() {
const user = useUser()
@ -13,7 +45,7 @@ export default function FeedCreate() {
if (!user) {
// TODO: Improve logged-out experience
return <Title text="Sign in to start trading!" />
return <FeedPromo />
}
const placeholders = [
@ -30,41 +62,39 @@ export default function FeedCreate() {
const placeholder = placeholders[daysSinceEpoch % placeholders.length]
return (
<Col className="items-center">
<div className="w-full max-w-3xl bg-indigo-50 rounded-md p-4">
<div className="relative flex items-start space-x-3">
<AvatarWithIcon
username={user.username}
avatarUrl={user.avatarUrl || ''}
<div className="w-full bg-indigo-50 rounded-md p-4">
<div className="relative flex items-start space-x-3">
<AvatarWithIcon
username={user.username}
avatarUrl={user.avatarUrl || ''}
/>
<div className="min-w-0 flex-1">
{/* TODO: Show focus, for accessibility */}
<div>
<p className="my-0.5 text-sm">Ask a question... </p>
</div>
<Textarea
className="text-lg sm:text-xl text-indigo-700 w-full border-transparent focus:border-transparent bg-transparent p-0 appearance-none resize-none focus:ring-transparent"
placeholder={`e.g. ${placeholder}`}
value={question}
onClick={(e) => e.stopPropagation()}
onChange={(e) => setQuestion(e.target.value || '')}
/>
<div className="min-w-0 flex-1">
{/* TODO: Show focus, for accessibility */}
<div>
<p className="my-0.5 text-sm">Ask a question... </p>
</div>
<Textarea
className="text-lg sm:text-xl text-indigo-700 w-full border-transparent focus:border-transparent bg-transparent p-0 appearance-none resize-none focus:ring-transparent"
placeholder={`e.g. ${placeholder}`}
value={question}
onClick={(e) => e.stopPropagation()}
onChange={(e) => setQuestion(e.target.value || '')}
/>
<Spacer h={4} />
</div>
<Spacer h={4} />
</div>
{/* Hide component instead of deleting, so edits to NewContract don't get lost */}
<div className={question ? '' : 'hidden'}>
<NewContract question={question} />
</div>
{/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
{!question && (
<div className="flex justify-end">
<button className="btn" disabled>
Create Market
</button>
</div>
)}
</div>
</Col>
{/* Hide component instead of deleting, so edits to NewContract don't get lost */}
<div className={question ? '' : 'hidden'}>
<NewContract question={question} />
</div>
{/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
{!question && (
<div className="flex justify-end">
<button className="btn" disabled>
Create Market
</button>
</div>
)}
</div>
)
}

9
web/components/nav-bar.tsx
View File

@ -70,15 +70,12 @@ function NavOptions(props: { user: User | null; themeClasses: string }) {
{user === null ? (
<>
<div
className={clsx(
'text-base font-medium cursor-pointer whitespace-nowrap',
themeClasses
)}
<button
className="btn border-none normal-case text-base font-medium px-6 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
onClick={firebaseLogin}
>
Sign in
</div>
</button>
</>
) : (
<>

19
web/pages/index.tsx
View File

@ -11,6 +11,7 @@ import {
import { Bet, listAllBets } from '../lib/firebase/bets'
import FeedCreate from '../components/feed-create'
import { Spacer } from '../components/layout/spacer'
import { Col } from '../components/layout/col'
export async function getStaticProps() {
const [contracts, recentComments] = await Promise.all([
@ -46,13 +47,17 @@ const Home = (props: {
return (
<Page>
<FeedCreate />
<Spacer h={5} />
<ActivityFeed
contracts={activeContracts}
contractBets={activeContractBets}
contractComments={activeContractComments}
/>
<Col className="items-center">
<Col className="max-w-3xl">
<FeedCreate />
<Spacer h={4} />
<ActivityFeed
contracts={activeContracts}
contractBets={activeContractBets}
contractComments={activeContractComments}
/>
</Col>
</Col>
</Page>
)
}