reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add notification modal

Browse Source
This commit is contained in:
Ren Amamiya
2023-07-03 15:23:31 +07:00
parent 6f29df112b
commit 861b04100a
9 changed files with 235 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/chat/components/messages/item.tsx
View File

@@ -35,28 +35,13 @@ export function ChatMessageItem({
<p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
{content.parsed}
</p>
{Array.isArray(content.images) && content.images.length ? (
<ImagePreview urls={content.images} />
) : (
<></>
)}
{Array.isArray(content.videos) && content.videos.length ? (
<VideoPreview urls={content.videos} />
) : (
<></>
)}
{Array.isArray(content.links) && content.links.length ? (
<LinkPreview urls={content.links} />
) : (
<></>
)}
{Array.isArray(content.notes) && content.notes.length ? (
{content.images.length > 0 && <ImagePreview urls={content.images} />}
{content.videos.length > 0 && <VideoPreview urls={content.videos} />}
{content.links.length > 0 && <LinkPreview urls={content.links} />}
{content.notes.length > 0 &&
content.notes.map((note: string) => (
<MentionNote key={note} id={note} />
))
) : (
<></>
)}
))}
</div>
</div>
</div>

6
src/app/chat/components/modal.tsx
View File

@@ -1,6 +1,6 @@
import { User } from "@app/auth/components/user";
import { Dialog, Transition } from "@headlessui/react";
import { CancelIcon, PlusIcon } from "@shared/icons";
import { CancelIcon, LoaderIcon, PlusIcon } from "@shared/icons";
import { useAccount } from "@utils/hooks/useAccount";
import { Fragment, useState } from "react";
import { useNavigate } from "react-router-dom";
@@ -92,7 +92,9 @@ export function NewMessageModal() {
</div>
<div className="h-[500px] flex flex-col pb-5 overflow-x-hidden overflow-y-auto">
{status === "loading" ? (
<p>Loading...</p>
<div className="px-4 py-3 inline-flex items-center justify-center">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
</div>
) : (
follows.map((follow) => (
<div

35
src/app/trending/components/profile.tsx
View File

@@ -26,22 +26,27 @@ export function Profile({ data }: { data: any }) {
);
return (
<div className="rounded-md bg-zinc-900 px-5 py-5">
<div className="flex items-center gap-2">
<div className="w-12 h-12 shrink-0">
<Image
src={profile.picture}
fallback={DEFAULT_AVATAR}
className="w-12 h-12 object-cover rounded"
/>
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-5 py-5">
<div className="flex items-center justify-between">
<div className="inline-flex items-center gap-2">
<div className="w-11 h-11 shrink-0">
<Image
src={profile.picture}
fallback={DEFAULT_AVATAR}
className="w-11 h-11 object-cover rounded-lg"
/>
</div>
<div className="inline-flex flex-col gap-1">
<h3 className="max-w-[15rem] truncate font-semibold text-zinc-100 leading-none">
{profile.display_name || profile.name}
</h3>
<p className="max-w-[10rem] truncate text-sm text-zinc-400 leading-none">
{profile.nip05 || shortenKey(data.pubkey)}
</p>
</div>
</div>
<div className="inline-flex flex-col gap-1">
<h3 className="max-w-[15rem] truncate font-semibold text-zinc-100 leading-none">
{profile.display_name || profile.name}
</h3>
<p className="max-w-[10rem] truncate text-sm text-zinc-400 leading-none">
{profile.nip05 || shortenKey(data.pubkey)}
</p>
<div className="inline-flex items-center gap-2">
<button type="button">Follow</button>
</div>
</div>
<div className="mt-2">

2
src/app/trending/components/trendingProfiles.tsx
View File

@@ -24,7 +24,7 @@ export function TrendingProfiles() {
</div>
</div>
) : (
<div className="relative w-full flex flex-col gap-3 px-3 pt-1.5">
<div className="relative w-full flex flex-col gap-3 px-3 pt-3">
{data.profiles.map((item) => (
<Profile key={item.pubkey} data={item} />
))}