mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
update empty state
This commit is contained in:
Ren Amamiya
parent
d87ca7b75b
commit
6d2e976355
@ -4,13 +4,44 @@ import { ChannelMessageForm } from "@app/channel/components/messages/form";
|
||||
import { ChannelMetadata } from "@app/channel/components/metadata";
|
||||
import { RelayContext } from "@shared/relayProvider";
|
||||
import { useChannelMessages } from "@stores/channels";
|
||||
import { dateToUnix } from "@utils/date";
|
||||
import { dateToUnix, getHourAgo } from "@utils/date";
|
||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
import { LumeEvent } from "@utils/types";
|
||||
import { useCallback, useContext, useEffect, useRef } from "react";
|
||||
import { Virtuoso } from "react-virtuoso";
|
||||
import useSWRSubscription from "swr/subscription";
|
||||
|
||||
const now = new Date();
|
||||
|
||||
const Header = (
|
||||
<div className="relative py-4">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-zinc-800" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
|
||||
{getHourAgo(24, now).toLocaleDateString("en-US", {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Empty = (
|
||||
<div className="flex flex-col gap-1 text-center">
|
||||
<h3 className="text-base font-semibold leading-none text-white">
|
||||
Nothing to see here yet
|
||||
</h3>
|
||||
<p className="text-base leading-none text-zinc-400">
|
||||
Be the first to share a message in this channel.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export function Page() {
|
||||
const ndk = useContext(RelayContext);
|
||||
const pageContext = usePageContext();
|
||||
@ -97,6 +128,10 @@ export function Page() {
|
||||
overscan={50}
|
||||
increaseViewportBy={{ top: 200, bottom: 200 }}
|
||||
className="scrollbar-hide overflow-y-auto h-full w-full"
|
||||
components={{
|
||||
Header: () => Header,
|
||||
EmptyPlaceholder: () => Empty,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className="w-full inline-flex shrink-0 px-5 py-3 border-t border-zinc-800">
|
||||
|
||||
@ -1,9 +1,41 @@
|
||||
import { ChatMessageItem } from "@app/chat/components/messages/item";
|
||||
import { useActiveAccount } from "@stores/accounts";
|
||||
import { useChatMessages } from "@stores/chats";
|
||||
import { getHourAgo } from "@utils/date";
|
||||
import { useCallback, useRef } from "react";
|
||||
import { Virtuoso } from "react-virtuoso";
|
||||
|
||||
const now = new Date();
|
||||
|
||||
const Header = (
|
||||
<div className="relative py-4">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-zinc-800" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
|
||||
{getHourAgo(24, now).toLocaleDateString("en-US", {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Empty = (
|
||||
<div className="flex flex-col gap-1 text-center">
|
||||
<h3 className="text-base font-semibold leading-none text-white">
|
||||
Nothing to see here yet
|
||||
</h3>
|
||||
<p className="text-base leading-none text-zinc-400">
|
||||
You two didn't talk yet, let's send first message
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export function ChatMessageList() {
|
||||
const account = useActiveAccount((state: any) => state.account);
|
||||
const messages = useChatMessages((state: any) => state.messages);
|
||||
@ -43,6 +75,10 @@ export function ChatMessageList() {
|
||||
overscan={50}
|
||||
increaseViewportBy={{ top: 200, bottom: 200 }}
|
||||
className="scrollbar-hide h-full w-full overflow-y-auto"
|
||||
components={{
|
||||
Header: () => Header,
|
||||
EmptyPlaceholder: () => Empty,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
66
src/shared/icons/empty.tsx
Normal file
66
src/shared/icons/empty.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import { SVGProps } from "react";
|
||||
|
||||
export function EmptyIcon(
|
||||
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
|
||||
) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="120"
|
||||
height="120"
|
||||
fill="none"
|
||||
viewBox="0 0 120 120"
|
||||
{...props}
|
||||
>
|
||||
<g clipPath="url(#clip0_110_63)">
|
||||
<path
|
||||
fill="#27272A"
|
||||
fillRule="evenodd"
|
||||
d="M60 120c33.137 0 60-26.863 60-60S93.137 0 60 0C45.133 0 39.482 17.832 29 26.787 16.119 37.792 0 41.73 0 60c0 33.137 26.863 60 60 60z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
<g filter="url(#filter0_f_110_63)">
|
||||
<path
|
||||
fill="#18181B"
|
||||
fillRule="evenodd"
|
||||
d="M64 101c19.33 0 35-13.208 35-29.5S83.33 42 64 42c-8.672 0-11.969 8.767-18.083 13.17C38.403 60.58 29 62.517 29 71.5 29 87.792 44.67 101 64 101z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
fill="#3F3F46"
|
||||
fillRule="evenodd"
|
||||
d="M82.941 59H65.06C59.504 59 55 63.476 55 68.997v4.871c0 5.521 4.504 9.997 10.059 9.997h18.879l5.779 4.685a2.02 2.02 0 002.83-.286c.293-.356.453-.803.453-1.263V68.997C93 63.476 88.496 59 82.941 59z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
<path
|
||||
fill="#D4D4D8"
|
||||
fillRule="evenodd"
|
||||
d="M41.161 39h32.678C81.659 39 88 45.408 88 53.314v12.864c0 7.905-6.34 14.314-14.161 14.314H41.547l-9.186 7.742a3.244 3.244 0 01-4.603-.422A3.325 3.325 0 0127 85.697V53.314C27 45.408 33.34 39 41.161 39z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_f_110_63"
|
||||
width="92"
|
||||
height="81"
|
||||
x="18"
|
||||
y="31"
|
||||
colorInterpolationFilters="sRGB"
|
||||
filterUnits="userSpaceOnUse"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur
|
||||
result="effect1_foregroundBlur_110_63"
|
||||
stdDeviation="5.5"
|
||||
/>
|
||||
</filter>
|
||||
<clipPath id="clip0_110_63">
|
||||
<path fill="#fff" d="M0 0H120V120H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@ -34,4 +34,5 @@ export * from "./world";
|
||||
export * from "./zap";
|
||||
export * from "./loader";
|
||||
export * from "./trending";
|
||||
export * from "./empty";
|
||||
// @endindex
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { LinkPreview } from "./preview/link";
|
||||
import { MentionNote } from "@shared/notes/mentions/note";
|
||||
import { ImagePreview } from "@shared/notes/preview/image";
|
||||
import { LinkPreview } from "@shared/notes/preview/link";
|
||||
import { VideoPreview } from "@shared/notes/preview/video";
|
||||
import { truncateContent } from "@utils/transform";
|
||||
|
||||
export function Kind1({
|
||||
content,
|
||||
@ -11,7 +10,7 @@ export function Kind1({
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`select-text whitespace-pre-line break-words text-base text-zinc-100 ${
|
||||
className={`select-text break-words text-base text-zinc-100 ${
|
||||
truncate ? "line-clamp-3" : ""
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
|
||||
import { EmptyIcon } from "@shared/icons";
|
||||
import { Reply } from "@shared/notes/replies/item";
|
||||
import { RelayContext } from "@shared/relayProvider";
|
||||
import { useContext } from "react";
|
||||
@ -35,8 +36,11 @@ export function RepliesList({ id }: { id: string }) {
|
||||
</div>
|
||||
) : data.length === 0 ? (
|
||||
<div className="px=3">
|
||||
<div className="w-full h-24 flex items-center justify-center rounded-md bg-zinc-900">
|
||||
<p className="text-zinc-300 font-medium">No replies...</p>
|
||||
<div className="w-full flex items-center justify-center rounded-md bg-zinc-900">
|
||||
<div className="py-6 flex flex-col items-center justify-center gap-2">
|
||||
<EmptyIcon width={56} height={56} />
|
||||
<p className="text-zinc-500 text-sm font-medium">No replies</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user