-
Notifications
You must be signed in to change notification settings - Fork 419
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(website): refine ArticleList (#217)
- Loading branch information
1 parent
65f99ae
commit cfc8a3f
Showing
1 changed file
with
26 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,34 @@ | ||
| import { Article } from "../../types/article"; | ||
| import dayjs from "dayjs"; | ||
| import Link from "next/link"; | ||
|
|
||
| import { getTarget } from "../Link/tools"; | ||
| import { type Article } from "../../types/article"; | ||
| import { getArticlePath } from "../../utils/getArticlePath"; | ||
| export default function (props: { | ||
|
|
||
| export default (props: { | ||
| articles: Article[]; | ||
| showYear?: boolean; | ||
| openArticleLinksInNewWindow: boolean; | ||
| onClick?: () => void; | ||
| }) { | ||
| return ( | ||
| <div className="space-y-2" onClick={props.onClick}> | ||
| {props.articles.map((article, index) => { | ||
| return ( | ||
| <Link | ||
| href={`/post/${getArticlePath(article)}`} | ||
| key={article.id} | ||
| target={getTarget(props.openArticleLinksInNewWindow)} | ||
| > | ||
| <div className="dark:border-dark-2 dark:hover:border-nav-dark-light flex items-center border-b pb-1 border-dashed cursor-pointer group border-gray-200 hover:border-gray-400 "> | ||
| <div className="text-gray-400 flex-grow-0 flex-shrink-0 text-sm group-hover:text-gray-600 dark:text-dark-400 dark:group-hover:text-dark-light"> | ||
| {props.showYear | ||
| ? dayjs(article.createdAt).format("YYYY-MM-DD") | ||
| : dayjs(article.createdAt).format("MM-DD")} | ||
| </div> | ||
| <div className="ml-2 md:ml-4 text-base flex-grow flex-shrink overflow-hidden text-gray-600 group-hover:text-gray-800 dark:text-dark dark:group-hover:text-dark"> | ||
| {article.title} | ||
| </div> | ||
| </div> | ||
| </Link> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| } | ||
| }) => ( | ||
| <div className="space-y-2" onClick={props.onClick}> | ||
| {props.articles.map((article) => ( | ||
| <Link | ||
| href={`/post/${getArticlePath(article)}`} | ||
| key={article.id} | ||
| target={getTarget(props.openArticleLinksInNewWindow)} | ||
| > | ||
| <div className="dark:border-dark-2 dark:hover:border-nav-dark-light flex items-center border-b pb-1 border-dashed cursor-pointer group border-gray-200 hover:border-gray-400 "> | ||
| <div className="text-gray-400 flex-grow-0 flex-shrink-0 text-sm group-hover:text-gray-600 dark:text-dark-400 dark:group-hover:text-dark-light"> | ||
| {dayjs(article.createdAt).format( | ||
| props.showYear ? "YYYY-MM-DD" : "MM-DD" | ||
| )} | ||
| </div> | ||
| <div className="ml-2 md:ml-4 text-base flex-grow flex-shrink overflow-hidden text-gray-600 group-hover:text-gray-800 dark:text-dark dark:group-hover:text-dark"> | ||
| {article.title} | ||
| </div> | ||
| </div> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| ); |