chore: update memo creator display

This commit is contained in:
Steven
2024-04-09 09:05:34 +08:00
parent b1e196bb4f
commit fc95876617
3 changed files with 9 additions and 3 deletions

View File

@ -24,6 +24,7 @@ import VisibilityIcon from "./VisibilityIcon";
interface Props { interface Props {
memo: Memo; memo: Memo;
compact?: boolean; compact?: boolean;
showCreator?: boolean;
showVisibility?: boolean; showVisibility?: boolean;
showPinned?: boolean; showPinned?: boolean;
className?: string; className?: string;
@ -85,7 +86,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
> >
<div className="w-full flex flex-row justify-between items-center gap-2"> <div className="w-full flex flex-row justify-between items-center gap-2">
<div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center"> <div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
{creator && ( {props.showCreator && creator ? (
<div className="w-full flex flex-row justify-start items-center"> <div className="w-full flex flex-row justify-start items-center">
<Link className="w-auto hover:opacity-80" to={`/u/${encodeURIComponent(creator.username)}`} unstable_viewTransition> <Link className="w-auto hover:opacity-80" to={`/u/${encodeURIComponent(creator.username)}`} unstable_viewTransition>
<UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} /> <UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} />
@ -106,6 +107,10 @@ const MemoView: React.FC<Props> = (props: Props) => {
</div> </div>
</div> </div>
</div> </div>
) : (
<div className="w-full text-sm leading-tight text-gray-400 dark:text-gray-500 select-none" onClick={handleGotoMemoDetailPage}>
<relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
</div>
)} )}
</div> </div>
<div className="flex flex-row justify-end items-center select-none shrink-0 gap-2"> <div className="flex flex-row justify-end items-center select-none shrink-0 gap-2">

View File

@ -66,7 +66,7 @@ const Explore = () => {
<div className="flex flex-col justify-start items-start w-full max-w-full"> <div className="flex flex-col justify-start items-start w-full max-w-full">
<MemoFilter className="px-2 pb-2" /> <MemoFilter className="px-2 pb-2" />
{sortedMemos.map((memo) => ( {sortedMemos.map((memo) => (
<MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility showPinned /> <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility showPinned />
))} ))}
{isRequesting ? ( {isRequesting ? (
<div className="flex flex-row justify-center items-center w-full my-4 text-gray-400"> <div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">

View File

@ -86,6 +86,7 @@ const MemoDetail = () => {
className="shadow hover:shadow-xl transition-all" className="shadow hover:shadow-xl transition-all"
memo={memo} memo={memo}
compact={false} compact={false}
showCreator
showVisibility showVisibility
showPinned showPinned
/> />
@ -107,7 +108,7 @@ const MemoDetail = () => {
<span className="text-gray-400 text-sm ml-0.5">({comments.length})</span> <span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
</div> </div>
{comments.map((comment) => ( {comments.map((comment) => (
<MemoView key={`${memo.name}-${memo.displayTime}`} memo={comment} /> <MemoView key={`${memo.name}-${memo.displayTime}`} memo={comment} showCreator />
))} ))}
</> </>
)} )}