gh_mirrors/newsnow
1
0
Fork 0
mirror of https://github.com/ourongxing/newsnow.git synced 2025-01-19 03:09:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: optimize code structure

Browse Source
This commit is contained in:
Ou 2024-10-18 11:27:21 +08:00
parent c0d5fe6a2a
commit 7030f3dec0
3 changed files with 47 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/column/card.tsx
View File

@ -98,7 +98,7 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
<>
<div className={clsx("flex justify-between mx-2 mt-0 mb-2 items-center")}>
<div className="flex gap-2 items-center">
<a
<span
className={clsx("w-8 h-8 rounded-full bg-cover")}
style={{
backgroundImage: `url(/icons/${id.split("-")[0]}.png)`,
@ -111,7 +111,7 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
</span>
{sources[id]?.title && <span className={clsx("text-sm", `color-${sources[id].color} bg-base op-80 bg-op-50! px-1 rounded`)}>{sources[id].title}</span>}
</span>
<span className="text-xs op-70"><UpdateTime query={query} /></span>
<span className="text-xs op-70"><UpdatedTime query={query} /></span>
</span>
</div>
<div className={clsx("flex gap-2 text-lg", `color-${sources[id].color}`)}>
@ -152,7 +152,7 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
)
}
function UpdateTime({ query }: Query) {
function UpdatedTime({ query }: Query) {
const updatedTime = useRelativeTime(query.data?.updatedTime ?? "")
if (updatedTime) return `${updatedTime}更新`
if (query.isError) return "获取失败"
@ -168,12 +168,17 @@ function ExtraInfo({ item }: { item: NewsItem }) {
}
}
function NewsUpdatedTime({ date }: { date: string }) {
const relativeTime = useRelativeTime(date)
return <>{relativeTime}</>
}
function NewsListHot({ query }: Query) {
const items = query.data?.items
return (
<>
{items?.map((item, i) => (
<a href={item.url} target="_blank" key={item.title} className="flex gap-2 items-center mb-2 items-stretch hover:bg-neutral-400/10 rounded-md">
<a href={item.url} target="_blank" key={item.title} className="flex gap-2 items-center mb-2 items-stretch hover:bg-neutral-400/10 rounded-md visited:(text-neutral-400)">
<span className={clsx("bg-neutral-400/10 min-w-6 flex justify-center items-center rounded-md text-sm")}>
{i + 1}
</span>
@ -191,11 +196,6 @@ function NewsListHot({ query }: Query) {
)
}
function UpdatedTime({ item }: { item: NewsItem }) {
const relativeTime = useRelativeTime(item?.extra?.date)
return <>{relativeTime}</>
}
function NewsListTimeLine({ query }: Query) {
const items = query.data?.items
return (
@ -203,9 +203,9 @@ function NewsListTimeLine({ query }: Query) {
{items?.map(item => (
<li key={item.title} className="flex gap-2 mb-2 ms-2">
<div className={clsx("absolute w-2 h-2 bg-neutral-400/50 rounded-full ml-0.5 mt-1 -start-1.5")} />
<a href={item.url} target="_blank" className="flex flex-col pl-2 hover:bg-neutral-400/10 rounded-md w-full">
<span className="text-xs text-neutral-400/80 truncate align-middle">
<UpdatedTime item={item} />
<a href={item.url} target="_blank" className="flex flex-col pl-2 hover:bg-neutral-400/10 rounded-md w-full visited:(text-neutral-400/80)">
<span className="text-xs text-neutral-400/80">
{item?.extra?.date && <NewsUpdatedTime date={item.extra.date} />}
</span>
<span>
<span>

28
src/components/column/index.tsx
View File

@ -1,11 +1,8 @@
import { columnIds, metadata } from "@shared/metadata"
import type { ColumnID } from "@shared/types"
import { Link } from "@tanstack/react-router"
import clsx from "clsx"
import { useAtom } from "jotai"
import { useEffect } from "react"
import { useTitle } from "react-use"
import { Dnd } from "./dnd"
import { NavBar } from "./navbar"
import { currentColumnIDAtom } from "~/atoms"
export function Column({ id }: { id: ColumnID }) {
@ -13,30 +10,9 @@ export function Column({ id }: { id: ColumnID }) {
useEffect(() => {
setCurrentColumnID(id)
}, [id, setCurrentColumnID])
useTitle(`NewsNow | ${metadata[id].name}`)
return (
<>
<div className="w-full flex justify-center">
<span className={clsx([
"flex mb-4 p-3 rounded-2xl bg-primary/1 shadow shadow-primary/20 hover:shadow-primary/50 transition-shadow duration-500",
"md:(z-100 mb-6)",
])}
>
{columnIds.map(columnId => (
<Link
key={columnId}
to="/c/$column"
params={{ column: columnId }}
className={clsx(
"text-sm px-2",
id === columnId ? "color-primary font-bold" : "op-70 dark:op-90 hover:(bg-primary/15 rounded-md)",
)}
>
{metadata[columnId].name}
</Link>
))}
</span>
</div>
<NavBar id={id} />
{ currentColumnID === id && <Dnd />}
</>
)

33
src/components/column/navbar.tsx Normal file
View File

@ -0,0 +1,33 @@
import { columnIds, metadata } from "@shared/metadata"
import type { ColumnID } from "@shared/types"
import { Link } from "@tanstack/react-router"
import clsx from "clsx"
import { useTitle } from "react-use"
export function NavBar({ id }: { id: ColumnID }) {
useTitle(`NewsNow | ${metadata[id].name}`)
return (
<div className="w-full flex justify-center">
<span className={clsx([
"flex mb-4 p-3 rounded-2xl bg-primary/1",
"shadow shadow-primary/20 hover:shadow-primary/50 transition-shadow-500",
"md:(z-100 mb-6)",
])}
>
{columnIds.map(columnId => (
<Link
key={columnId}
to="/c/$column"
params={{ column: columnId }}
className={clsx(
"text-sm px-2",
id === columnId ? "color-primary font-bold" : "op-70 dark:op-90 hover:(bg-primary/15 rounded-md)",
)}
>
{metadata[columnId].name}
</Link>
))}
</span>
</div>
)
}