Extract TextButton component with blue underline.

This commit is contained in:
James Grugett 2022-06-08 14:23:10 -05:00
parent 21d6815de1
commit d7e52c1969
3 changed files with 36 additions and 28 deletions

View File

@ -1,4 +1,3 @@
import clsx from 'clsx'
import { PencilIcon } from '@heroicons/react/outline' import { PencilIcon } from '@heroicons/react/outline'
import { User } from 'common/user' import { User } from 'common/user'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
@ -9,31 +8,28 @@ import { Col } from './layout/col'
import { Modal } from './layout/modal' import { Modal } from './layout/modal'
import { Tabs } from './layout/tabs' import { Tabs } from './layout/tabs'
import { useDiscoverUsers } from 'web/hooks/use-users' import { useDiscoverUsers } from 'web/hooks/use-users'
import { TextButton } from './text-button'
export function FollowingButton(props: { user: User }) { export function FollowingButton(props: { user: User }) {
const { user } = props const { user } = props
const [open, setOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const followingIds = useFollows(user.id) const followingIds = useFollows(user.id)
const followerIds = useFollowers(user.id) const followerIds = useFollowers(user.id)
return ( return (
<> <>
<div <TextButton onClick={() => setIsOpen(true)}>
className="cursor-pointer gap-2 hover:underline focus:underline"
tabIndex={0}
onClick={() => setOpen(true)}
>
<span className="font-semibold">{followingIds?.length ?? ''}</span>{' '} <span className="font-semibold">{followingIds?.length ?? ''}</span>{' '}
Following Following
</div> </TextButton>
<FollowingFollowersDialog <FollowingFollowersDialog
user={user} user={user}
defaultTab="following" defaultTab="following"
followingIds={followingIds ?? []} followingIds={followingIds ?? []}
followerIds={followerIds ?? []} followerIds={followerIds ?? []}
isOpen={open} isOpen={isOpen}
setIsOpen={setOpen} setIsOpen={setIsOpen}
/> />
</> </>
) )
@ -41,18 +37,12 @@ export function FollowingButton(props: { user: User }) {
export function EditFollowingButton(props: { user: User; className?: string }) { export function EditFollowingButton(props: { user: User; className?: string }) {
const { user, className } = props const { user, className } = props
const [open, setOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const followingIds = useFollows(user.id) const followingIds = useFollows(user.id)
const followerIds = useFollowers(user.id) const followerIds = useFollowers(user.id)
return ( return (
<div <TextButton className={className} onClick={() => setIsOpen(true)}>
className={clsx(
className,
'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm normal-case text-gray-700'
)}
onClick={() => setOpen(true)}
>
<PencilIcon className="inline h-4 w-4" /> <PencilIcon className="inline h-4 w-4" />
Following Following
<FollowingFollowersDialog <FollowingFollowersDialog
@ -60,10 +50,10 @@ export function EditFollowingButton(props: { user: User; className?: string }) {
defaultTab="following" defaultTab="following"
followingIds={followingIds ?? []} followingIds={followingIds ?? []}
followerIds={followerIds ?? []} followerIds={followerIds ?? []}
isOpen={open} isOpen={isOpen}
setIsOpen={setOpen} setIsOpen={setIsOpen}
/> />
</div> </TextButton>
) )
} }
@ -75,14 +65,10 @@ export function FollowersButton(props: { user: User }) {
return ( return (
<> <>
<div <TextButton onClick={() => setIsOpen(true)}>
className="cursor-pointer gap-2 hover:underline focus:underline"
tabIndex={0}
onClick={() => setIsOpen(true)}
>
<span className="font-semibold">{followerIds?.length ?? ''}</span>{' '} <span className="font-semibold">{followerIds?.length ?? ''}</span>{' '}
Followers Followers
</div> </TextButton>
<FollowingFollowersDialog <FollowingFollowersDialog
user={user} user={user}

View File

@ -0,0 +1,22 @@
import clsx from 'clsx'
export function TextButton(props: {
onClick: () => void
children: React.ReactNode
className?: string
}) {
const { onClick, children, className } = props
return (
<div
className={clsx(
className,
'cursor-pointer gap-2 hover:underline hover:decoration-indigo-400 hover:decoration-2 focus:underline focus:decoration-indigo-400 focus:decoration-2'
)}
tabIndex={0}
onClick={onClick}
>
{children}
</div>
)
}

View File

@ -161,7 +161,7 @@ export function UserPage(props: {
</> </>
)} )}
<Col className="sm:flex-row sm:gap-4"> <Col className="sm:flex-row sm:items-center sm:gap-4">
<FollowingButton user={user} /> <FollowingButton user={user} />
<FollowersButton user={user} /> <FollowersButton user={user} />