Extract TextButton component with blue underline.
This commit is contained in:
parent
21d6815de1
commit
d7e52c1969
|
@ -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}
|
||||||
|
|
22
web/components/text-button.tsx
Normal file
22
web/components/text-button.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -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} />
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user