Skip to content

Commit 71e995a

Browse files
dinhanhthidinhanhthi
committed
refactor: use TooltipX
1 parent bac74cf commit 71e995a

File tree

9 files changed

+88
-65
lines changed

9 files changed

+88
-65
lines changed

‎src/components/BadgeSocial.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import React from 'react'
55

66
import { ImageType } from '../interface'
77
import ImageComponent from './ImageComponent'
8+
import TooltipX from './tooltip-x'
89

910
export type BadgeSocialProps = {
1011
id?: string
@@ -20,12 +21,12 @@ export default function BadgeSocial(props: BadgeSocialProps) {
2021
<a
2122
className={`
2223
group block h-12 w-12 rounded-2xl bg-gray-700 p-2
23-
shadow-none md:h-10 md:w-10 md:p-1.5 tooltip-auto
24+
shadow-none md:h-10 md:w-10 md:p-1.5
2425
`}
2526
href={props.url}
2627
target="_blank"
2728
rel="noopener noreferrer"
28-
data-title={props.title}
29+
id={`social-${props.id}`}
2930
>
3031
<ImageComponent
3132
image={props.icon}
@@ -37,6 +38,7 @@ export default function BadgeSocial(props: BadgeSocialProps) {
3738
imageProps={{ width: 64, height: 64 }}
3839
/>
3940
</a>
41+
<TooltipX id={`#social-${props.id}`}>{props.title}</TooltipX>
4042
</>
4143
)
4244
}

‎src/components/BadgeTech.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import React from 'react'
55

66
import { ImageType } from '../interface'
77
import ImageComponent from './ImageComponent'
8+
import TooltipX from './tooltip-x'
89

910
export type TechItem = {
1011
id: string
@@ -25,10 +26,7 @@ export default function BadgeTech(props: BadgeTechProps) {
2526
const containerClass = cn(
2627
`flex h-6 w-fit items-center justify-center rounded-md border bg-slate-100 px-1
2728
align-baseline text-base text-[#1e293b] shadow-sm transition
28-
duration-200 ease-in-out hover:-translate-y-0.5`,
29-
{
30-
'tooltip-auto': !props.hideTooltip
31-
}
29+
duration-200 ease-in-out hover:-translate-y-0.5`
3230
)
3331

3432
const children = () => (
@@ -48,15 +46,21 @@ export default function BadgeTech(props: BadgeTechProps) {
4846
return (
4947
<>
5048
{props.useLink && (
51-
<a className={containerClass} href={props.tech.url} data-title={props.tech.name}>
49+
<a
50+
id={`tech-${props.tech.id}`}
51+
className={containerClass}
52+
href={props.tech.url}
53+
data-title={props.tech.name}
54+
>
5255
{children()}
5356
</a>
5457
)}
5558
{!props.useLink && (
56-
<div className={containerClass} data-title={props.tech.name}>
59+
<div id={`tech-${props.tech.id}`} className={containerClass} data-title={props.tech.name}>
5760
{children()}
5861
</div>
5962
)}
63+
<TooltipX id={`#tech-${props.tech.id}`}>{props.tech.name}</TooltipX>
6064
</>
6165
)
6266
}

‎src/components/BlockCode.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import RxCopy from '../icons/RxCopy'
1414
import { useNotionContext } from '../lib/context'
1515
import Mermaid from './Mermaid'
1616
import { Text } from './text'
17+
import TooltipX from './tooltip-x'
1718

1819
type BlockCodeProps = {
1920
block: CodeBlock
@@ -74,13 +75,14 @@ export default function BlockCode(props: BlockCodeProps) {
7475
<div className={cn(className, blurBlockClassName, 'relative flex flex-col gap-2')}>
7576
{!!updatedBlock && updatedBlock}
7677
<div
78+
id={`copy-${block.id}`}
7779
className={cn(
78-
'tooltip-auto !z-10 _from-right !absolute right-2 top-2 duration-100 hover:cursor-pointer group-hover:opacity-100'
80+
'!z-10 _from-right !absolute right-2 top-2 duration-100 hover:cursor-pointer group-hover:opacity-100'
7981
)}
80-
data-title={copied ? copiedLabel : copyLabel}
8182
>
8283
{copyBtnWrapper}
8384
</div>
85+
<TooltipX id={`#copy-${block.id}`}>{copied ? copiedLabel : copyLabel}</TooltipX>
8486
<div
8587
className={`language-${formatCodeLang(
8688
language

‎src/components/PostBody.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { usePostDateStatus } from '../lib/hooks'
1616
import { NotionRenderer } from '../lib/renderer'
1717
import ScrollToTop from './ScrollToTop'
1818
import { SimpleImageProps } from './SimpleImage'
19+
import TooltipX from './tooltip-x'
1920

2021
export type DiscreteColsType = 'single' | 'multiple'
2122

@@ -122,19 +123,20 @@ export default function PostBody(props: PostBodyProps) {
122123
)}
123124
>
124125
<div
126+
id="updated-blocks-toggle"
125127
className={cn(
126128
'h-full w-full flex items-center justify-center',
127129
props.showUpdateButtonClassName
128130
? props.showUpdateButtonClassName
129-
: 'before:!right-[55px] before:!top-[15px] before:!content-[attr(data-title)] before:!left-auto tooltip-auto'
131+
: 'before:!right-[55px] before:!top-[15px] before:!left-auto'
130132
)}
131-
data-title={
132-
!showOnlyUpdatedBlocks ? 'Highlight only updated blocks' : 'Back to default display'
133-
}
134133
>
135134
{!showOnlyUpdatedBlocks && <ToggleOffIcon className="w-7 h-7 text-green-700" />}
136135
{showOnlyUpdatedBlocks && <ToggleOnIcon className="w-7 h-7 text-green-700" />}
137136
</div>
137+
<TooltipX id={'#updated-blocks-toggle'}>
138+
{!showOnlyUpdatedBlocks ? 'Highlight only updated blocks' : 'Back to default display'}
139+
</TooltipX>
138140
</button>
139141
)}
140142
{props.showBackToTopButton && (

‎src/components/PostHeaderTopics.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React from 'react'
44

55
import TiTag from '../icons/TiTag'
66
import { Category, Tag } from '../interface'
7+
import TooltipX from './tooltip-x'
78

89
type PostHeaderTopicsProps = {
910
className?: string
@@ -57,18 +58,22 @@ export default function PostHeaderTopics(props: PostHeaderTopicsProps) {
5758
{usedTags.length > 0 && <TiTag className={props.TiTagClass ?? 'text-gray-600 text-lg'} />}
5859
{usedTags.length > 0 &&
5960
usedTags.map(tag => (
60-
<Link
61-
className={cn(
62-
{ 'tooltip-auto': tag.longName },
63-
topTagClass,
64-
props.tagClass ?? 'boder-slate-300 border text-slate-600 bg-white'
61+
<>
62+
<Link
63+
id={`tag-${tag.id}`}
64+
className={cn(
65+
topTagClass,
66+
props.tagClass ?? 'boder-slate-300 border text-slate-600 bg-white'
67+
)}
68+
key={tag.uri}
69+
href={tag.uri || '/'}
70+
>
71+
{tag.name}
72+
</Link>
73+
{!!(tag.longName || tag.description) && (
74+
<TooltipX id={`#tag-${tag.id}`}>{tag.description || tag.longName}</TooltipX>
6575
)}
66-
key={tag.uri}
67-
href={tag.uri || '/'}
68-
data-title={tag.longName}
69-
>
70-
{tag.name}
71-
</Link>
76+
</>
7277
))}
7378
</div>
7479
)

