un-daisy selects
This commit is contained in:
parent
cc76798818
commit
5fe981f0d7
|
@ -52,6 +52,7 @@ import {
|
||||||
} from 'web/hooks/use-persistent-state'
|
} from 'web/hooks/use-persistent-state'
|
||||||
import { safeLocalStorage } from 'web/lib/util/local'
|
import { safeLocalStorage } from 'web/lib/util/local'
|
||||||
import { ExclamationIcon } from '@heroicons/react/outline'
|
import { ExclamationIcon } from '@heroicons/react/outline'
|
||||||
|
import { Select } from './select'
|
||||||
|
|
||||||
type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
|
type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
|
||||||
type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
|
type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
|
||||||
|
@ -200,8 +201,7 @@ export function BetsList(props: { user: User }) {
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Row className="gap-2">
|
<Row className="gap-2">
|
||||||
<select
|
<Select
|
||||||
className="border-greyscale-4 self-start overflow-hidden rounded border px-2 py-2 text-sm"
|
|
||||||
value={filter}
|
value={filter}
|
||||||
onChange={(e) => setFilter(e.target.value as BetFilter)}
|
onChange={(e) => setFilter(e.target.value as BetFilter)}
|
||||||
>
|
>
|
||||||
|
@ -211,10 +211,9 @@ export function BetsList(props: { user: User }) {
|
||||||
<option value="closed">Closed</option>
|
<option value="closed">Closed</option>
|
||||||
<option value="resolved">Resolved</option>
|
<option value="resolved">Resolved</option>
|
||||||
<option value="all">All</option>
|
<option value="all">All</option>
|
||||||
</select>
|
</Select>
|
||||||
|
|
||||||
<select
|
<Select
|
||||||
className="border-greyscale-4 self-start overflow-hidden rounded px-2 py-2 text-sm"
|
|
||||||
value={sort}
|
value={sort}
|
||||||
onChange={(e) => setSort(e.target.value as BetSort)}
|
onChange={(e) => setSort(e.target.value as BetSort)}
|
||||||
>
|
>
|
||||||
|
@ -222,7 +221,7 @@ export function BetsList(props: { user: User }) {
|
||||||
<option value="value">Value</option>
|
<option value="value">Value</option>
|
||||||
<option value="profit">Profit</option>
|
<option value="profit">Profit</option>
|
||||||
<option value="closeTime">Close date</option>
|
<option value="closeTime">Close date</option>
|
||||||
</select>
|
</Select>
|
||||||
</Row>
|
</Row>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
|
|
|
@ -42,6 +42,7 @@ import { Button } from './button'
|
||||||
import { Modal } from './layout/modal'
|
import { Modal } from './layout/modal'
|
||||||
import { Title } from './title'
|
import { Title } from './title'
|
||||||
import { Input } from './input'
|
import { Input } from './input'
|
||||||
|
import { Select } from './select'
|
||||||
|
|
||||||
export const SORTS = [
|
export const SORTS = [
|
||||||
{ label: 'Newest', value: 'newest' },
|
{ label: 'Newest', value: 'newest' },
|
||||||
|
@ -543,8 +544,7 @@ export function SearchFilters(props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
<select
|
<Select
|
||||||
className="select select-bordered"
|
|
||||||
value={filter}
|
value={filter}
|
||||||
onChange={(e) => selectFilter(e.target.value as filter)}
|
onChange={(e) => selectFilter(e.target.value as filter)}
|
||||||
>
|
>
|
||||||
|
@ -552,10 +552,9 @@ export function SearchFilters(props: {
|
||||||
<option value="closed">Closed</option>
|
<option value="closed">Closed</option>
|
||||||
<option value="resolved">Resolved</option>
|
<option value="resolved">Resolved</option>
|
||||||
<option value="all">All</option>
|
<option value="all">All</option>
|
||||||
</select>
|
</Select>
|
||||||
{!hideOrderSelector && (
|
{!hideOrderSelector && (
|
||||||
<select
|
<Select
|
||||||
className="select select-bordered"
|
|
||||||
value={sort}
|
value={sort}
|
||||||
onChange={(e) => selectSort(e.target.value as Sort)}
|
onChange={(e) => selectSort(e.target.value as Sort)}
|
||||||
>
|
>
|
||||||
|
@ -564,7 +563,7 @@ export function SearchFilters(props: {
|
||||||
{option.label}
|
{option.label}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</Select>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -14,6 +14,7 @@ import { DuplicateIcon } from '@heroicons/react/outline'
|
||||||
import { QRCode } from '../qr-code'
|
import { QRCode } from '../qr-code'
|
||||||
import { Input } from '../input'
|
import { Input } from '../input'
|
||||||
import { ExpandingInput } from '../expanding-input'
|
import { ExpandingInput } from '../expanding-input'
|
||||||
|
import { Select } from '../select'
|
||||||
|
|
||||||
export function CreateLinksButton(props: {
|
export function CreateLinksButton(props: {
|
||||||
user: User
|
user: User
|
||||||
|
@ -150,8 +151,7 @@ function CreateManalinkForm(props: {
|
||||||
</div>
|
</div>
|
||||||
<div className="form-control w-full md:w-1/2">
|
<div className="form-control w-full md:w-1/2">
|
||||||
<label className="px-1 py-2">Expires in</label>
|
<label className="px-1 py-2">Expires in</label>
|
||||||
<select
|
<Select
|
||||||
className="!select !select-bordered"
|
|
||||||
value={expiresIn}
|
value={expiresIn}
|
||||||
defaultValue={defaultExpire}
|
defaultValue={defaultExpire}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
|
@ -160,7 +160,7 @@ function CreateManalinkForm(props: {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{expireOptions}
|
{expireOptions}
|
||||||
</select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-control w-full">
|
<div className="form-control w-full">
|
||||||
|
|
17
web/components/select.tsx
Normal file
17
web/components/select.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import clsx from 'clsx'
|
||||||
|
|
||||||
|
export const Select = (props: JSX.IntrinsicElements['select']) => {
|
||||||
|
const { className, children, ...rest } = props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<select
|
||||||
|
className={clsx(
|
||||||
|
'h-12 cursor-pointer self-start overflow-hidden rounded-md border border-gray-300 pl-4 pr-10 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
ß{children}
|
||||||
|
</select>
|
||||||
|
)
|
||||||
|
}
|
|
@ -10,6 +10,7 @@ import {
|
||||||
} from 'web/hooks/use-persistent-state'
|
} from 'web/hooks/use-persistent-state'
|
||||||
import { PAST_BETS } from 'common/user'
|
import { PAST_BETS } from 'common/user'
|
||||||
import { Input } from 'web/components/input'
|
import { Input } from 'web/components/input'
|
||||||
|
import { Select } from 'web/components/select'
|
||||||
|
|
||||||
const MAX_CONTRACTS_RENDERED = 100
|
const MAX_CONTRACTS_RENDERED = 100
|
||||||
|
|
||||||
|
@ -96,17 +97,13 @@ export default function ContractSearchFirestore(props: {
|
||||||
placeholder="Search markets"
|
placeholder="Search markets"
|
||||||
className="w-full"
|
className="w-full"
|
||||||
/>
|
/>
|
||||||
<select
|
<Select value={sort} onChange={(e) => setSort(e.target.value)}>
|
||||||
className="select select-bordered"
|
|
||||||
value={sort}
|
|
||||||
onChange={(e) => setSort(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="score">Trending</option>
|
<option value="score">Trending</option>
|
||||||
<option value="newest">Newest</option>
|
<option value="newest">Newest</option>
|
||||||
<option value="most-traded">Most ${PAST_BETS}</option>
|
<option value="most-traded">Most ${PAST_BETS}</option>
|
||||||
<option value="24-hour-vol">24h volume</option>
|
<option value="24-hour-vol">24h volume</option>
|
||||||
<option value="close-date">Closing soon</option>
|
<option value="close-date">Closing soon</option>
|
||||||
</select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<ContractsGrid contracts={matches} showTime={showTime} />
|
<ContractsGrid contracts={matches} showTime={showTime} />
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user