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

refactor text input into one component (#1016)

Browse Source 
* Add responsive text input component

* Add styled expanding textarea component
This commit is contained in:
Sinclair Chen 2022-10-09 19:37:24 -07:00 committed by GitHub
parent dc51e2cf46
commit 8d06e4b4d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 128 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/amount-input.tsx
View File

@ -6,6 +6,7 @@ import { Col } from './layout/col'
import { ENV_CONFIG } from 'common/envs/constants'
import { Row } from './layout/row'
import { AddFundsModal } from './add-funds-modal'
import { Input } from './input'
export function AmountInput(props: {
amount: number | undefined
@ -44,9 +45,9 @@ export function AmountInput(props: {
<span className="text-greyscale-4 absolute top-1/2 my-auto ml-2 -translate-y-1/2">
{label}
</span>
<input
<Input
className={clsx(
'placeholder:text-greyscale-4 border-greyscale-2 rounded-md pl-9',
'pl-9',
error && 'input-error',
'w-24 md:w-auto',
inputClassName

5
web/components/answers/answer-item.tsx
View File

@ -10,6 +10,7 @@ import { formatPercent } from 'common/util/format'
import { getDpmOutcomeProbability } from 'common/calculate-dpm'
import { tradingAllowed } from 'web/lib/firebase/contracts'
import { Linkify } from '../linkify'
import { Input } from '../input'
export function AnswerItem(props: {
answer: Answer
@ -74,8 +75,8 @@ export function AnswerItem(props: {
<Row className="items-center justify-end gap-4 self-end sm:self-start">
{!wasResolvedTo &&
(showChoice === 'checkbox' ? (
<input
className="input input-bordered w-24 justify-self-end text-2xl"
<Input
className="w-24 justify-self-end !text-2xl"
type="number"
placeholder={`${roundedProb}`}
maxLength={9}

6
web/components/answers/create-answer-panel.tsx
View File

@ -1,6 +1,5 @@
import clsx from 'clsx'
import React, { useState } from 'react'
import Textarea from 'react-expanding-textarea'
import { findBestMatch } from 'string-similarity'
import { FreeResponseContract } from 'common/contract'
@ -26,6 +25,7 @@ import { MAX_ANSWER_LENGTH } from 'common/answer'
import { withTracking } from 'web/lib/service/analytics'
import { lowerCase } from 'lodash'
import { Button } from '../button'
import { ExpandingInput } from '../expanding-input'
export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
const { contract } = props
@ -122,10 +122,10 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
<Col className="gap-4 rounded">
<Col className="flex-1 gap-2 px-4 xl:px-0">
<div className="mb-1">Add your answer</div>
<Textarea
<ExpandingInput
value={text}
onChange={(e) => changeAnswer(e.target.value)}
className="textarea textarea-bordered w-full resize-none"
className="w-full"
placeholder="Type your answer..."
rows={1}
maxLength={MAX_ANSWER_LENGTH}

6
web/components/answers/multiple-choice-answers.tsx
View File

@ -1,8 +1,8 @@
import { MAX_ANSWER_LENGTH } from 'common/answer'
import Textarea from 'react-expanding-textarea'
import { XIcon } from '@heroicons/react/solid'
import { Col } from '../layout/col'
import { Row } from '../layout/row'
import { ExpandingInput } from '../expanding-input'
export function MultipleChoiceAnswers(props: {
answers: string[]
@ -27,10 +27,10 @@ export function MultipleChoiceAnswers(props: {
{answers.map((answer, i) => (
<Row className="mb-2 items-center gap-2 align-middle">
{i + 1}.{' '}
<Textarea
<ExpandingInput
value={answer}
onChange={(e) => setAnswer(i, e.target.value)}
className="textarea textarea-bordered ml-2 w-full resize-none"
className="ml-2 w-full"
placeholder="Type your answer..."
rows={1}
maxLength={MAX_ANSWER_LENGTH}

6
web/components/challenges/create-challenge-modal.tsx
View File

@ -20,11 +20,11 @@ import { getProbability } from 'common/calculate'
import { createMarket } from 'web/lib/firebase/api'
import { removeUndefinedProps } from 'common/util/object'
import { FIXED_ANTE } from 'common/economy'
import Textarea from 'react-expanding-textarea'
import { useTextEditor } from 'web/components/editor'
import { LoadingIndicator } from 'web/components/loading-indicator'
import { track } from 'web/lib/service/analytics'
import { CopyLinkButton } from '../copy-link-button'
import { ExpandingInput } from '../expanding-input'
type challengeInfo = {
amount: number
@ -153,9 +153,9 @@ function CreateChallengeForm(props: {
{contract ? (
<span className="underline">{contract.question}</span>
) : (
<Textarea
<ExpandingInput
placeholder="e.g. Will a Democrat be the next president?"
className="input input-bordered mt-1 w-full resize-none"
className="mt-1 w-full"
autoFocus={true}
maxLength={MAX_QUESTION_LENGTH}
value={challengeInfo.question}

7
web/components/contract-search.tsx
View File

@ -41,6 +41,7 @@ import { AdjustmentsIcon } from '@heroicons/react/solid'
import { Button } from './button'
import { Modal } from './layout/modal'
import { Title } from './title'
import { Input } from './input'
export const SORTS = [
{ label: 'Newest', value: 'newest' },
@ -438,13 +439,13 @@ function ContractSearchControls(props: {
return (
<Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}>
<Row className="gap-1 sm:gap-2">
<input
<Input
type="text"
value={query}
onChange={(e) => updateQuery(e.target.value)}
onBlur={trackCallback('search', { query: query })}
placeholder={'Search'}
className="input input-bordered w-full"
placeholder="Search"
className="w-full"
autoFocus={autoFocus}
/>
{!isMobile && !query && (

7
web/components/contract/contract-description.tsx
View File

@ -1,8 +1,6 @@
import clsx from 'clsx'
import dayjs from 'dayjs'
import { useState } from 'react'
import Textarea from 'react-expanding-textarea'
import { Contract, MAX_DESCRIPTION_LENGTH } from 'common/contract'
import { exhibitExts } from 'common/util/parse'
import { useAdmin } from 'web/hooks/use-admin'
@ -15,6 +13,7 @@ import { Button } from '../button'
import { Spacer } from '../layout/spacer'
import { Editor, Content as ContentType } from '@tiptap/react'
import { insertContent } from '../editor/utils'
import { ExpandingInput } from '../expanding-input'
export function ContractDescription(props: {
contract: Contract
@ -138,8 +137,8 @@ function EditQuestion(props: {
return editing ? (
<div className="mt-4">
<Textarea
className="textarea textarea-bordered mb-1 h-24 w-full resize-none"
<ExpandingInput
className="mb-1 h-24 w-full"
rows={2}
value={text}
onChange={(e) => setText(e.target.value || '')}

9
web/components/contract/contract-details.tsx
View File

@ -40,6 +40,7 @@ import {
BountiedContractBadge,
BountiedContractSmallBadge,
} from 'web/components/contract/bountied-contract-badge'
import { Input } from '../input'
export type ShowTime = 'resolve-date' | 'close-date'
@ -445,17 +446,17 @@ function EditableCloseDate(props: {
<Col className="rounded bg-white px-8 pb-8">
<Subtitle text="Edit market close time" />
<Row className="z-10 mr-2 mt-4 w-full shrink-0 flex-wrap items-center gap-2">
<input
<Input
type="date"
className="input input-bordered w-full shrink-0 sm:w-fit"
className="w-full shrink-0 sm:w-fit"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value)}
min={Date.now()}
value={closeDate}
/>
<input
<Input
type="time"
className="input input-bordered w-full shrink-0 sm:w-max"
className="w-full shrink-0 sm:w-max"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseHoursMinutes(e.target.value)}
min="00:00"

8
web/components/create-post.tsx
View File

@ -1,7 +1,6 @@
import { useState } from 'react'
import { Spacer } from 'web/components/layout/spacer'
import { Title } from 'web/components/title'
import Textarea from 'react-expanding-textarea'
import { TextEditor, useTextEditor } from 'web/components/editor'
import { createPost } from 'web/lib/firebase/api'
@ -10,6 +9,7 @@ import Router from 'next/router'
import { MAX_POST_TITLE_LENGTH } from 'common/post'
import { postPath } from 'web/lib/firebase/posts'
import { Group } from 'common/group'
import { ExpandingInput } from './expanding-input'
export function CreatePost(props: { group?: Group }) {
const [title, setTitle] = useState('')
@ -60,9 +60,8 @@ export function CreatePost(props: { group?: Group }) {
Title<span className={'text-red-700'}> *</span>
</span>
</label>
<Textarea
<ExpandingInput
placeholder="e.g. Elon Mania Post"
className="input input-bordered resize-none"
autoFocus
maxLength={MAX_POST_TITLE_LENGTH}
value={title}
@ -74,9 +73,8 @@ export function CreatePost(props: { group?: Group }) {
Subtitle<span className={'text-red-700'}> *</span>
</span>
</label>
<Textarea
<ExpandingInput
placeholder="e.g. How Elon Musk is getting everyone's attention"
className="input input-bordered resize-none"
autoFocus
maxLength={MAX_POST_TITLE_LENGTH}
value={subtitle}

16
web/components/expanding-input.tsx Normal file
View File

@ -0,0 +1,16 @@
import clsx from 'clsx'
import Textarea from 'react-expanding-textarea'
/** Expanding `<textarea>` with same style as input.tsx */
export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
const { className, ...rest } = props
return (
<Textarea
className={clsx(
'textarea textarea-bordered resize-none text-[16px] md:text-[14px]',
className
)}
{...rest}
/>
)
}

5
web/components/filter-select-users.tsx
View File

@ -8,6 +8,7 @@ import { Avatar } from 'web/components/avatar'
import { Row } from 'web/components/layout/row'
import { searchInAny } from 'common/util/parse'
import { UserLink } from 'web/components/user-link'
import { Input } from './input'
export function FilterSelectUsers(props: {
setSelectedUsers: (users: User[]) => void
@ -50,13 +51,13 @@ export function FilterSelectUsers(props: {
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<UserIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
<input
<Input
type="text"
name="user name"
id="user name"
value={query}
onChange={(e) => setQuery(e.target.value)}
className="input input-bordered block w-full pl-10 focus:border-gray-300 "
className="block w-full pl-10"
placeholder="Austin Chen"
/>
</div>

4
web/components/groups/create-group-button.tsx
View File

@ -8,6 +8,7 @@ import { Title } from '../title'
import { User } from 'common/user'
import { MAX_GROUP_NAME_LENGTH } from 'common/group'
import { createGroup } from 'web/lib/firebase/api'
import { Input } from '../input'
export function CreateGroupButton(props: {
user: User
@ -104,9 +105,8 @@ export function CreateGroupButton(props: {
<div className="form-control w-full">
<label className="mb-2 ml-1 mt-0">Group name</label>
<input
<Input
placeholder={'Your group name'}
className="input input-bordered resize-none"
disabled={isSubmitting}
value={name}
maxLength={MAX_GROUP_NAME_LENGTH}

4
web/components/groups/edit-group-button.tsx
View File

@ -10,6 +10,7 @@ import { Modal } from 'web/components/layout/modal'
import { FilterSelectUsers } from 'web/components/filter-select-users'
import { User } from 'common/user'
import { useMemberIds } from 'web/hooks/use-group'
import { Input } from '../input'
export function EditGroupButton(props: { group: Group; className?: string }) {
const { group, className } = props
@ -54,9 +55,8 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
<span className="mb-1">Group name</span>
</label>
<input
<Input
placeholder="Your group name"
className="input input-bordered resize-none"
disabled={isSubmitting}
value={name}
onChange={(e) => setName(e.target.value || '')}

22
web/components/input.tsx Normal file
View File

@ -0,0 +1,22 @@
import clsx from 'clsx'
import React from 'react'
/** Text input. Wraps html `<input>` */
export const Input = (props: JSX.IntrinsicElements['input']) => {
const { className, ...rest } = props
return (
<input
className={clsx('input input-bordered text-base md:text-sm', className)}
{...rest}
/>
)
}
/*
TODO: replace daisyui style with our own. For reference:
james: text-lg placeholder:text-gray-400
inga: placeholder:text-greyscale-4 border-greyscale-2 rounded-md
austin: border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
*/

15
web/components/manalinks/create-links-button.tsx
View File

@ -7,12 +7,13 @@ import { User } from 'common/user'
import { ManalinkCard, ManalinkInfo } from 'web/components/manalink-card'
import { createManalink } from 'web/lib/firebase/manalinks'
import { Modal } from 'web/components/layout/modal'
import Textarea from 'react-expanding-textarea'
import dayjs from 'dayjs'
import { Button } from '../button'
import { getManalinkUrl } from 'web/pages/links'
import { DuplicateIcon } from '@heroicons/react/outline'
import { QRCode } from '../qr-code'
import { Input } from '../input'
import { ExpandingInput } from '../expanding-input'
export function CreateLinksButton(props: {
user: User
@ -120,8 +121,8 @@ function CreateManalinkForm(props: {
<span className="absolute mx-3 mt-3.5 text-sm text-gray-400">
M$
</span>
<input
className="input input-bordered w-full pl-10"
<Input
className="w-full pl-10"
type="number"
min="1"
value={newManalink.amount}
@ -136,8 +137,7 @@ function CreateManalinkForm(props: {
<div className="flex flex-col gap-2 md:flex-row">
<div className="form-control w-full md:w-1/2">
<label className="label">Uses</label>
<input
className="input input-bordered"
<Input
type="number"
min="1"
value={newManalink.maxUses ?? ''}
@ -146,7 +146,7 @@ function CreateManalinkForm(props: {
return { ...m, maxUses: parseInt(e.target.value) }
})
}
></input>
/>
</div>
<div className="form-control w-full md:w-1/2">
<label className="label">Expires in</label>
@ -165,10 +165,9 @@ function CreateManalinkForm(props: {
</div>
<div className="form-control w-full">
<label className="label">Message</label>
<Textarea
<ExpandingInput
placeholder={defaultMessage}
maxLength={200}
className="input input-bordered resize-none"
autoFocus
value={newManalink.message}
rows="3"

5
web/components/number-input.tsx
View File

@ -4,6 +4,7 @@ import { ReactNode } from 'react'
import React from 'react'
import { Col } from './layout/col'
import { Spacer } from './layout/spacer'
import { Input } from './input'
export function NumberInput(props: {
numberString: string
@ -32,9 +33,9 @@ export function NumberInput(props: {
return (
<Col className={className}>
<label className="input-group">
<input
<Input
className={clsx(
'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
'max-w-[200px] !text-lg',
error && 'input-error',
inputClassName
)}

8
web/components/probability-input.tsx
View File

@ -2,6 +2,7 @@ import clsx from 'clsx'
import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
import { getPseudoProbability } from 'common/pseudo-numeric'
import { BucketInput } from './bucket-input'
import { Input } from './input'
import { Col } from './layout/col'
import { Spacer } from './layout/spacer'
@ -30,11 +31,8 @@ export function ProbabilityInput(props: {
return (
<Col className={className}>
<label className="input-group">
<input
className={clsx(
'input input-bordered max-w-[200px] text-lg placeholder:text-gray-400',
inputClassName
)}
<Input
className={clsx('max-w-[200px] !text-lg', inputClassName)}
type="number"
max={99}
min={1}

5
web/components/probability-selector.tsx
View File

@ -1,3 +1,4 @@
import { Input } from './input'
import { Row } from './layout/row'
export function ProbabilitySelector(props: {
@ -10,10 +11,10 @@ export function ProbabilitySelector(props: {
return (
<Row className="items-center gap-2">
<label className="input-group input-group-lg text-lg">
<input
<Input
type="number"
value={probabilityInt}
className="input input-bordered input-md w-28 text-lg"
className="input-md w-28 !text-lg"
disabled={isSubmitting}
min={1}
max={99}

5
web/pages/charity/index.tsx
View File

@ -24,6 +24,7 @@ import { getUser } from 'web/lib/firebase/users'
import { SiteLink } from 'web/components/site-link'
import { User } from 'common/user'
import { SEO } from 'web/components/SEO'
import { Input } from 'web/components/input'
export async function getStaticProps() {
let txns = await getAllCharityTxns()
@ -171,11 +172,11 @@ export default function Charity(props: {
/>
<Spacer h={10} />
<input
<Input
type="text"
onChange={(e) => debouncedQuery(e.target.value)}
placeholder="Find a charity"
className="input input-bordered mb-6 w-full"
className="mb-6 w-full"
/>
</Col>
<div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 self-center lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">

5
web/pages/contract-search-firestore.tsx
View File

@ -9,6 +9,7 @@ import {
urlParamStore,
} from 'web/hooks/use-persistent-state'
import { PAST_BETS } from 'common/user'
import { Input } from 'web/components/input'
const MAX_CONTRACTS_RENDERED = 100
@ -88,12 +89,12 @@ export default function ContractSearchFirestore(props: {
<div>
{/* Show a search input next to a sort dropdown */}
<div className="mt-2 mb-8 flex justify-between gap-2">
<input
<Input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search markets"
className="input input-bordered w-full"
className="w-full"
/>
<select
className="select select-bordered"

25
web/pages/create.tsx
View File

@ -2,7 +2,6 @@ import router, { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import clsx from 'clsx'
import dayjs from 'dayjs'
import Textarea from 'react-expanding-textarea'
import { Spacer } from 'web/components/layout/spacer'
import { getUserAndPrivateUser } from 'web/lib/firebase/users'
import { Contract, contractPath } from 'web/lib/firebase/contracts'
@ -39,6 +38,8 @@ import { SiteLink } from 'web/components/site-link'
import { Button } from 'web/components/button'
import { AddFundsModal } from 'web/components/add-funds-modal'
import ShortToggle from 'web/components/widgets/short-toggle'
import { Input } from 'web/components/input'
import { ExpandingInput } from 'web/components/expanding-input'
export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
return { props: { auth: await getUserAndPrivateUser(creds.uid) } }
@ -104,9 +105,8 @@ export default function Create(props: { auth: { user: User } }) {
</span>
</label>
<Textarea
<ExpandingInput
placeholder="e.g. Will the Democrats win the 2024 US presidential election?"
className="input input-bordered resize-none"
autoFocus
maxLength={MAX_QUESTION_LENGTH}
value={question}
@ -329,9 +329,9 @@ export function NewContract(props: {
</label>
<Row className="gap-2">
<input
<Input
type="number"
className="input input-bordered w-32"
className="w-32"
placeholder="LOW"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setMinString(e.target.value)}
@ -340,9 +340,9 @@ export function NewContract(props: {
disabled={isSubmitting}
value={minString ?? ''}
/>
<input
<Input
type="number"
className="input input-bordered w-32"
className="w-32"
placeholder="HIGH"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setMaxString(e.target.value)}
@ -374,9 +374,8 @@ export function NewContract(props: {
</label>
<Row className="gap-2">
<input
<Input
type="number"
className="input input-bordered"
placeholder="Initial value"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setInitialValueString(e.target.value)}
@ -446,19 +445,17 @@ export function NewContract(props: {
className={'col-span-4 sm:col-span-2'}
/>
</Row>
<Row>
<input
<Row className="mt-4 gap-2">
<Input
type={'date'}
className="input input-bordered mt-4"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value)}
min={Math.round(Date.now() / MINUTE_MS) * MINUTE_MS}
disabled={isSubmitting}
value={closeDate}
/>
<input
<Input
type={'time'}
className="input input-bordered mt-4 ml-2"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseHoursMinutes(e.target.value)}
min={'00:00'}

10
web/pages/date-docs/create.tsx
View File

@ -1,7 +1,5 @@
import Router from 'next/router'
import { useEffect, useState } from 'react'
import Textarea from 'react-expanding-textarea'
import { DateDoc } from 'common/post'
import { useTextEditor, TextEditor } from 'web/components/editor'
import { Page } from 'web/components/page'
@ -17,6 +15,8 @@ import { MAX_QUESTION_LENGTH } from 'common/contract'
import { NoSEO } from 'web/components/NoSEO'
import ShortToggle from 'web/components/widgets/short-toggle'
import { removeUndefinedProps } from 'common/util/object'
import { Input } from 'web/components/input'
import { ExpandingInput } from 'web/components/expanding-input'
export default function CreateDateDocPage() {
const user = useUser()
@ -94,9 +94,8 @@ export default function CreateDateDocPage() {
<Col className="gap-8">
<Col className="max-w-[160px] justify-start gap-4">
<div className="">Birthday</div>
<input
<Input
type={'date'}
className="input input-bordered"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setBirthday(e.target.value)}
max={Math.round(Date.now() / MINUTE_MS) * MINUTE_MS}
@ -122,8 +121,7 @@ export default function CreateDateDocPage() {
</Row>
<Col className="gap-2">
<Textarea
className="input input-bordered resize-none"
<ExpandingInput
maxLength={MAX_QUESTION_LENGTH}
value={question}
onChange={(e) => setQuestion(e.target.value || '')}

9
web/pages/groups.tsx
View File

@ -20,6 +20,7 @@ import { SEO } from 'web/components/SEO'
import { GetServerSideProps } from 'next'
import { authenticateOnServer } from 'web/lib/firebase/server-auth'
import { useUser } from 'web/hooks/use-user'
import { Input } from 'web/components/input'
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const creds = await authenticateOnServer(ctx)
@ -106,12 +107,12 @@ export default function Groups(props: {
title: 'All',
content: (
<Col>
<input
<Input
type="text"
onChange={(e) => debouncedQuery(e.target.value)}
placeholder="Search groups"
value={query}
className="input input-bordered mb-4 w-full"
className="mb-4 w-full"
/>
<div className="flex flex-wrap justify-center gap-4">
@ -134,12 +135,12 @@ export default function Groups(props: {
title: 'My Groups',
content: (
<Col>
<input
<Input
type="text"
value={query}
onChange={(e) => debouncedQuery(e.target.value)}
placeholder="Search your groups"
className="input input-bordered mb-4 w-full"
className="mb-4 w-full"
/>
<div className="flex flex-wrap justify-center gap-4">

5
web/pages/home/index.tsx
View File

@ -48,6 +48,7 @@ import {
} from 'web/hooks/use-contracts'
import { ProfitBadge } from 'web/components/profit-badge'
import { LoadingIndicator } from 'web/components/loading-indicator'
import { Input } from 'web/components/input'
export default function Home() {
const user = useUser()
@ -99,10 +100,10 @@ export default function Home() {
<Row
className={'mb-2 w-full items-center justify-between gap-4 sm:gap-8'}
>
<input
<Input
type="text"
placeholder={'Search'}
className="input input-bordered w-full"
className="w-full"
onClick={() => Router.push('/search')}
/>
<CustomizeButton justIcon />

19
web/pages/profile.tsx
View File

@ -3,8 +3,9 @@ import { PrivateUser, User } from 'common/user'
import { cleanDisplayName, cleanUsername } from 'common/util/clean-username'
import Link from 'next/link'
import React, { useState } from 'react'
import Textarea from 'react-expanding-textarea'
import { ConfirmationButton } from 'web/components/confirmation-button'
import { ExpandingInput } from 'web/components/expanding-input'
import { Input } from 'web/components/input'
import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row'
import { Page } from 'web/components/page'
@ -43,16 +44,15 @@ function EditUserField(props: {
<label className="label">{label}</label>
{field === 'bio' ? (
<Textarea
className="textarea textarea-bordered w-full resize-none"
<ExpandingInput
className="w-full"
value={value}
onChange={(e) => setValue(e.target.value)}
onBlur={updateField}
/>
) : (
<input
<Input
type="text"
className="input input-bordered"
value={value}
onChange={(e) => setValue(e.target.value || '')}
onBlur={updateField}
@ -152,10 +152,9 @@ export default function ProfilePage(props: {
<div>
<label className="label">Display name</label>
<input
<Input
type="text"
placeholder="Display name"
className="input input-bordered"
value={name}
onChange={(e) => setName(e.target.value || '')}
onBlur={updateDisplayName}
@ -164,10 +163,9 @@ export default function ProfilePage(props: {
<div>
<label className="label">Username</label>
<input
<Input
type="text"
placeholder="Username"
className="input input-bordered"
value={username}
onChange={(e) => setUsername(e.target.value || '')}
onBlur={updateUsername}
@ -199,10 +197,9 @@ export default function ProfilePage(props: {
<div>
<label className="label">API key</label>
<div className="input-group w-full">
<input
<Input
type="text"
placeholder="Click refresh to generate key"
className="input input-bordered w-full"
value={apiKey}
readOnly
/>