‎src/components/block.tsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { PageIcon } from './page-icon'
3434
import { PageTitle } from './page-title'
3535
import { SyncPointerBlock } from './sync-pointer-block'
3636
import { Text } from './text'
37+
import TooltipX from './tooltip-x'
3738

3839
interface BlockProps {
3940
block: types.Block
@@ -129,23 +130,26 @@ export const Block: React.FC<BlockProps> = props => {
129130
{(level === 1 || block.type === 'transclusion_container') &&
130131
showUpdated &&
131132
showUpdatedIndicator && (
132-
<button
133-
onClick={() => props.setShowOnlyUpdatedBlocks(!props.showOnlyUpdatedBlocks)}
134-
className={cn(
135-
'hidden md:block !absolute -left-4 top-0 shrink-0 min-h-full h-full w-2 !my-0 tooltip-auto group button-indicator updated-block'
136-
)}
137-
data-title={
138-
!props.showOnlyUpdatedBlocks
139-
? 'Highlight only updated blocks'
140-
: 'Back to default display'
141-
}
142-
>
143-
<div
133+
<>
134+
<button
135+
id={`updated-block-${block.id}`}
136+
onClick={() => props.setShowOnlyUpdatedBlocks(!props.showOnlyUpdatedBlocks)}
144137
className={cn(
145-
'group-hover:w-full w-[0.25px] h-full transition-all duration-100 bg-green-400'
138+
'hidden md:block !absolute -left-4 top-0 shrink-0 min-h-full h-full w-2 !my-0 group button-indicator updated-block'
146139
)}
147-
></div>
148-
</button>
140+
>
141+
<div
142+
className={cn(
143+
'group-hover:w-full w-[0.25px] h-full transition-all duration-100 bg-green-400'
144+
)}
145+
></div>
146+
</button>
147+
<TooltipX id={`#updated-block-${block.id}`}>
148+
{!props.showOnlyUpdatedBlocks
149+
? 'Highlight only updated blocks'
150+
: 'Back to default display'}
151+
</TooltipX>
152+
</>
149153
)}
150154
</>
151155
)

‎src/components/tooltip-x.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,21 @@ import { Tooltip } from 'react-tooltip'
33

44
type TooltipXProps = {
55
className?: string
6-
content: string
76
id: string
7+
children: React.ReactNode
8+
defaultIsOpen?: boolean
89
}
910

1011
export default function TooltipX(props: TooltipXProps) {
1112
return (
1213
<Tooltip
13-
anchorSelect={`#draft-${props.id}`}
14+
anchorSelect={props.id}
1415
place="bottom"
15-
className="!text-sm !px-2 !py-0.5 !rounded-md"
16+
className="!text-sm !px-2 !py-0.5 !rounded-md !z-[9999]"
1617
noArrow={true}
17-
defaultIsOpen={true}
18+
defaultIsOpen={props.defaultIsOpen}
1819
>
19-
{props.content}
20+
{props.children}
2021
</Tooltip>
2122
)
2223
}

‎src/lib/helpers.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export function mapTag(tagName: string, tagPrefix: string, topics: Tag[] = []):
3232
return {
3333
id: makeSlugText(tagName),
3434
name: tagName,
35+
description: topics.find(topic => topic.name === tagName)?.description,
3536
longName: topics.find(topic => topic.name === tagName)?.longName,
3637
slug: makeSlugText(tagName),
3738
uri: `/${tagPrefix}/${makeSlugText(tagName)}/`

‎src/post-types/PostSimple.tsx‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import React from 'react'
66

77
import DateComponent from '../components/DateComponent'
88
import { CommonPostTypeOpts } from '../components/PostsList'
9+
import TooltipX from '../components/tooltip-x'
910
import BlogIcon from '../icons/BlogIcon'
1011
import BsPinAngleFill from '../icons/BsPinAngleFill'
1112
import HiMiniCheckBadge from '../icons/HiMiniCheckBadge'
@@ -40,18 +41,7 @@ export default function PostSimple(props: PostSimpleProps) {
4041
className={cn(options?.fontClassName, 'flex items-start gap-3 p-4')}
4142
href={post.uri || '/'}
4243
>
43-
<div
44-
className={cn('mt-[3px] text-slate-600 relative', {
45-
'tooltip-auto': post.wellWritten || post.blog
46-
})}
47-
data-title={
48-
post.blog
49-
? options?.blogLabel ?? 'A blog post' // Must come before wellWritten
50-
: post.wellWritten
51-
? options?.wellWrittenLabel ?? 'Well written, verified by the author'
52-
: undefined
53-
}
54-
>
44+
<div className={cn('mt-[3px] text-slate-600 relative')} id={`well-blog-${post.id}`}>
5545
{!!options?.customIcon && (!options.showPinned || !post.pinned) && options.customIcon}
5646
{!options?.customIcon && (!options?.showPinned || !post.pinned) && (
5747
<>
@@ -66,6 +56,15 @@ export default function PostSimple(props: PostSimpleProps) {
6656
</span>
6757
)}
6858
</div>
59+
{(post.wellWritten || post.blog) && (
60+
<TooltipX id={`#well-blog-${post.id}`}>
61+
{post.blog
62+
? options?.blogLabel ?? 'A blog post' // Must come before wellWritten
63+
: post.wellWritten
64+
? options?.wellWrittenLabel ?? 'Well written, verified by the author'
65+
: undefined}
66+
</TooltipX>
67+
)}
6968

7069
<div className="flex flex-1 items-start justify-between gap-x-3 gap-y-1.5 flex-col md:flex-row">
7170
<h3 className="flex-1">
@@ -87,14 +86,17 @@ export default function PostSimple(props: PostSimpleProps) {
8786
{/* title */}
8887
{post.title} {/* draft */}
8988
{post.isDraft && (
90-
<span
91-
className={cn(
92-
'bg-slate-100 text-slate-600 px-2 py-0 text-[0.8rem] rounded-md tooltip-auto'
93-
)}
94-
data-title={options?.tooltipDraftLabel || 'The content is not so good yet'}
95-
>
96-
{options?.draftLabel || 'draft'}
97-
</span>
89+
<>
90+
<span
91+
id={`draft-${post.id}`}
92+
className={cn('bg-slate-100 text-slate-600 px-2 py-0 text-[0.8rem] rounded-md')}
93+
>
94+
{options?.draftLabel || 'draft'}
95+
</span>
96+
<TooltipX id={`#draft-${post.id}`}>
97+
{options?.tooltipDraftLabel || 'The content is not so good yet'}
98+
</TooltipX>
99+
</>
98100
)}
99101
</h3>
100102
{/* date status on big screen */}

0 commit comments

Comments
 (0)