legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add reading time calculation to news detail page

Browse Source
This commit is contained in:
Ardeman 2025-03-08 15:34:38 +08:00
parent be63337024
commit 6e858f1860
3 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/pages/news-detail/index.tsx
View File

@ -1,4 +1,5 @@
import htmlParse from 'html-react-parser' import htmlParse from 'html-react-parser'
import { useReadingTime } from 'react-hook-reading-time'
import { useRouteLoaderData } from 'react-router' import { useRouteLoaderData } from 'react-router'
import type { TTagResponse } from '~/apis/common/get-tags' import type { TTagResponse } from '~/apis/common/get-tags'
@ -19,6 +20,8 @@ export const NewsDetailPage = () => {
const { title, content, featured_image, slug, author, live_at, tags } = const { title, content, featured_image, slug, author, live_at, tags } =
newsDetailData || {} newsDetailData || {}
const { text } = useReadingTime(content || '')
return ( return (
<div className="sm-max:mx-5 relative"> <div className="sm-max:mx-5 relative">
<Card> <Card>
@ -45,7 +48,7 @@ export const NewsDetailPage = () => {
<p className="flex gap-1 text-sm"> <p className="flex gap-1 text-sm">
<span>{live_at && `${formatDate(live_at)}`}</span> <span>{live_at && `${formatDate(live_at)}`}</span>
<span>·</span> <span>·</span>
<span>5 min read</span> <span>{text}</span>
</p> </p>
</div> </div>
</div> </div>

1
package.json
View File

@ -42,6 +42,7 @@
"react-colorful": "^5.6.1", "react-colorful": "^5.6.1",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-hook-form": "^7.54.2", "react-hook-form": "^7.54.2",
"react-hook-reading-time": "^1.0.0",
"react-router": "^7.1.3", "react-router": "^7.1.3",
"remix-hook-form": "^6.1.3", "remix-hook-form": "^6.1.3",
"tailwind-merge": "^3.0.1", "tailwind-merge": "^3.0.1",

15
pnpm-lock.yaml generated
View File

@ -92,6 +92,9 @@ importers:
react-hook-form: react-hook-form:
specifier: ^7.54.2 specifier: ^7.54.2
version: 7.54.2(react@19.0.0) version: 7.54.2(react@19.0.0)
react-hook-reading-time:
specifier: ^1.0.0
version: 1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react-router: react-router:
specifier: ^7.1.3 specifier: ^7.1.3
version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0) version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@ -3888,6 +3891,13 @@ packages:
peerDependencies: peerDependencies:
react: ^16.8.0 || ^17 || ^18 || ^19 react: ^16.8.0 || ^17 || ^18 || ^19
react-hook-reading-time@1.0.0:
resolution: {integrity: sha512-kIudDiGHCTzBlV95WM6xPN3EBUViQynJvcul/NL+8My6fsl0BeKoCi9Dp19g69PlyF3WLA3QAyjVL99+Ucgs6A==}
engines: {node: '>=8', npm: '>=5'}
peerDependencies:
react: ^16.13.1
react-dom: ^16.13.1
react-hotkeys-hook@4.6.1: react-hotkeys-hook@4.6.1:
resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==} resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==}
peerDependencies: peerDependencies:
@ -8611,6 +8621,11 @@ snapshots:
dependencies: dependencies:
react: 19.0.0 react: 19.0.0
react-hook-reading-time@1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
react-hotkeys-hook@4.6.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0): react-hotkeys-hook@4.6.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies: dependencies:
react: 19.0.0 react: 19.0.0